MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整

【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整

HTML&CSS
css-font-size

HTML/CSSを使ったフォントサイズの指定は、あらゆるデバイスで読みやすいWebサイトを作るための基本です。

本記事では、pxやremといった単位の選び方、スマホ画面に合わせた自動調整、「CSSが効かない！」という時の解決策などを解説します。

フォントサイズ（文字）以外にも、文字装飾を詳しく知りたい人は「【html&css】文字装飾に関するWebデザインまとめ」を一読ください。

【html&css】文字装飾に関するWebデザインまとめ
目次

フォントサイズ指定の基本と書き方

Webサイトを制作する際、見出しを目立たせたり、注釈を控えめに表示したり、文字の大きさをコントロールすることはデザインの基本です。

ここでは、フォント サイズに関する知識を網羅的に記載します。

テキストにおける文字の大きさ、実務で推奨されるフォントサイズの指定方法、文字を大きくしたり小さくしたりする具体的な方法を解説します。

フォントサイズ指定の基本と書き方
  • CSSを使ったフォントサイズの記述
  • ブラウザのデフォルトサイズとフォントサイズ一覧

CSSを使ったフォントサイズの記述

現在のWeb標準規格（HTML5）において、HTMLは「文章の構造（意味）」を定義するものであり、文字の大きさや色といった「見た目」はCSSで制御するのがルールです。

文字の大きさを変えたい場合は、HTMLには<p class="text-large">のようにクラス名をつけ、外部のCSSファイル側でfont-size: 20px;と指定して一元管理します。

❌ 悪い例（古いタグ・style直書き）
廃止されたタグ
インラインのstyle直書き
<!– ⚠️ 使ってはいけない古いタグ –>
<font size=”5″>廃止されたタグ</font>

<!– ⚠️ 修正が地獄になる直書き –>
<p style=”font-size: 12px;”>直書き</p>
⭕️ 良い例（クラス名で外部CSS管理）
CSSで大きくした文字
CSSで小さくした文字
<!– HTML：名前（クラス）だけをつける –>
<p class=”text-large”>大きくした文字</p>
<p class=”text-small”>小さくした文字</p>

/* CSS：スタイルシート側でサイズを指定 */
.text-large {
  font-size: 24px;
}
.text-small {
  font-size: 12px;
}
HTMLコード表示
<div class="hfont-base1-wrapper">
  
  <div class="hfont-base1-demo-area">
    
    <div class="hfont-base1-box">
      <div class="hfont-base1-label" style="color:#dc3545;">❌ 悪い例（古いタグ・style直書き）</div>
      
      <div class="hfont-base1-visual">
        <div><span style="font-size: 24px; color: #dc3545; font-weight: bold;">廃止されたタグ</span></div>
        <div><span style="font-size: 12px; color: #dc3545;">インラインのstyle直書き</span></div>
      </div>

      <div class="hfont-base1-code hfont-base1-code-bad">
        <!-- ⚠️ 使ってはいけない古いタグ --><br>
        <span class="hfont-base1-hl-red"><font size="5"></span>廃止されたタグ<span class="hfont-base1-hl-red"></font></span><br><br>
        <!-- ⚠️ 修正が地獄になる直書き --><br>
        <p <span class="hfont-base1-hl-red">style="font-size: 12px;"</span>>直書き</p>
      </div>
    </div>

    <div class="hfont-base1-box">
      <div class="hfont-base1-label" style="color:#198754;">⭕️ 良い例（クラス名で外部CSS管理）</div>
      
      <div class="hfont-base1-visual">
        <div class="hfont-base1-good-large">CSSで大きくした文字</div>
        <div class="hfont-base1-good-small">CSSで小さくした文字</div>
      </div>

      <div class="hfont-base1-code hfont-base1-code-good">
        <!-- HTML：名前（クラス）だけをつける --><br>
        <p <span class="hfont-base1-hl-green">class="text-large"</span>>大きくした文字</p><br>
        <p <span class="hfont-base1-hl-green">class="text-small"</span>>小さくした文字</p><br><br>
        /* CSS：スタイルシート側でサイズを指定 */<br>
        <span class="hfont-base1-hl-green">.text-large</span> {<br>
          font-size: 24px;<br>
        }<br>
        <span class="hfont-base1-hl-green">.text-small</span> {<br>
          font-size: 12px;<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hfont-base1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-base1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hfont-base1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hfont-base1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hfont-base1-visual {
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ⭕️ 良い例のCSSクラス */
.hfont-base1-good-large {
  font-size: 24px;
  color: #198754;
  font-weight: bold;
}
.hfont-base1-good-small {
  font-size: 12px;
  color: #666;
}

.hfont-base1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hfont-base1-code-bad { border-left: 4px solid #dc3545; }
.hfont-base1-code-good { border-left: 4px solid #198754; }
.hfont-base1-hl-red { color: #e06c75; font-weight: bold; }
.hfont-base1-hl-green { color: #98c379; font-weight: bold; }

ブラウザのデフォルトサイズとフォントサイズ一覧

CSSで文字の大きさを指定しなかった場合、ブラウザが標準で持っている文字サイズが適用されます。

主要なブラウザのパソコン版におけるデフォルトのフォントサイズは「16px」です。

これを基準にして全体のレイアウトを組み立てていきます。

実務において、フォントサイズの指定はpxではなく、rem （レム）という相対単位を使うのがスタンダードです。

1remはデフォルトサイズ（通常16px）と同じになり、1.5remなら24px相当になります。

これなら、ユーザーの端末設定に応じて自動的に拡大・縮小される柔軟なサイトになります。

📏 デフォルト基準のフォントサイズ比較一覧（rem単位）
極小（注釈など）
サンプルテキスト (0.75rem / 12px相当)
少し小さめ
サンプルテキスト (0.875rem / 14px相当)
標準（デフォルト）
サンプルテキスト (1rem / 16px基準)
少し大きめ
サンプルテキスト (1.25rem / 20px相当)
大見出し用
サンプルテキスト (1.5rem / 24px相当)
/* ★実務でのモダンな指定方法（remの活用） */
.text-default {
  font-size: 1rem; /* デフォルトの16pxと同等 */
}

.text-large {
  font-size: 1.5rem; /* 16pxの1.5倍 = 24px相当 */
}

.text-small {
  font-size: 0.75rem; /* 16pxの0.75倍 = 12px相当 */
}

※ rem を使うことで、ユーザーがスマホの設定で「文字を大きく」している場合、その設定を尊重して全体が綺麗に拡大されるようになります。

HTMLコード表示
<div class="hfont-list2-wrapper">
  
  <div class="hfont-list2-demo-area">
    
    <div class="hfont-list2-box">
      <div class="hfont-list2-label">📏 デフォルト基準のフォントサイズ比較一覧（rem単位）</div>
      
      <div class="hfont-list2-visual">
        
        <div class="hfont-list2-row">
          <div class="hfont-list2-size-name">極小（注釈など）</div>
          <div class="hfont-list2-preview" style="font-size: 0.75rem;">サンプルテキスト (0.75rem / 12px相当)</div>
        </div>

        <div class="hfont-list2-row">
          <div class="hfont-list2-size-name">少し小さめ</div>
          <div class="hfont-list2-preview" style="font-size: 0.875rem;">サンプルテキスト (0.875rem / 14px相当)</div>
        </div>

        <div class="hfont-list2-row hfont-list2-row-default">
          <div class="hfont-list2-size-name" style="color: #0d6efd;">標準（デフォルト）</div>
          <div class="hfont-list2-preview" style="font-size: 1rem; color: #0d6efd;">サンプルテキスト (1rem / 16px基準)</div>
        </div>

        <div class="hfont-list2-row">
          <div class="hfont-list2-size-name">少し大きめ</div>
          <div class="hfont-list2-preview" style="font-size: 1.25rem;">サンプルテキスト (1.25rem / 20px相当)</div>
        </div>

        <div class="hfont-list2-row">
          <div class="hfont-list2-size-name">大見出し用</div>
          <div class="hfont-list2-preview" style="font-size: 1.5rem;">サンプルテキスト (1.5rem / 24px相当)</div>
        </div>

      </div>

      <div class="hfont-list2-code">
        /* ★実務でのモダンな指定方法（remの活用） */<br>
        <span class="hfont-list2-hl-green">.text-default</span> {<br>
          font-size: <span class="hfont-list2-hl-blue">1rem</span>; /* デフォルトの16pxと同等 */<br>
        }<br><br>
        <span class="hfont-list2-hl-green">.text-large</span> {<br>
          font-size: <span class="hfont-list2-hl-blue">1.5rem</span>; /* 16pxの1.5倍 = 24px相当 */<br>
        }<br><br>
        <span class="hfont-list2-hl-green">.text-small</span> {<br>
          font-size: <span class="hfont-list2-hl-blue">0.75rem</span>; /* 16pxの0.75倍 = 12px相当 */<br>
        }
      </div>
      <p class="hfont-list2-note">※ <code>rem</code> を使うことで、ユーザーがスマホの設定で「文字を大きく」している場合、その設定を尊重して全体が綺麗に拡大されるようになります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-list2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-list2-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-list2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.hfont-list2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hfont-list2-visual {
  background-color: #f1f3f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hfont-list2-row {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.hfont-list2-row-default {
  border: 2px solid #0d6efd;
  background-color: #e7f1ff;
}

.hfont-list2-size-name {
  width: 130px;
  font-size: 13px;
  font-weight: bold;
  color: #666;
  flex-shrink: 0;
}
.hfont-list2-preview {
  color: #333;
  line-height: 1.2;
}

.hfont-list2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hfont-list2-hl-green { color: #98c379; font-weight: bold; }
.hfont-list2-hl-blue { color: #61afef; font-weight: bold; }
.hfont-list2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

px・rem・em・%：単位の使い分けと変換

CSSでフォントサイズを指定する際、「単位」の種類が重要になります。

「とりあえず全部pxで書いている」という人も多いですが、多様なデバイス（スマホ、タブレット、PC）に対応するWebサイトを作るには、単位の使い分けが不可欠です。

ここでは、実務で使われる4つの単位（px,rem,em,%）の特徴について解説します。

px・rem・em・%：単位の使い分けと変換
  • 絶対的なサイズ指定px（ピクセル）の使い方
  • レスポンシブに強いrem（レム）と相対指定
  • 親要素に依存するem（エム）の使い方
  • 要素のサイズに応じた%（パーセント）の指定

絶対的なサイズ指定px（ピクセル）の使い方

px（ピクセル）は、画面上の小さな点（ドット）を1とする絶対的なサイズ指定です。

WordやPowerPointの文字サイズ指定と同じ感覚で使えるため、初心者にとっても直感的で分かりやすい単位です。

実務において、pxは「絶対にサイズを変えたくない要素」のみ使用し、本文の文字サイズにpxを使うのは極力避けるのが現在のスタンダードです。

📏 絶対単位「px（ピクセル）」の挙動

フォントサイズ: 12px（注釈など）

フォントサイズ: 16px（一般的な本文）

フォントサイズ: 24px（見出し）

/* 親がどんなサイズでも、絶対にこのピクセル数になる */
.text-12px { font-size: 12px; }
.text-16px { font-size: 16px; }
.text-24px { font-size: 24px; }

※デザインカンプ（完成見本）通りにピクセルパーフェクトで組む時には便利ですが、ユーザーの設定を無視してしまうという欠点があります。

HTMLコード表示
<div class="hfont-unit1-wrapper">
  
  <div class="hfont-unit1-demo-area">
    
    <div class="hfont-unit1-box">
      <div class="hfont-unit1-label">📏 絶対単位「px（ピクセル）」の挙動</div>
      
      <div class="hfont-unit1-visual">
        <p class="hfont-unit1-text-12px">フォントサイズ: 12px（注釈など）</p>
        <p class="hfont-unit1-text-16px">フォントサイズ: 16px（一般的な本文）</p>
        <p class="hfont-unit1-text-24px">フォントサイズ: 24px（見出し）</p>
      </div>

      <div class="hfont-unit1-code">
        /* 親がどんなサイズでも、絶対にこのピクセル数になる */<br>
        <span class="hfont-unit1-hl-green">.text-12px</span> { font-size: <span class="hfont-unit1-hl-blue">12px</span>; }<br>
        <span class="hfont-unit1-hl-green">.text-16px</span> { font-size: <span class="hfont-unit1-hl-blue">16px</span>; }<br>
        <span class="hfont-unit1-hl-green">.text-24px</span> { font-size: <span class="hfont-unit1-hl-blue">24px</span>; }
      </div>
      <p class="hfont-unit1-note">※デザインカンプ（完成見本）通りにピクセルパーフェクトで組む時には便利ですが、ユーザーの設定を無視してしまうという欠点があります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-unit1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-unit1-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-unit1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hfont-unit1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hfont-unit1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}
.hfont-unit1-visual p {
  color: #333;
  margin: 0 0 15px 0;
  font-weight: bold;
}
.hfont-unit1-visual p:last-child {
  margin-bottom: 0;
}

.hfont-unit1-text-12px { font-size: 12px; }
.hfont-unit1-text-16px { font-size: 16px; color: #0d6efd !important; }
.hfont-unit1-text-24px { font-size: 24px; }

.hfont-unit1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #6c757d;
}
.hfont-unit1-hl-green { color: #98c379; font-weight: bold; }
.hfont-unit1-hl-blue { color: #61afef; font-weight: bold; }
.hfont-unit1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

レスポンシブに強いrem（レム）と相対指定

pxの弱点を克服し、Web制作で「文字サイズの主流」となっているのがrem（レム：Root em）です。

これは相対的な単位で、「ルート要素（<html>タグ）の文字サイズを1とする」というルールを持ちます。

通常、ブラウザのルートのデフォルトサイズは16pxなので、1rem = 16pxになります。

本文や見出しのフォントサイズは、remで指定します。

これにより、ユーザーがブラウザで「文字を大きくする」設定をした場合、ルートのサイズが16pxから20pxなどに変動し、それに連動してサイト全体の文字がレイアウトを崩すことなく拡大されます。

✨ 相対単位「rem（レム）」の連動挙動

↓ 基準(html)が16pxの場合

本文（1rem = 16px相当）

見出し（1.5rem = 24px相当）

↓ ユーザー設定で基準が20pxに拡大された場合

本文（1rem = 20px相当に自動拡大！）

見出し（1.5rem = 30px相当に自動拡大！）

/* htmlのサイズを基準（1）として計算される */
.text-1rem {
  font-size: 1rem; /* 基準 × 1倍 */
}
.text-1-5rem {
  font-size: 1.5rem; /* 基準 × 1.5倍 */
}

※remを使うだけで、スマホ設定の文字拡大に対応できる「ユーザーに優しいサイト」になります。

HTMLコード表示
<div class="hfont-unit2-wrapper">
  
  <div class="hfont-unit2-demo-area">
    
    <div class="hfont-unit2-box">
      <div class="hfont-unit2-label">✨ 相対単位「rem（レム）」の連動挙動</div>
      
      <div class="hfont-unit2-visual hfont-unit2-root-normal">
        <p style="font-size: 12px; color: #666; margin-bottom: 10px;">↓ 基準(html)が16pxの場合</p>
        <div class="hfont-unit2-box-inner">
          <p class="hfont-unit2-text-1rem">本文（1rem = 16px相当）</p>
          <p class="hfont-unit2-text-1-5rem">見出し（1.5rem = 24px相当）</p>
        </div>
      </div>

      <div class="hfont-unit2-visual hfont-unit2-root-large" style="margin-top: 15px;">
        <p style="font-size: 12px; color: #dc3545; margin-bottom: 10px;">↓ ユーザー設定で基準が20pxに拡大された場合</p>
        <div class="hfont-unit2-box-inner" style="border-color: #dc3545; background-color: #f8d7da;">
          <p class="hfont-unit2-text-1rem">本文（1rem = 20px相当に自動拡大！）</p>
          <p class="hfont-unit2-text-1-5rem">見出し（1.5rem = 30px相当に自動拡大！）</p>
        </div>
      </div>

      <div class="hfont-unit2-code">
        /* htmlのサイズを基準（1）として計算される */<br>
        <span class="hfont-unit2-hl-green">.text-1rem</span> {<br>
          font-size: <span class="hfont-unit2-hl-blue">1rem</span>;   /* 基準 × 1倍 */<br>
        }<br>
        <span class="hfont-unit2-hl-green">.text-1-5rem</span> {<br>
          font-size: <span class="hfont-unit2-hl-blue">1.5rem</span>; /* 基準 × 1.5倍 */<br>
        }
      </div>
      <p class="hfont-unit2-note">※remを使うだけで、スマホ設定の文字拡大に対応できる「ユーザーに優しいサイト」になります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-unit2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-unit2-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-unit2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hfont-unit2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #0d6efd; }

.hfont-unit2-visual {
  padding: 0;
  margin-bottom: 10px;
}
.hfont-unit2-box-inner {
  padding: 15px;
  background-color: #f1f3f5;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.hfont-unit2-visual p { margin: 0 0 10px 0; font-weight: bold; color: #333; line-height: 1.4; }
.hfont-unit2-visual p:last-child { margin-bottom: 0; }

/* 疑似的にremの挙動を再現するためのスタイル */
/* 通常時 */
.hfont-unit2-root-normal .hfont-unit2-text-1rem { font-size: 16px; }
.hfont-unit2-root-normal .hfont-unit2-text-1-5rem { font-size: 24px; color: #0d6efd; }
/* 拡大時（ユーザー設定をシミュレート） */
.hfont-unit2-root-large .hfont-unit2-text-1rem { font-size: 20px; }
.hfont-unit2-root-large .hfont-unit2-text-1-5rem { font-size: 30px; color: #dc3545; }

.hfont-unit2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
  margin-top: 20px;
}
.hfont-unit2-hl-green { color: #98c379; font-weight: bold; }
.hfont-unit2-hl-blue { color: #61afef; font-weight: bold; }
.hfont-unit2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

親要素に依存するem（エム）の使い方

em（エム）はremと同じ相対単位ですが、基準となるものが異なります。

remが常に「ルート（一番大元のhtmlタグ）」を基準にするのに対し、emは「自分の親要素の文字サイズ」を1（基準）として計算します。

フォントサイズの指定にemは使いません。（remを使います。）

emが真価を発揮するのは、「文字の大きさに連動して余白を変えたい時」です。

例えば、ボタンのpadding （内側の余白）を1emにしておけば、中の文字サイズを大きくした時に、ボタンの余白も自動で同じ比率で大きくなるという使い方があります。

⚠️ 「em」の入れ子によるサイズ増幅の罠
親要素 (1.2em)
子要素 (1.2em × 1.2倍 = 1.44倍)
孫要素 (1.2em × 1.44倍 = 1.728倍)
ひ孫要素 (もはや制御不能に巨大化)
/* font-sizeにemを使うと、親のサイズを掛け算し続ける */
.em-box {
  font-size: 1.2em; /* 絶対にやってはいけない書き方 */
}

※どこでどの親のサイズを引き継いでいるのか計算できなくなり、レイアウトが崩壊する原因になります。

⭕️ 良い例（remでサイズを安定させる）
親要素 (1.2rem)
子要素 (親に関わらず 1.2rem = 19.2px)
孫要素 (親に関わらず 1.2rem = 19.2px)
ひ孫要素 (常に一定のサイズで安定)
/* ★実務の標準：font-sizeには必ずremを使う */
.rem-box {
  font-size: 1.2rem; /* ルート基準なので安定する */
}

※remは「ルート（html）の文字サイズ」を基準にするため、どれだけ入れ子にしてもサイズが掛け算で増幅することはありません。

HTMLコード表示
<div class="hfont-unit3-wrapper">
  
  <div class="hfont-unit3-demo-area">
    
    <div class="hfont-unit3-box">
      <div class="hfont-unit3-label" style="color:#dc3545;">⚠️ 「em」の入れ子によるサイズ増幅の罠</div>
      
      <div class="hfont-unit3-visual">
        <div class="hfont-unit3-em-box">
          親要素 (1.2em)
          <div class="hfont-unit3-em-box">
            子要素 (1.2em × 1.2倍 = 1.44倍)
            <div class="hfont-unit3-em-box">
              孫要素 (1.2em × 1.44倍 = 1.728倍)
              <div class="hfont-unit3-em-box" style="color:#dc3545;">
                ひ孫要素 (もはや制御不能に巨大化)
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="hfont-unit3-code hfont-unit3-code-bad">
        /* font-sizeにemを使うと、親のサイズを掛け算し続ける */<br>
        <span class="hfont-unit3-hl-green">.em-box</span> {<br>
          font-size: <span class="hfont-unit3-hl-red">1.2em</span>; /* 絶対にやってはいけない書き方 */<br>
        }
      </div>
      <p class="hfont-unit3-note">※どこでどの親のサイズを引き継いでいるのか計算できなくなり、レイアウトが崩壊する原因になります。</p>
    </div>

    <div class="hfont-unit3-box" style="border-color: #198754;">
      <div class="hfont-unit3-label" style="color:#198754;">⭕️ 良い例（remでサイズを安定させる）</div>
      
      <div class="hfont-unit3-visual">
        <div class="hfont-unit3-rem-box">
          親要素 (1.2rem)
          <div class="hfont-unit3-rem-box">
            子要素 (親に関わらず 1.2rem = 19.2px)
            <div class="hfont-unit3-rem-box">
              孫要素 (親に関わらず 1.2rem = 19.2px)
              <div class="hfont-unit3-rem-box" style="color:#198754;">
                ひ孫要素 (常に一定のサイズで安定)
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="hfont-unit3-code hfont-unit3-code-good">
        /* ★実務の標準：font-sizeには必ずremを使う */<br>
        <span class="hfont-unit3-hl-green">.rem-box</span> {<br>
          font-size: <span class="hfont-unit3-hl-green">1.2rem</span>; /* ルート基準なので安定する */<br>
        }
      </div>
      <p class="hfont-unit3-note" style="color:#198754;">※remは「ルート（html）の文字サイズ」を基準にするため、どれだけ入れ子にしてもサイズが掛け算で増幅することはありません。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-unit3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-unit3-demo-area {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 30px; /* デモボックス同士の隙間 */
  align-items: center;
}
.hfont-unit3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hfont-unit3-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hfont-unit3-visual {
  padding: 20px;
  background-color: #f1f3f5;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* ★入れ子で増幅する恐怖のem指定の挙動 */
.hfont-unit3-em-box {
  font-size: 1.2em; /* 文字が1.2倍になる */
  font-weight: bold;
  color: #333;
  margin-top: 10px;
  padding-left: 10px;
  border-left: 3px solid #ccc;
  line-height: 1.4;
}
.hfont-unit3-em-box:first-child { margin-top: 0; }

/* ★入れ子にしても安定する正しいrem指定の挙動 */
.hfont-unit3-rem-box {
  font-size: 1.2rem; /* ルート(16px)の1.2倍 = 常に19.2px相当 */
  font-weight: bold;
  color: #333;
  margin-top: 10px;
  padding-left: 10px;
  border-left: 3px solid #ced4da;
  line-height: 1.4;
  /* emの掛け算を再現させないための疑似的なリセット */
  display: inline-block;
  width: 100%;
  font-size: 19.2px !important; /* remの挙動を再現 */
}
.hfont-unit3-rem-box:first-child { margin-top: 0; }

.hfont-unit3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hfont-unit3-code-bad { border-left: 4px solid #dc3545; }
.hfont-unit3-code-good { border-left: 4px solid #198754; }

.hfont-unit3-hl-green { color: #98c379; font-weight: bold; }
.hfont-unit3-hl-red { color: #e06c75; font-weight: bold; }
.hfont-unit3-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

要素のサイズに応じた%（パーセント）の指定

% （パーセント）も相対単位の一つで、フォントサイズに用いた場合は「親要素の文字サイズ」に対する割合になります。（例：親が16pxで、子が 150%なら24px）

つまり、挙動としては先ほどのemと全く同じ性質（親に依存する）を持ちます。

フォントサイズの指定に%は使いません。

%が力を発揮するのは、文字サイズではなく横幅（width）や行間（line-height）の指定です。

例えば、スマホ対応をする際、画像の横幅をwidth: 100%;にしておけば、画面サイズが変わっても常に画面いっぱいに合わせて伸縮します。

また、文章の行間をline-height: 160%;としておけば、文字の大きさが変わっても常に適切なゆとりを保ちます。

💡 「%」の正しい使い方（行間のコントロール）

↓ line-height: 100%（行間なし・読みにくい）

Webサイトの文章は、行間が詰まっていると非常に読みにくく、ユーザーにストレスを与えます。特にスマホの小さな画面では誤タップの原因にもなります。

↓ line-height: 160%（最適なゆとり）

パーセントを使って行間を広げると、文字サイズに対して常に1.6倍の高さが確保されるため、非常に美しく読みやすいレイアウトになります。
/* font-sizeではなく、行間に%を使う */
.text-content {
  font-size: 1rem;
  line-height: 160%; /* 文字の1.6倍の高さを確保 */
}

※line-heightに関しては line-height: 1.6; と単位を付けずに書く方法も実務ではよく使われます（挙動は同じです）。

HTMLコード表示
<div class="hfont-unit4-wrapper">
  
  <div class="hfont-unit4-demo-area">
    
    <div class="hfont-unit4-box">
      <div class="hfont-unit4-label">💡 「%」の正しい使い方（行間のコントロール）</div>
      
      <div class="hfont-unit4-visual">
        <p style="font-size:12px; color:#666; margin:0 0 10px 0;">↓ line-height: 100%（行間なし・読みにくい）</p>
        <div class="hfont-unit4-bad-lh">
          Webサイトの文章は、行間が詰まっていると非常に読みにくく、ユーザーにストレスを与えます。特にスマホの小さな画面では誤タップの原因にもなります。
        </div>

        <p style="font-size:12px; color:#198754; margin:15px 0 10px 0; font-weight:bold;">↓ line-height: 160%（最適なゆとり）</p>
        <div class="hfont-unit4-good-lh">
          パーセントを使って行間を広げると、文字サイズに対して常に1.6倍の高さが確保されるため、非常に美しく読みやすいレイアウトになります。
        </div>
      </div>

      <div class="hfont-unit4-code">
        /* font-sizeではなく、行間に%を使う */<br>
        <span class="hfont-unit4-hl-green">.text-content</span> {<br>
          font-size: 1rem;<br>
          <span class="hfont-unit4-hl-blue">line-height: 160%;</span> /* 文字の1.6倍の高さを確保 */<br>
        }
      </div>
      <p class="hfont-unit4-note">※line-heightに関しては <code>line-height: 1.6;</code> と単位を付けずに書く方法も実務ではよく使われます（挙動は同じです）。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-unit4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-unit4-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-unit4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hfont-unit4-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #198754; }

.hfont-unit4-visual {
  padding: 20px;
  background-color: #f1f3f5;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 行間が詰まっている例 */
.hfont-unit4-bad-lh {
  font-size: 14px;
  color: #333;
  line-height: 100%; /* 行間なし */
  background-color: #f8d7da;
  padding: 10px;
  border-radius: 4px;
}

/* ★行間が綺麗な例（%を活用） */
.hfont-unit4-good-lh {
  font-size: 14px;
  color: #333;
  line-height: 160%; /* ★文字の1.6倍の高さ */
  background-color: #d1e7dd;
  padding: 10px;
  border-radius: 4px;
}

.hfont-unit4-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}
.hfont-unit4-hl-green { color: #98c379; font-weight: bold; }
.hfont-unit4-hl-blue { color: #61afef; font-weight: bold; }
.hfont-unit4-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

ページ全体や特定のタグのサイズを変更する

Webサイトのコーディングでは、「この文字は大きく、この文字は小さく」と個別に指定していくのは非効率です。

実務では、サイトの「文字サイズのルール」を決め、CSSで制御していくのが基本です。

ここでは、ページ全体をコントロールする考え方、見出し、ボタン、テーブルといったパーツごとのフォントサイズ設計について解説します。

ページ全体や特定のタグのサイズを変更する
  • 見出しや本文のフォントサイズ
  • ボタンやラベルの文字サイズ
  • テーブル（表）内のフォントサイズ
  • 太字や色指定と文字サイズを組み合わせる

見出しや本文のフォントサイズ

Webサイトの骨格になるのが、見出し（h1〜h6）と本文（p）です。

特に、見出しの文字サイズはページの読みやすさを左右します。

実務では、CSSの冒頭でブラウザのデフォルトスタイルをリセットし、自分たちでh2は1.5rem（24px相当）、pは1rem（16px相当）といったタグのフォントサイズを明示的に指定して上書きします。

📚 見出しと本文のフォントサイズ設計
これはh2見出し（1.5rem = 24px）です

これは本文（pタグ）です。標準の文字サイズとして1rem（16px）を設定しています。見出しとのサイズ差をつけることで、ユーザーにとって読みやすい文章構造になります。

これはh3見出し（1.25rem = 20px）です

小見出しは本文より少しだけ大きくし、太字にすることで階層関係を明確にします。

/* ★ブラウザのデフォルトを上書きし、自分で設計する */
h2 {
  font-size: 1.5rem; /* 24px相当 */
  font-weight: bold;
}

h3 {
  font-size: 1.25rem; /* 20px相当 */
  font-weight: bold;
}

p {
  font-size: 1rem; /* 16px相当 */
  line-height: 1.6; /* 本文は行間も広めにとる */
}
HTMLコード表示
<div class="hfont-tag1-wrapper">
  
  <div class="hfont-tag1-demo-area">
    
    <div class="hfont-tag1-box">
      <div class="hfont-tag1-label">📚 見出しと本文のフォントサイズ設計</div>
      
      <div class="hfont-tag1-visual">
        <div class="hfont-tag1-h2">これはh2見出し（1.5rem = 24px）です</div>
        <p class="hfont-tag1-p">
          これは本文（pタグ）です。標準の文字サイズとして1rem（16px）を設定しています。見出しとのサイズ差をつけることで、ユーザーにとって読みやすい文章構造になります。
        </p>
        
        <div class="hfont-tag1-h3">これはh3見出し（1.25rem = 20px）です</div>
        <p class="hfont-tag1-p">
          小見出しは本文より少しだけ大きくし、太字にすることで階層関係を明確にします。
        </p>
      </div>

      <div class="hfont-tag1-code">
        /* ★ブラウザのデフォルトを上書きし、自分で設計する */<br>
        <span class="hfont-tag1-hl-green">h2</span> {<br>
          font-size: <span class="hfont-tag1-hl-blue">1.5rem</span>; /* 24px相当 */<br>
          font-weight: bold;<br>
        }<br><br>
        <span class="hfont-tag1-hl-green">h3</span> {<br>
          font-size: <span class="hfont-tag1-hl-blue">1.25rem</span>; /* 20px相当 */<br>
          font-weight: bold;<br>
        }<br><br>
        <span class="hfont-tag1-hl-green">p</span> {<br>
          font-size: <span class="hfont-tag1-hl-blue">1rem</span>; /* 16px相当 */<br>
          line-height: 1.6; /* 本文は行間も広めにとる */<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hfont-tag1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-tag1-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-tag1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hfont-tag1-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hfont-tag1-visual {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* サンプル用のh2, h3, p設計 */
.hfont-tag1-h2 {
  font-size: 24px; /* 1.5rem相当 */
  font-weight: bold;
  color: #212529;
  margin: 0 0 15px 0;
  border-bottom: 2px solid #0d6efd;
  padding-bottom: 5px;
}
.hfont-tag1-h3 {
  font-size: 20px; /* 1.25rem相当 */
  font-weight: bold;
  color: #212529;
  margin: 25px 0 10px 0;
}
.hfont-tag1-p {
  font-size: 16px; /* 1rem相当 */
  color: #495057;
  line-height: 1.6;
  margin: 0;
}

.hfont-tag1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hfont-tag1-hl-green { color: #98c379; font-weight: bold; }
.hfont-tag1-hl-blue { color: #61afef; font-weight: bold; }

見出しの使い方を詳しく知りたい人は「【html】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

また、<p>タグの使い方を詳しく知りたい人は「【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾」を一読ください。

【html】見出しタグの使い方：h1~h6の使い分けとデザイン例
【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾

ボタンやラベルの文字サイズ

お問い合わせの送信するボタンの文字や入力欄の上の見出しも、コンバージョン（成果）を左右する要素です。

ボタンや入力欄の文字サイズを整えるには、button, input { font-size: 1rem; }と明示的に指定するか、font-size: inherit;（親のサイズを強制的に引き継ぐ）を指定する必要があります。

ボタンの文字は視認性を高めるため、本文より少しだけ大きく太く（例：1.125rem / 18px相当）するのがよいです。

❌ 悪い例（文字サイズが引き継がれない）
/* bodyに指定してもボタンには効かない！ */
body { font-size: 16px; }

/* button自体への指定がないと、
勝手に小さい文字になってしまう */
⭕️ 良い例（明示的にサイズと太さを指定）
/* buttonタグに対して直接指定する */
button {
  font-size: 1.125rem; /* 本文より少し大きく(18px) */
  font-weight: bold; /* 太字にして目立たせる */
  padding: 15px 30px; /* 押しやすい余白を作る */
}

※ボタンの文字サイズを上げたら、必ずpadding（内側の余白）も広げてクリックしやすい大きさに整えます。

HTMLコード表示
<div class="hfont-tag2-wrapper">
  
  <div class="hfont-tag2-demo-area">
    
    <div class="hfont-tag2-box">
      <div class="hfont-tag2-label" style="color:#dc3545;">❌ 悪い例（文字サイズが引き継がれない）</div>
      
      <div class="hfont-tag2-visual">
        <button class="hfont-tag2-bad-btn">送信する</button>
      </div>

      <div class="hfont-tag2-code hfont-tag2-code-bad">
        /* bodyに指定してもボタンには効かない！ */<br>
        body { font-size: 16px; }<br><br>
        /* button自体への指定がないと、<br>
           勝手に小さい文字になってしまう */
      </div>
    </div>

    <div class="hfont-tag2-box">
      <div class="hfont-tag2-label" style="color:#198754;">⭕️ 良い例（明示的にサイズと太さを指定）</div>
      
      <div class="hfont-tag2-visual">
        <button class="hfont-tag2-good-btn">送信する</button>
      </div>

      <div class="hfont-tag2-code hfont-tag2-code-good">
        /* buttonタグに対して直接指定する */<br>
        <span class="hfont-tag2-hl-green">button</span> {<br>
          <span class="hfont-tag2-hl-blue">font-size: 1.125rem;</span> /* 本文より少し大きく(18px) */<br>
          font-weight: bold;   /* 太字にして目立たせる */<br>
          padding: 15px 30px;  /* 押しやすい余白を作る */<br>
        }
      </div>
      <p class="hfont-tag2-note" style="color:#198754;">※ボタンの文字サイズを上げたら、必ずpadding（内側の余白）も広げてクリックしやすい大きさに整えます。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-tag2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-tag2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hfont-tag2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hfont-tag2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hfont-tag2-visual {
  padding: 20px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
  text-align: center;
}

/* ❌ 悪い例：ブラウザデフォルトに近いボタン */
.hfont-tag2-bad-btn {
  font-size: 13.333px;
  padding: 1px 6px;
  cursor: pointer;
}

/* ⭕️ 良い例：実務で使われる押しやすいボタン */
.hfont-tag2-good-btn {
  font-size: 18px; /* 1.125rem相当 */
  font-weight: bold;
  background-color: #198754;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: opacity 0.2s;
}
.hfont-tag2-good-btn:hover { opacity: 0.8; }

.hfont-tag2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hfont-tag2-code-bad { border-left: 4px solid #dc3545; }
.hfont-tag2-code-good { border-left: 4px solid #198754; }
.hfont-tag2-hl-green { color: #98c379; font-weight: bold; }
.hfont-tag2-hl-blue { color: #61afef; font-weight: bold; }
.hfont-tag2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

<button>タグの使い方を詳しく知りたい人は「【HTML】buttonタグの使い方：リンク・CSS装飾・無効化」を一読ください。

【HTML】buttonタグの使い方：リンク・CSS装飾・無効化

テーブル（表）内のフォントサイズ

会社概要や料金表など、情報を整理して見せる<table>においても、セルの文字サイズ調整は重要です。

テーブルの中の文字サイズは、本文よりも1段階小さく（例：0.875rem / 14px相当）指定するのがよいです。

さらに、見出しのセル（<th>）は太字（bold）にし、データが入るセル（<td>）は通常の太さにすることで、視覚的なメリハリをつけます。

📊 テーブル（表）内の文字サイズ最適化

❌ 本文と同じサイズ（窮屈で折り返される）

プラン名 プレミアムエンタープライズプラン
料金 月額 10,000円（税抜）

⭕️ 少し小さくしてスッキリ（実務の標準）

プラン名 プレミアムエンタープライズプラン
料金 月額 10,000円（税抜）
/* テーブル内の文字は本文より1段階下げるのがセオリー */
th, td {
  font-size: 0.875rem; /* 14px相当にしてスッキリさせる */
  padding: 10px 15px;
}

/* 見出しセルは太字にしてメリハリをつける */
th {
  font-weight: bold;
  background-color: #f8f9fa;
}
HTMLコード表示
<div class="hfont-tag3-wrapper">
  
  <div class="hfont-tag3-demo-area">
    
    <div class="hfont-tag3-box">
      <div class="hfont-tag3-label">📊 テーブル（表）内の文字サイズ最適化</div>
      
      <div class="hfont-tag3-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 本文と同じサイズ（窮屈で折り返される）</p>
        <table class="hfont-tag3-bad-table">
          <tr>
            <th>プラン名</th>
            <td>プレミアムエンタープライズプラン</td>
          </tr>
          <tr>
            <th>料金</th>
            <td>月額 10,000円（税抜）</td>
          </tr>
        </table>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 少し小さくしてスッキリ（実務の標準）</p>
        <table class="hfont-tag3-good-table">
          <tr>
            <th>プラン名</th>
            <td>プレミアムエンタープライズプラン</td>
          </tr>
          <tr>
            <th>料金</th>
            <td>月額 10,000円（税抜）</td>
          </tr>
        </table>
      </div>

      <div class="hfont-tag3-code">
        /* テーブル内の文字は本文より1段階下げるのがセオリー */<br>
        <span class="hfont-tag3-hl-green">th, td</span> {<br>
          <span class="hfont-tag3-hl-blue">font-size: 0.875rem;</span> /* 14px相当にしてスッキリさせる */<br>
          padding: 10px 15px;<br>
        }<br><br>
        /* 見出しセルは太字にしてメリハリをつける */<br>
        <span class="hfont-tag3-hl-green">th</span> {<br>
          font-weight: bold;<br>
          background-color: #f8f9fa;<br>
        }
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hfont-tag3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-tag3-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-tag3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hfont-tag3-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hfont-tag3-visual {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* ❌ 悪いテーブル：文字が大きすぎて窮屈 */
.hfont-tag3-bad-table {
  width: 100%;
  border-collapse: collapse;
}
.hfont-tag3-bad-table th, .hfont-tag3-bad-table td {
  border: 1px solid #dee2e6;
  padding: 5px; /* 余白も狭い */
  font-size: 16px; /* 本文と同じ大きさ */
}
.hfont-tag3-bad-table th { background-color: #f8d7da; width: 30%; }

/* ⭕️ 良いテーブル：文字を小さくし、余白をとる */
.hfont-tag3-good-table {
  width: 100%;
  border-collapse: collapse;
}
.hfont-tag3-good-table th, .hfont-tag3-good-table td {
  border: 1px solid #ced4da;
  padding: 12px 15px; /* ゆったりとした余白 */
  font-size: 14px; /* ★14px相当(0.875rem)に下げる */
  color: #333;
}
.hfont-tag3-good-table th {
  background-color: #f8f9fa;
  font-weight: bold; /* thのみ太字 */
  width: 30%;
}

.hfont-tag3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #6c757d;
}
.hfont-tag3-hl-green { color: #98c379; font-weight: bold; }
.hfont-tag3-hl-blue { color: #61afef; font-weight: bold; }

<table>タグの使い方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ」を一読ください。

【HTML】tableタグ（テーブル）の作り方：枠線・セル結合・レスポンシブ | Code Stock

太字や色指定と文字サイズを組み合わせる

文章の途中で「ここだけは絶対に読んでほしい！」という重要なキーワードがある場合、フォントサイズを少し大きくしつつ、太字にしたり、文字色を変えたりして目立たせる手法が使われます。

文章の一部を強調する時は、spanタグにクラスを付け、CSSで装飾します。

この時、フォントサイズは周りの文字の「1.1倍〜1.2倍（例：1.2em）」程度に抑えるのがよいです。

太字（font-weight: bold;）とサイトのテーマカラーを組み合わせれば、サイズをそこまで大きくしなくても目立たせることができます。

🎨 太字・色と組み合わせた強調装飾

❌ 悪い例（極端なサイズアップで行間が崩れる）

当サービスの初期費用は通常1万円ですが、今月お申し込みいただいたお客様に限り、完全無料でご案内しております。

⭕️ 良い例（適度なサイズと色・太字の組み合わせ）

当サービスの初期費用は通常1万円ですが、今月お申し込みいただいたお客様に限り、完全無料でご案内しております。
<!– HTML：spanで囲んでクラスをつける –>
お客様に限り、<span class=”text-accent”>完全無料</span>で…

/* CSS：上品に目立たせる装飾セット */
.text-accent {
  font-size: 1.2em; /* 周りの文字の1.2倍に抑える */
  font-weight: bold; /* 太字にする */
  color: #dc3545; /* 落ち着いた赤色 */
}

※部分的な文字サイズの変更には、親要素のサイズを基準にする em を使うと、どんな場所でも「常に周りより少し大きい」状態を作れて便利です。

HTMLコード表示
<div class="hfont-tag4-wrapper">
  
  <div class="hfont-tag4-demo-area">
    
    <div class="hfont-tag4-box">
      <div class="hfont-tag4-label">🎨 太字・色と組み合わせた強調装飾</div>
      
      <div class="hfont-tag4-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（極端なサイズアップで行間が崩れる）</p>
        <div class="hfont-tag4-bad-text">
          当サービスの初期費用は通常1万円ですが、今月お申し込みいただいたお客様に限り、<span style="font-size: 28px; color: red; font-weight: bold;">完全無料</span>でご案内しております。
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 良い例（適度なサイズと色・太字の組み合わせ）</p>
        <div class="hfont-tag4-good-text">
          当サービスの初期費用は通常1万円ですが、今月お申し込みいただいたお客様に限り、<span class="hfont-tag4-accent">完全無料</span>でご案内しております。
        </div>
      </div>

      <div class="hfont-tag4-code">
        <!-- HTML：spanで囲んでクラスをつける --><br>
        お客様に限り、<span <span class="hfont-tag4-hl-green">class="text-accent"</span>>完全無料</span>で…<br><br>
        /* CSS：上品に目立たせる装飾セット */<br>
        <span class="hfont-tag4-hl-green">.text-accent</span> {<br>
          <span class="hfont-tag4-hl-blue">font-size: 1.2em;</span> /* 周りの文字の1.2倍に抑える */<br>
          <span class="hfont-tag4-hl-blue">font-weight: bold;</span> /* 太字にする */<br>
          <span class="hfont-tag4-hl-blue">color: #dc3545;</span> /* 落ち着いた赤色 */<br>
        }
      </div>
      <p class="hfont-tag4-note">※部分的な文字サイズの変更には、親要素のサイズを基準にする <code>em</code> を使うと、どんな場所でも「常に周りより少し大きい」状態を作れて便利です。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-tag4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-tag4-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-tag4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hfont-tag4-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.hfont-tag4-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hfont-tag4-bad-text {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hfont-tag4-good-text {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* ★アクセントをつけた装飾 */
.hfont-tag4-accent {
  font-size: 1.2em; /* 1.2倍程度に抑える */
  font-weight: bold;
  color: #dc3545;
}

.hfont-tag4-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #dc3545;
}
.hfont-tag4-hl-green { color: #98c379; font-weight: bold; }
.hfont-tag4-hl-blue { color: #61afef; font-weight: bold; }
.hfont-tag4-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

スマホ対応：文字サイズの自動調整と可変設定

Web制作において、PCの画面からスマートフォンの画面まで、どの端末で見ても読みやすい文字サイズを維持することは必須の課題です。

かつては「PCの時は24px、スマホの時は18px」とCSSのメディアクエリで切り替える手法が主流でしたが、現在では画面の幅に合わせて文字サイズをシームレスに自動で変える手法がスタンダードになっています。

スマホ対応：文字サイズの自動調整と可変設定
  • 画面幅に合わせて文字サイズを自動で変える方法

画面幅に合わせて文字サイズを自動で変える方法

画面幅に連動して文字の大きさを変えるために使用するCSSの単位がvw（ビューポート幅）です。

1vwは「画面幅の1%」を意味します。

文字サイズを可変にする場合、vwを単独で使ってはいけません。

CSSのclamp()（クランプ）関数を使用します。

clamp(最小サイズ, 可変サイズ, 最大サイズ)と記述することで、「基本は画面幅（vw）に合わせて伸縮させるが、○pxよりは小さくならず、○pxよりは大きくならない」といった形を実務で利用します。

下記のデモで確認すると、画面幅小さくなっても一定の文字サイズを保ち、逆に画面幅が広がっても一定の文字サイズから大きくならないように文字サイズの幅を持たせられます。

現在の疑似画面（コンテナ）幅: 450px
❌ 悪い例（vw単独の罠：際限なく伸縮）

悪い例：文字サイズが果てしなく変化します。

⭕️ 良い例（clamp関数：安全に自動調整）

良い例：一定のサイズ以上は崩れません。

/* ❌ 悪い例：限界がないため暴走する */
font-size: 4vw;
/* ⭕️ 良い例：clamp(最小値, 推奨値, 最大値) */
font-size: clamp(
  14px, /* 最小: 14pxより小さくならない */
  4vw, /* 推奨: 基本は画面幅の4%で可変 */
  24px /* 最大: 24pxより大きくならない */
);

※デモ上は疑似的にコンテナ幅（cqw）で再現していますが、実務のコードは上記のように画面幅（vw）で書きます。

HTMLコード表示
<div class="hfont-resp1-wrapper">
  
  <div class="hfont-resp1-demo-area">
    
    <div class="hfont-resp1-control">
      <label for="hfont-resp1-slider" style="font-weight:bold; color:#0d6efd; display:block; margin-bottom:10px;">
        ↔️ 下の丸いツマミを左右に動かして「画面幅」を変えてみてください
      </label>
      <input type="range" id="hfont-resp1-slider" min="200" max="800" value="450" style="width: 100%; max-width: 400px; cursor: pointer;">
      <div id="hfont-resp1-width-disp" style="font-size:12px; color:#666; margin-top:5px;">
        現在の疑似画面（コンテナ）幅: 450px
      </div>
    </div>

    <div id="hfont-resp1-container" class="hfont-resp1-container">
      
      <div class="hfont-resp1-box">
        <div class="hfont-resp1-label" style="color:#dc3545;">❌ 悪い例（vw単独の罠：際限なく伸縮）</div>
        <div class="hfont-resp1-visual" style="border-color: #f5c2c7; background-color: #fff;">
          <p class="hfont-resp1-bad-text">悪い例：文字サイズが果てしなく変化します。</p>
        </div>
      </div>

      <div class="hfont-resp1-box">
        <div class="hfont-resp1-label" style="color:#198754;">⭕️ 良い例（clamp関数：安全に自動調整）</div>
        <div class="hfont-resp1-visual" style="border-color: #badbcc; background-color: #fff;">
          <p class="hfont-resp1-good-text">良い例：一定のサイズ以上は崩れません。</p>
        </div>
      </div>

    </div>

    <div class="hfont-resp1-code-wrap">
      <div class="hfont-resp1-code hfont-resp1-code-bad">
        /* ❌ 悪い例：限界がないため暴走する */<br>
        <span class="hfont-resp1-hl-red">font-size: 4vw;</span>
      </div>
      <div class="hfont-resp1-code hfont-resp1-code-good" style="margin-top: 10px;">
        /* ⭕️ 良い例：clamp(最小値, 推奨値, 最大値) */<br>
        <span class="hfont-resp1-hl-green">font-size: clamp(</span><br>
          <span class="hfont-resp1-hl-blue">14px</span>,  /* 最小: 14pxより小さくならない */<br>
          <span class="hfont-resp1-hl-blue">4vw</span>,   /* 推奨: 基本は画面幅の4%で可変 */<br>
          <span class="hfont-resp1-hl-blue">24px</span>   /* 最大: 24pxより大きくならない */<br>
        <span class="hfont-resp1-hl-green">);</span>
      </div>
      <p class="hfont-resp1-note">※デモ上は疑似的にコンテナ幅（cqw）で再現していますが、実務のコードは上記のように画面幅（vw）で書きます。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-resp1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-resp1-demo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* スライダーのコントロールエリア */
.hfont-resp1-control {
  background-color: #e7f1ff;
  border: 2px solid #b6d4fe;
  border-radius: 8px;
  padding: 15px 20px;
  text-align: center;
  margin-bottom: 30px;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

/* ここを基準にサイズが変わる */
.hfont-resp1-container {
  width: 450px; /* JSでここが可変する */
  max-width: 100%; /* 記事幅をはみ出さない安全設計 */
  container-type: inline-size; /* コンテナクエリを有効化 */
  margin-bottom: 30px;
  border-left: 4px dashed #adb5bd;
  border-right: 4px dashed #adb5bd;
  padding: 0 10px;
  box-sizing: border-box;
  transition: width 0.1s;
}

.hfont-resp1-box {
  margin-bottom: 20px;
}
.hfont-resp1-box:last-child {
  margin-bottom: 0;
}
.hfont-resp1-label { font-size: 14px; font-weight: bold; margin-bottom: 10px; }

.hfont-resp1-visual {
  padding: 15px;
  border-radius: 4px;
  border: 2px solid;
  overflow: hidden;
  white-space: nowrap;
}

/* ❌ 悪い例：限界なく伸縮する（デモ用にcqwを使用） */
.hfont-resp1-bad-text {
  font-size: 4cqw; /* コンテナ幅の4% */
  font-weight: bold;
  color: #dc3545;
  margin: 0;
  line-height: 1.4;
}

/* ⭕️ 良い例：clamp関数による安全な伸縮（デモ用にcqwを使用） */
.hfont-resp1-good-text {
  /* 最小14px、推奨4cqw、最大24px */
  font-size: clamp(14px, 4cqw, 24px); 
  font-weight: bold;
  color: #198754;
  margin: 0;
  line-height: 1.4;
}

.hfont-resp1-code-wrap {
  width: 100%;
  max-width: 500px;
}
.hfont-resp1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hfont-resp1-code-bad { border-left: 4px solid #dc3545; }
.hfont-resp1-code-good { border-left: 4px solid #198754; }
.hfont-resp1-hl-red { color: #e06c75; font-weight: bold; }
.hfont-resp1-hl-green { color: #98c379; font-weight: bold; }
.hfont-resp1-hl-blue { color: #61afef; font-weight: bold; }
.hfont-resp1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }
JavaScriptコード表示
// スライダーとコンテナ幅を連動させるJavaScript
document.addEventListener('DOMContentLoaded', function() {
  const slider = document.getElementById('hfont-resp1-slider');
  const container = document.getElementById('hfont-resp1-container');
  const disp = document.getElementById('hfont-resp1-width-disp');

  if(slider && container && disp) {
    slider.addEventListener('input', function() {
      // スライダーの値をコンテナのwidthに適用
      container.style.width = this.value + 'px';
      disp.textContent = '現在の疑似画面（コンテナ）幅: ' + this.value + 'px';
    });
  }
});

フォントサイズが変わらない・効かない時の解決策

「CSSでfont-sizeを書いたはずなのに、画面を更新しても文字の大きさが変わらない…」といった実務経験者であっても時折発生するトラブルです。

文字サイズが効かない原因は、コードの書き間違い以外にもいくつか決まったパターンが存在します。

ここでは、「CSSの優先順位とキャッシュ」の問題、「デベロッパーツールの活用法」について解説します。

フォントサイズが変わらない・効かない時の解決策
  • CSSの優先順位（キャッシュや継承）の確認
  • デベロッパーツールを使った原因の特定方法

CSSの優先順位（キャッシュや継承）の確認

CSSを正しく書いたはずなのに反映されない場合、「ブラウザのキャッシュ」を疑いましょう。

ブラウザは表示速度を上げるために古いCSSを記憶していることがあります。

WindowsならCtrl + F5、MacならCommand + Shift + Rを押して「スーパーリロード（強力な再読み込み）」を行ってください。

それでも直らない場合、原因の9割は「CSSの優先順位（詳細度）」で負けていることです。

初心者が「クラス名でサイズを指定しても効かない。」といった際、力技でfont-size: 24px !important;と書いて無理やり反映させることがあります。

しかし、実務において!importantの多用はNGです。

これをやってしまうと、後から「スマホの時だけ少し小さくしたい」といった上書きが一切できなくなり、保守性が崩壊します。

CSSには「タグ指定よりクラス指定が強い」「クラス指定よりID指定が圧倒的に強い」という厳格な点数ルールがあります。（例：#id>.class>p）

効かない時は!importantに逃げるのではなく、「自分が書いたCSSより強い指定がどこかに書かれていないか？」を探して、同等以上の点数で上書きするのが正しい対処法です。

❌ 悪い例（優先順位で負けている）

大きくしたい文字（効かない）

<!– id=”box” の中に class=”large” がある –>

/* どこかでIDに対して指定されている（強い） */
#box p { font-size: 14px; }

/* クラス単体で上書きしようとしても負ける */
.large { font-size: 24px; } /* ⚠️無視される */
⭕️ 良い例（詳細度を上げて勝つ）

大きくしたい文字（効いた！）

<!– id=”box” の中に class=”large” がある –>

/* どこかでIDに対して指定されている（強い） */
#box p { font-size: 14px; }

/* ★親のIDも書き加えて、相手より強い指定にする */
#box .large { font-size: 24px; } /* ✨勝つ！ */

※実務では、相手のCSSがどれくらい強いのかを見極め、最小限の強さ（タグやクラスの追加）で上書きするのがコツです。

HTMLコード表示
<div class="hfont-trouble1-wrapper">
  
  <div class="hfont-trouble1-demo-area">
    
    <div class="hfont-trouble1-box">
      <div class="hfont-trouble1-label" style="color:#dc3545;">❌ 悪い例（優先順位で負けている）</div>
      
      <div class="hfont-trouble1-visual" id="hfont-trouble1-bad-box">
        <p class="hfont-trouble1-large-bad">大きくしたい文字（効かない）</p>
      </div>

      <div class="hfont-trouble1-code hfont-trouble1-code-bad">
        <!-- id="box" の中に class="large" がある --><br><br>
        /* どこかでIDに対して指定されている（強い） */<br>
        <span class="hfont-trouble1-hl-red">#box p</span> { font-size: 14px; }<br><br>
        /* クラス単体で上書きしようとしても負ける */<br>
        <span class="hfont-trouble1-hl-blue">.large</span> { font-size: 24px; } /* ⚠️無視される */
      </div>
    </div>

    <div class="hfont-trouble1-box">
      <div class="hfont-trouble1-label" style="color:#198754;">⭕️ 良い例（詳細度を上げて勝つ）</div>
      
      <div class="hfont-trouble1-visual" id="hfont-trouble1-good-box">
        <p class="hfont-trouble1-large-good">大きくしたい文字（効いた！）</p>
      </div>

      <div class="hfont-trouble1-code hfont-trouble1-code-good">
        <!-- id="box" の中に class="large" がある --><br><br>
        /* どこかでIDに対して指定されている（強い） */<br>
        <span class="hfont-trouble1-hl-red">#box p</span> { font-size: 14px; }<br><br>
        /* ★親のIDも書き加えて、相手より強い指定にする */<br>
        <span class="hfont-trouble1-hl-green">#box .large</span> { font-size: 24px; } /* ✨勝つ！ */
      </div>
      <p class="hfont-trouble1-note" style="color:#198754;">※実務では、相手のCSSがどれくらい強いのかを見極め、最小限の強さ（タグやクラスの追加）で上書きするのがコツです。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-trouble1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-trouble1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hfont-trouble1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hfont-trouble1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hfont-trouble1-visual {
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例のシミュレート */
#hfont-trouble1-bad-box p {
  font-size: 14px; /* ここが強くて勝ってしまう */
  color: #666;
  margin: 0;
}
.hfont-trouble1-large-bad {
  font-size: 24px; /* クラスだけなので負けて取り消される */
}

/* ⭕️ 良い例のシミュレート */
#hfont-trouble1-good-box p {
  font-size: 14px;
  color: #666;
  margin: 0;
}
#hfont-trouble1-good-box .hfont-trouble1-large-good {
  font-size: 24px; /* 親IDを含めたので勝つ！ */
  font-weight: bold;
  color: #198754;
}

.hfont-trouble1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hfont-trouble1-code-bad { border-left: 4px solid #dc3545; }
.hfont-trouble1-code-good { border-left: 4px solid #198754; }
.hfont-trouble1-hl-red { color: #e06c75; font-weight: bold; }
.hfont-trouble1-hl-green { color: #98c379; font-weight: bold; }
.hfont-trouble1-hl-blue { color: #61afef; font-weight: bold; }
.hfont-trouble1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

CSSの優先順位（詳細度）を詳しく知りたい人は「CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述」を一読ください。

CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述

デベロッパーツールを使った原因の特定方法

「どのCSSが優先順位で勝っているのか分からない」という時、エディタ（VS Codeなど）の画面を何時間睨みつけても解決しません。

エンジニアは、CSSが効かない時は1秒で「デベロッパーツール（検証ツール）」を開きます。

Chromeなどのブラウザで、サイズが変わらない文字の上で「右クリック」→「検証（または要素を調査）」を押します。

画面の横や下に現れる「Styles（スタイル）」タブを見ると、その文字に対して現在適用されているすべてのCSSが優先順位順に表示されます。

優先順位で負けたCSSやスペルミスのあるCSSは「取り消し線（横線）」が引かれています。

「何が原因で取り消し線が引かれているのか？」をツール上で特定してから、実際のコードを修正するのがよいです。

🔍 デベロッパーツール（検証）の見方イメージ

右クリック ＞「検証」を押したときに出るパネルのイメージです。

Styles
#main-content p.text-wrap {
font-size: 14px;
}
style.css:125
.large {
font-size: 24px; ←負けている！
}
custom.css:10
💡 デベロッパーツールでの解決手順：
1. 取り消し線（—）が引かれている自分のCSSを見つける。
2. その上にある「取り消し線がないCSS」のセレクタ（#main-content p.text-wrap など）を確認する。
3. 自分のエディタに戻り、確認したセレクタよりも強くなるようにCSSを書き直す。
HTMLコード表示
<div class="hfont-trouble2-wrapper">
  
  <div class="hfont-trouble2-demo-area">
    
    <div class="hfont-trouble2-box">
      <div class="hfont-trouble2-label">🔍 デベロッパーツール（検証）の見方イメージ</div>
      
      <p style="font-size:12px; color:#666; margin-bottom:10px;">右クリック ＞「検証」を押したときに出るパネルのイメージです。</p>
      
      <div class="hfont-trouble2-devtools">
        <div class="hfont-trouble2-dt-header">
          Styles
        </div>
        <div class="hfont-trouble2-dt-body">
          
          <div class="hfont-trouble2-dt-rule">
            <div class="hfont-trouble2-dt-selector">
              #main-content p.text-wrap <span>{</span>
            </div>
            <div class="hfont-trouble2-dt-property">
              <span class="hfont-trouble2-dt-key">font-size</span>: 
              <span class="hfont-trouble2-dt-value">14px</span>;
            </div>
            <div class="hfont-trouble2-dt-selector"><span>}</span></div>
            <div class="hfont-trouble2-dt-source">style.css:125</div>
          </div>

          <div class="hfont-trouble2-dt-rule hfont-trouble2-dt-loser">
            <div class="hfont-trouble2-dt-selector">
              .large <span>{</span>
            </div>
            <div class="hfont-trouble2-dt-property">
              <span class="hfont-trouble2-dt-strike">
                <span class="hfont-trouble2-dt-key">font-size</span>: 
                <span class="hfont-trouble2-dt-value">24px</span>;
              </span>
              <span style="margin-left: 10px; font-size: 11px; color: #dc3545; background: #f8d7da; padding: 2px 4px; border-radius: 2px; text-decoration: none !important;">←負けている！</span>
            </div>
            <div class="hfont-trouble2-dt-selector"><span>}</span></div>
            <div class="hfont-trouble2-dt-source">custom.css:10</div>
          </div>

        </div>
      </div>

      <div class="hfont-trouble2-code">
        💡 <b>デベロッパーツールでの解決手順：</b><br>
        1. 取り消し線（---）が引かれている自分のCSSを見つける。<br>
        2. その上にある「取り消し線がないCSS」のセレクタ（#main-content p.text-wrap など）を確認する。<br>
        3. 自分のエディタに戻り、確認したセレクタよりも強くなるようにCSSを書き直す。
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hfont-trouble2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-trouble2-demo-area {
  display: flex;
  justify-content: center;
}
.hfont-trouble2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.hfont-trouble2-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #0d6efd; }

/* デベロッパーツールの疑似UI */
.hfont-trouble2-devtools {
  background-color: #242424;
  border: 1px solid #555;
  border-radius: 4px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  color: #e8e8e8;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.hfont-trouble2-dt-header {
  background-color: #333;
  padding: 5px 10px;
  border-bottom: 1px solid #555;
  font-weight: bold;
  color: #ccc;
}
.hfont-trouble2-dt-body {
  padding: 10px;
}
.hfont-trouble2-dt-rule {
  margin-bottom: 15px;
  position: relative;
}
.hfont-trouble2-dt-rule:last-child { margin-bottom: 0; }
.hfont-trouble2-dt-source {
  position: absolute;
  top: 0;
  right: 0;
  color: #888;
  text-decoration: underline;
  cursor: pointer;
}

.hfont-trouble2-dt-selector { color: #5db0d7; } /* セレクタの色 */
.hfont-trouble2-dt-selector span { color: #ccc; } /* カッコの色 */
.hfont-trouble2-dt-property { padding-left: 15px; }
.hfont-trouble2-dt-key { color: #9cdcfe; } /* プロパティ名 */
.hfont-trouble2-dt-value { color: #ce9178; } /* 値 */

/* 負けているCSSのスタイル */
.hfont-trouble2-dt-loser { opacity: 0.8; }
.hfont-trouble2-dt-strike {
  text-decoration: line-through; /* ★取り消し線 */
  color: #888;
}
.hfont-trouble2-dt-strike .hfont-trouble2-dt-key,
.hfont-trouble2-dt-strike .hfont-trouble2-dt-value {
  color: #888; /* グレーアウト */
}

.hfont-trouble2-code {
  background-color: #fff3cd;
  color: #856404;
  padding: 15px;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border: 1px solid #ffeeba;
}

WordPressでの文字サイズ変更とHTML・CSSの活用

WordPress（ワードプレス）を使ってブログや企業サイトを運営していると「ここの文字だけ少し大きくしたい」という場面に遭遇します。

WordPressはブロックエディタ（Gutenberg）が優秀なため、画面右側のメニューからポチポチと設定するだけで文字サイズを変えられます。

しかし、実務レベルのサイト運営をしていく上では、裏側で動いているHTMLとCSSの仕組みを理解しておくことが重要です。

ここでは、エディタの便利機能に潜む危険とメンテナンス性の高いカスタマイズ手法について解説します。

WordPressでの文字サイズ変更とHTML・CSSの活用
  • エディタの機能と追加CSSによるカスタマイズ

エディタの機能と追加CSSによるカスタマイズ

ブロックエディタの右側パネルにある「タイポグラフィ（文字サイズ）」の設定は、直感的に操作できて便利です。

しかし、便利さゆえに初心者が陥る危険が存在します。

初心者が「この記事の目立たせたい部分」に毎回エディタのメニューから「特大（36px）」などを指定したとします。

これを行うと、WordPressの裏側では対象のHTMLタグに対して専用のクラスや、場合によってはインラインスタイル（直接のCSS書き込み）が強制的に付与されます。

数ヶ月後、「やっぱりスマホだと特大文字が大きすぎるから、全部少し小さくしたい」と思った時、過去に書いた100記事を全て1つずつ開き、ブロックの設定を手作業で変更して回るという地獄の作業が発生します。

実務において、複数回使う可能性のある文字の装飾やサイズ変更は、エディタの「文字サイズ変更機能」を使いません。

代わりに、対象のブロックを選択して右側メニューの一番下にある「高度な設定」＞「追加CSSクラス」に自分で決めた名前（例：custom-large-text）を入力します。

そして、WordPressの「外観」＞「カスタマイズ」＞「追加CSS」画面（または子テーマの style.css）にCSSを記述して、一元管理するのがよいです。

❌ 悪い例（エディタメニューで個別指定）

キャンペーン実施中！

<!– ⚠️ WPの裏側で生成されるコードのイメージ –>
<p class=”has-large-font-size“>キャンペーン実施中！</p>

/* 1つ1つのブロックにサイズが固定されてしまい、
後から「やっぱり全部20pxにしたい」という一括変更ができない */
⭕️ 良い例（「追加CSSクラス」の活用）
⚙️ ブロック ＞ 高度な設定 追加CSSクラス

キャンペーン実施中！

<!– 💡 自分で決めたクラス名を付与する –>
<p class=”promo-text-large“>キャンペーン実施中！</p>

/* 💡 WPの「追加CSS」画面でルールを書く */
.promo-text-large {
  font-size: 1.5rem; /* 基準の1.5倍 */
  font-weight: bold;
}

※こうしておけば、後から追加CSSを 1.25rem に書き換えるだけで、過去100記事分のキャンペーン文字が一瞬で丁度いいサイズに変わります。

HTMLコード表示
<div class="hfont-wp1-wrapper">
  
  <div class="hfont-wp1-demo-area">
    
    <div class="hfont-wp1-box">
      <div class="hfont-wp1-label" style="color:#dc3545;">❌ 悪い例（エディタメニューで個別指定）</div>
      
      <div class="hfont-wp1-visual">
        <p style="font-size: 24px; font-weight: bold; margin: 0; color: #333;">キャンペーン実施中！</p>
      </div>

      <div class="hfont-wp1-code hfont-wp1-code-bad">
        <!-- ⚠️ WPの裏側で生成されるコードのイメージ --><br>
        <p class="<span class="hfont-wp1-hl-red">has-large-font-size</span>">キャンペーン実施中！</p><br><br>
        /* 1つ1つのブロックにサイズが固定されてしまい、<br>
           後から「やっぱり全部20pxにしたい」という一括変更ができない */
      </div>
    </div>

    <div class="hfont-wp1-box">
      <div class="hfont-wp1-label" style="color:#198754;">⭕️ 良い例（「追加CSSクラス」の活用）</div>
      
      <div class="hfont-wp1-visual">
        <div style="background-color: #f8f9fa; border: 1px solid #ced4da; padding: 10px; margin-bottom: 15px; font-size: 12px; color: #495057;">
          <b style="display:block; margin-bottom: 5px;">⚙️ ブロック ＞ 高度な設定</b>
          追加CSSクラス<br>
          <input type="text" value="promo-text-large" readonly style="width: 100%; padding: 4px; border: 1px solid #adb5bd; background: #fff; margin-top: 2px;">
        </div>
        
        <p class="hfont-wp1-good-promo">キャンペーン実施中！</p>
      </div>

      <div class="hfont-wp1-code hfont-wp1-code-good">
        <!-- 💡 自分で決めたクラス名を付与する --><br>
        <p class="<span class="hfont-wp1-hl-green">promo-text-large</span>">キャンペーン実施中！</p><br><br>
        /* 💡 WPの「追加CSS」画面でルールを書く */<br>
        <span class="hfont-wp1-hl-green">.promo-text-large</span> {<br>
          font-size: <span class="hfont-wp1-hl-blue">1.5rem</span>; /* 基準の1.5倍 */<br>
          font-weight: bold;<br>
        }
      </div>
      <p class="hfont-wp1-note" style="color:#198754;">※こうしておけば、後から追加CSSを <code>1.25rem</code> に書き換えるだけで、過去100記事分のキャンペーン文字が一瞬で丁度いいサイズに変わります。</p>
    </div>

  </div>
</div>
CSSコード表示
.hfont-wp1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hfont-wp1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hfont-wp1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.hfont-wp1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hfont-wp1-visual {
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* 良い例用のクラス */
.hfont-wp1-good-promo {
  font-size: 24px; /* 1.5rem相当 */
  font-weight: bold;
  color: #0d6efd; /* アクセントカラーもCSSで一括管理 */
  margin: 0;
  text-align: center;
  background-color: #e7f1ff;
  padding: 10px;
  border-radius: 4px;
}

.hfont-wp1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hfont-wp1-code-bad { border-left: 4px solid #dc3545; }
.hfont-wp1-code-good { border-left: 4px solid #198754; }
.hfont-wp1-hl-red { color: #e06c75; font-weight: bold; }
.hfont-wp1-hl-green { color: #98c379; font-weight: bold; }
.hfont-wp1-hl-blue { color: #61afef; font-weight: bold; }
.hfont-wp1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本の書き方
    <font>タグやstyle属性の直書きは非推奨。
    HTMLにクラス名をつけ、外部CSSで指定する。
  • デフォルトサイズ
    ブラウザの標準フォントサイズは基本的に「16px」であることを基準に設計する。
  • 単位「px」
    絶対値。
    ユーザーの端末設定を無視するため、本文の文字サイズ指定には極力使わない。
  • 単位「rem」
    ルート（html）基準の相対値。
    ユーザーの文字拡大設定に連動するため、実務のスタンダード単位。
  • 単位「em」
    親要素基準の相対値。
    フォントサイズに使うと入れ子で掛け算され暴走するため、余白設定などに使う。
  • 単位「%」
    フォントサイズには使わず、行間（line-height）や横幅（width）の指定に活用する。
  • タグのデフォルト
    見出し（h1〜h6）はブラウザ間の差異をなくすためCSSでサイズをリセット＆再設定する。
  • ボタンの罠
    <button>や<input>は本文のサイズを継承しないため、個別に明示的なサイズ指定が必要。
  • テーブルの調整
    <td>内の文字は、本文よりも1段階（14px相当などに）小さくすると見やすく収まる。
  • 可変サイズ（スマホ対応）
    vw単独ではなく、clamp(最小値, 推奨のvw値, 最大値)関数を使って安全に伸縮させる。
  • 効かない時の対処法
    デベロッパーツール（検証）を開き、他の強いCSS（ID指定など）に取り消し線で負けていないか確認する。
  • WordPressでの運用
    エディタの機能で個別指定せず、「追加CSSクラス」を付与して外部CSSで一元管理する。

よくある質問（FAQ）

HTMLタグだけでフォントサイズを変更するにはどうすればいいですか？

以前は<font size="5">といった専用のタグが使われていましたが、現在のHTML規格（HTML5）では非推奨（廃止）となっています。

HTMLファイル内で直接サイズを変えたい場合は、<p style="font-size: 20px;">のようにstyle属性を使用してインラインでCSSを記述します。

ただし、実務では保守性の観点から外部のCSSファイルで管理するのが基本です。

HTMLのデフォルト（標準）の文字サイズは何ピクセルですか？

Chrome、Safari、Edgeなど主要なブラウザにおいて、デフォルトのフォントサイズは「16px」に設定されています。

CSSで文字サイズを指定しなかった場合、本文（pタグやspanタグなど）は16pxを基準にして画面に表示されます。

文字サイズを指定する単位はどれを使えばいいですか？

Web制作におけるスタンダードな単位は「rem（レム）」です。

remはルート（大元のhtmlタグ）の文字サイズを基準にするため、ユーザーがスマホの設定で「文字を大きくする」といった変更を行った際、連動して正しく文字が拡大されます。

pxは絶対値でサイズを固定するため、アクセシビリティの観点から本文への使用は極力避けるのが主流です。

CSSでfont-sizeを指定しているのに文字の大きさが変わらないのはなぜですか？

最も多い原因は「CSSの優先順位（詳細度）」で負けていることです。

例えば、クラス名（.text）でサイズを指定しても、別の場所で親要素のID（#main）に対してサイズが指定されていると、点数の強いIDの指定が勝ちます。

デベロッパーツール（検証）を開き、自分の書いたCSSに取り消し線が引かれていないか確認してください。

また、単にブラウザのキャッシュが古いCSSを読み込んでいる場合もあるため、スーパーリロード（Ctrl+F5 または Cmd+Shift+R）を試してみましょう。

スマホやPCなど画面の幅に合わせて文字サイズを自動で変えるには？

CSSのclamp()関数とvw単位を組み合わせるのが効果的です。

font-size: clamp(16px, 4vw, 24px);のように指定することで、「基本は画面幅の4%（4vw）で滑らかに伸縮させるが、どれだけ画面が狭くても16px未満にはならず、どれだけ画面が広くても24pxよりは大きくならない」といったレスポンシブ対応が1行で実現できます。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次