MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】太字にする方法まとめ：bタグ・strongタグ・CSSの使い分け

【HTML】太字にする方法まとめ：bタグ・strongタグ・CSSの使い分け

HTML&CSS
html-bold

Webサイトの文章を読みやすく強調する太字ですが、見た目の装飾、あるいは検索エンジンに伝える意味的な強調かによって実装方法は異なります。

本記事では、基本となるタグの使い分け、CSS（font-weight）での太さ調整、デザイン性を高める組み合わせ、太字にならない・解除できない時の解決策を解説します。

目次

文字を太字にする基本：タグとCSSの書き方

Webサイトの記事を読みやすくするために、「文字を太字にする」ことは効果的です。

ここでは、HTMLでテキストの文字を太くするためのアプローチについて解説します。

文字を太字にする基本
  • bタグとstrongタグの違いと使い分け
  • CSS（font-weight）で太字を指定する方法

bタグとstrongタグの違いと使い分け

HTMLで文字を太字にするタグには、主に<b>と<strong>の2種類が存在します。

画面上の見た目はどちらも同じ太字になるため、「どちらを使っても同じだろう」と混同しますが、HTMLの意味合いにおいて、この2つには明確な違いがあります。

よくやってしまうミスが、「ここも太字にしたい」「あそこも太字にしたい」とページの至る所に<strong>タグを使ってしまうことです。

<strong>タグは、検索エンジンや音声読み上げソフトに対して「ここは文章の中で極めて重要なキーワードです」と伝えるタグです。

これを多用しすぎると、本当に重要な箇所がぼやけてしまい、SEO（検索エンジン最適化）の観点でもスパム判定されるリスクがあります。

  • <b>タグ
    特別な意味を持たせず、見た目だけを太字にして目立たせたい場合に使います。
  • <strong>タグ
    ページ内で「ユーザーに伝えたい重要なキーワード・警告」にのみピンポイントで絞って使用します。
💡 bタグとstrongタグの違い

↓ 単なる見た目の強調（bタグ）

本日はお足元の悪い中、誠にありがとうございます。

↓ 論理的な重要性の強調（strongタグ）

パスワードは絶対に他人に教えないでください。
<!– 💡 bタグ：重要ではないが、視覚的に目立たせたい時 –>
本日はお足元の悪い中、<b>誠にありがとうございます。</b>

<!– 💡 strongタグ：文章の핵心や、強い警告を伝える時 –>
パスワードは<strong>絶対に教えないでください。</strong>

※見た目はどちらも太字になりますが、音声読み上げソフトで読んだ時などに「抑揚」がつくのはstrongタグの方です。

HTMLコード表示
<div class="hbold-tag1-wrapper">
  
  <div class="hbold-tag1-demo-area">
    
    <div class="hbold-tag1-box">
      <div class="hbold-tag1-label">💡 bタグとstrongタグの違い</div>
      
      <div class="hbold-tag1-visual">
        <p style="font-size:12px; color:#666; margin:0 0 5px 0;">↓ 単なる見た目の強調（bタグ）</p>
        <div class="hbold-tag1-text-box">
          本日はお足元の悪い中、<b style="color:#0d6efd;">誠にありがとうございます。</b>
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:15px 0 5px 0;">↓ 論理的な重要性の強調（strongタグ）</p>
        <div class="hbold-tag1-text-box">
          パスワードは<strong style="color:#dc3545;">絶対に他人に教えないでください。</strong>
        </div>
      </div>

      <div class="hbold-tag1-code">
        <!-- 💡 bタグ：重要ではないが、視覚的に目立たせたい時 --><br>
        本日はお足元の悪い中、<span class="hbold-tag1-hl-green"><b></span>誠にありがとうございます。<span class="hbold-tag1-hl-green"></b></span><br><br>
        <!-- 💡 strongタグ：文章の핵心や、強い警告を伝える時 --><br>
        パスワードは<span class="hbold-tag1-hl-red"><strong></span>絶対に教えないでください。<span class="hbold-tag1-hl-red"></strong></span>
      </div>
      <p class="hbold-tag1-note">※見た目はどちらも太字になりますが、音声読み上げソフトで読んだ時などに「抑揚」がつくのはstrongタグの方です。</p>
    </div>

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

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

.hbold-tag1-text-box {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.hbold-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;
}
.hbold-tag1-hl-green { color: #98c379; font-weight: bold; }
.hbold-tag1-hl-red { color: #e06c75; font-weight: bold; }
.hbold-tag1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

CSS（font-weight）で太字を指定する方法

「意味的な重要性はないけれど、デザインとして文字を太くしたい」という場合、Web制作ではHTMLタグを使わず、CSSを使ってコントロールするのが正しいアプローチです。

文字を太くする場合は、HTMLには<span class="fw-bold">などのクラス名を付け、外部のCSSファイルでfont-weight: bold;と記述して一元管理します。

また、実務では太い・細いだけでなく、使用しているWebフォントに合わせて、font-weight: 700;（太字）や font-weight: 900;（極太）のように数値で太さをコントロールする手法も使われます。

🎨 CSS（font-weight）による太さのコントロール
font-weight: normal;（または400）標準の太さです。
font-weight: bold;（または700）一般的な太字です。
font-weight: 900;（対応フォントのみ）極太の文字です。
<!– HTML：意味を持たないspanタグにクラスをつける –>
<span class=”text-bold“>デザインとして太くしたい文字</span>

/* CSS：スタイルシートで一括管理する */
.text-bold {
  font-weight: bold; /* 一般的な太字 */
}

.text-extra-bold {
  font-weight: 900; /* 数値でさらに太く指定(※) */
}

※数値指定（100〜900）は、読み込んでいるフォントファイルがその太さ（ウェイト）のデータを持っていないと反映されず、標準のboldと同じになります。

HTMLコード表示
<div class="hbold-css1-wrapper">
  
  <div class="hbold-css1-demo-area">
    
    <div class="hbold-css1-box">
      <div class="hbold-css1-label">🎨 CSS（font-weight）による太さのコントロール</div>
      
      <div class="hbold-css1-visual">
        <div class="hbold-css1-fw-normal">
          font-weight: normal;（または400）標準の太さです。
        </div>
        
        <div class="hbold-css1-fw-bold">
          font-weight: bold;（または700）一般的な太字です。
        </div>
        
        <div class="hbold-css1-fw-black">
          font-weight: 900;（対応フォントのみ）極太の文字です。
        </div>
      </div>

      <div class="hbold-css1-code">
        <!-- HTML：意味を持たないspanタグにクラスをつける --><br>
        <span class="<span class="hbold-css1-hl-green">text-bold</span>">デザインとして太くしたい文字</span><br><br>
        /* CSS：スタイルシートで一括管理する */<br>
        <span class="hbold-css1-hl-green">.text-bold</span> {<br>
          <span class="hbold-css1-hl-blue">font-weight: bold;</span> /* 一般的な太字 */<br>
        }<br><br>
        <span class="hbold-css1-hl-green">.text-extra-bold</span> {<br>
          <span class="hbold-css1-hl-blue">font-weight: 900;</span>  /* 数値でさらに太く指定(※) */<br>
        }
      </div>
      <p class="hbold-css1-note">※数値指定（100〜900）は、読み込んでいるフォントファイルがその太さ（ウェイト）のデータを持っていないと反映されず、標準のboldと同じになります。</p>
    </div>

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

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

.hbold-css1-fw-normal {
  font-size: 14px;
  color: #333;
  font-weight: normal; /* 標準 */
  background-color: #fff;
  padding: 10px;
  border-left: 4px solid #ced4da;
}
.hbold-css1-fw-bold {
  font-size: 14px;
  color: #333;
  font-weight: bold; /* 太字 */
  background-color: #fff;
  padding: 10px;
  border-left: 4px solid #0d6efd;
}
.hbold-css1-fw-black {
  font-size: 14px;
  color: #333;
  font-weight: 900; /* 極太（OSやフォントによる） */
  background-color: #fff;
  padding: 10px;
  border-left: 4px solid #dc3545;
}

.hbold-css1-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;
}
.hbold-css1-hl-green { color: #98c379; font-weight: bold; }
.hbold-css1-hl-blue { color: #61afef; font-weight: bold; }
.hbold-css1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

太字とデザインの組み合わせ（赤字・サイズ・下線）

Webサイトの文章を読みやすく魅力的に見せるには、文字を太くするだけでなく、色や線を組み合わせた複合的な装飾が効果的です。

Web制作において、太字と色を同時に指定するといった表現を実装する際は、HTMLタグに直接装飾を書き込むのではなく、CSSを用いて整えるのがよいです。

ここでは、実務で利用される具体的な装飾の組み合わせについて解説します。

太字とデザインの組み合わせ
  • 赤字と太字で重要な箇所を目立たせる
  • 文字サイズ変更や下線との併用

赤字と太字で重要な箇所を目立たせる

ユーザーに対して「ここだけは絶対に読んでほしい！」という注意喚起を行いたい場合、太字や赤字の組み合わせは有効な手段です。

文字を赤く太くしたい場合は、HTMLには<span class="text-danger-bold">のように意味を持たないクラスをつけ、CSSでcolorとfont-weightを同時に指定します。

この時、色は原色の赤ではなく、少しくすんだ落ち着いた赤色（例：#dc3545や#d63384）を選ぶのがよいです。

❌ 悪い例（原色・タグ直書き）

当サービスの初期費用は、今月末まで完全無料となります。

<!– ⚠️ 古いタグと原色の組み合わせ –>
<font color=”red”><b>今月末まで完全無料</b></font>
⭕️ 良い例（CSS・落ち着いた赤色）

当サービスの初期費用は、今月末まで完全無料となります。

<!– 💡 HTML：spanにクラスをつけるだけ –>
<span class=”text-danger”>今月末まで完全無料</span>

/* 💡 CSS：太字と色をまとめて指定 */
.text-danger {
  font-weight: bold;
  color: #dc3545; /* チカチカしない落ち着いた赤 */
}
HTMLコード表示
<div class="hbold-combo1-wrapper">
  
  <div class="hbold-combo1-demo-area">
    
    <div class="hbold-combo1-box">
      <div class="hbold-combo1-label" style="color:#dc3545;">❌ 悪い例（原色・タグ直書き）</div>
      
      <div class="hbold-combo1-visual">
        <p style="font-size: 14px; color: #333; margin: 0;">
          当サービスの初期費用は、<span style="color: red; font-weight: bold;">今月末まで完全無料</span>となります。
        </p>
      </div>

      <div class="hbold-combo1-code hbold-combo1-code-bad">
        <!-- ⚠️ 古いタグと原色の組み合わせ --><br>
        <span class="hbold-combo1-hl-red"><font color="red"><b></span>今月末まで完全無料<span class="hbold-combo1-hl-red"></b></font></span>
      </div>
    </div>

    <div class="hbold-combo1-box">
      <div class="hbold-combo1-label" style="color:#198754;">⭕️ 良い例（CSS・落ち着いた赤色）</div>
      
      <div class="hbold-combo1-visual">
        <p style="font-size: 14px; color: #333; margin: 0;">
          当サービスの初期費用は、<span class="hbold-combo1-text-danger">今月末まで完全無料</span>となります。
        </p>
      </div>

      <div class="hbold-combo1-code hbold-combo1-code-good">
        <!-- 💡 HTML：spanにクラスをつけるだけ --><br>
        <span <span class="hbold-combo1-hl-green">class="text-danger"</span>>今月末まで完全無料</span><br><br>
        /* 💡 CSS：太字と色をまとめて指定 */<br>
        <span class="hbold-combo1-hl-green">.text-danger</span> {<br>
          <span class="hbold-combo1-hl-blue">font-weight: bold;</span><br>
          <span class="hbold-combo1-hl-blue">color: #dc3545;</span> /* チカチカしない落ち着いた赤 */<br>
        }
      </div>
    </div>

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

.hbold-combo1-visual {
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #ced4da;
}

/* ⭕️ 良い例のCSSクラス */
.hbold-combo1-text-danger {
  font-weight: bold;
  color: #dc3545;
}

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

文字サイズ変更や下線との併用

文字サイズを組み合わせることで文章の階層を表現したり、下線を併用してキーワードをマーカーで引いたように際立たせることができます。

下線を使って文字を強調したい場合は、text-decoration: underline;を使うのではなく、background: linear-gradient;を使った「蛍光ペン風のマーカー」を引くのがトレンドです。

これならリンクと誤認されることもありません。

また、装飾を組み合わせる際は「太字とマーカー」や「太字とサイズを1.2倍」程度に留め、上品に目立たせることを意識しましょう。

🖍️ 太字＋下線（マーカー）の美しい組み合わせ

❌ 悪い例（リンクと間違いやすいuタグ）

この文章の重要なポイントを押してもリンク先には飛びません。

⭕️ 良い例（CSSによる蛍光ペン風マーカー）

この文章の重要なポイントはグラデーションで強調しています。

⭕️ 良い例（太字＋サイズアップ）

この文章の重要なポイントは少しだけ大きくしています。
/* ⭕️ 蛍光ペン風マーカー（下半分だけ色をつける） */
.text-marker {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #fff3cd 0%);
}

/* ⭕️ 太字＋サイズ変更（やりすぎない） */
.text-large-bold {
  font-weight: bold;
  font-size: 1.1em; /* 周りの文字の1.1倍に抑える */
}

※蛍光ペン装飾は、transparent 60% の数値を変更することで、線の太さ（マーカーの高さ）を自由自在に調整できます。

HTMLコード表示
<div class="hbold-combo2-wrapper">
  
  <div class="hbold-combo2-demo-area">
    
    <div class="hbold-combo2-box">
      <div class="hbold-combo2-label">🖍️ 太字＋下線（マーカー）の美しい組み合わせ</div>
      
      <div class="hbold-combo2-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（リンクと間違いやすいuタグ）</p>
        <div class="hbold-combo2-text-box">
          この文章の<u style="font-weight:bold; color:#0d6efd;">重要なポイント</u>を押してもリンク先には飛びません。
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 良い例（CSSによる蛍光ペン風マーカー）</p>
        <div class="hbold-combo2-text-box">
          この文章の<span class="hbold-combo2-marker">重要なポイント</span>はグラデーションで強調しています。
        </div>
        
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 良い例（太字＋サイズアップ）</p>
        <div class="hbold-combo2-text-box">
          この文章の<span class="hbold-combo2-large-bold">重要なポイント</span>は少しだけ大きくしています。
        </div>
      </div>

      <div class="hbold-combo2-code">
        /* ⭕️ 蛍光ペン風マーカー（下半分だけ色をつける） */<br>
        <span class="hbold-combo2-hl-green">.text-marker</span> {<br>
          font-weight: bold;<br>
          <span class="hbold-combo2-hl-blue">background: linear-gradient(transparent 60%, #fff3cd 0%);</span><br>
        }<br><br>
        /* ⭕️ 太字＋サイズ変更（やりすぎない） */<br>
        <span class="hbold-combo2-hl-green">.text-large-bold</span> {<br>
          font-weight: bold;<br>
          <span class="hbold-combo2-hl-blue">font-size: 1.1em;</span> /* 周りの文字の1.1倍に抑える */<br>
        }
      </div>
      <p class="hbold-combo2-note">※蛍光ペン装飾は、<code>transparent 60%</code> の数値を変更することで、線の太さ（マーカーの高さ）を自由自在に調整できます。</p>
    </div>

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

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

.hbold-combo2-text-box {
  font-size: 15px;
  color: #333;
  line-height: 1.8; /* マーカーやサイズ変更がある場合は行間を広めにとる */
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* ★蛍光ペン風マーカーの実装 */
.hbold-combo2-marker {
  font-weight: bold;
  color: #333;
  /* 上から60%は透明、残りの下部分を黄色(#fff3cd)で塗りつぶす */
  background: linear-gradient(transparent 60%, #fff3cd 0%);
}

/* 太字＋サイズアップの実装 */
.hbold-combo2-large-bold {
  font-weight: bold;
  font-size: 1.1em; /* 周りの1.1倍 */
  color: #0d6efd; /* 少し色をつけて目立たせる */
}

.hbold-combo2-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;
}
.hbold-combo2-hl-green { color: #98c379; font-weight: bold; }
.hbold-combo2-hl-blue { color: #61afef; font-weight: bold; }
.hbold-combo2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

フォントサイズ（文字）の変更方法を詳しく知りたい人は「【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整」を一読ください。

また、文字装飾における下線に関して詳しく知りたい人は「【HTML】下線を引く・消す方法：テキスト・リンク・テーブルにおけるCSS装飾」を一読ください。

【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整
【HTML】下線を引く・消す方法：テキスト・リンク・テーブルにおけるCSS装飾

太字にならない・解除・なってしまう

「CSSで太字を指定したのに画面を見たら太くならない」 「何もしていないのになぜかこの部分だけ太字になってしまう」 「一度太字になった文字を元の細さに解除したい」といった悩みがあると思います。

ここでは、文字の太さが思い通りにならない時の原因と解除方法について解説します。

太字にならない・解除・なってしまう
  • CSSの優先順位やフォントファミリーを確認する
  • 親要素の継承による「太字になってしまう」の解除方法

CSSの優先順位やフォントファミリーを確認する

文字が太くならない場合、原因は「CSSの優先順位負け」か「フォントファイルのデータ不足」のどちらかに絞られます。

「CSSの優先順位負け」も多いですが、太字特有のミスが「Webフォントのデータ不足」です。

Google Fontsなどで「Noto Sans JP」などのフォントをサイトに導入する際、データ容量を軽くしようとして「Regular（400）」の太さだけを読み込む設定にすることがあります。

この状態のままCSSでfont-weight: bold;（または700）と指定しても、太字用のフォントデータが存在しないため、文字は太くなりません。

※ブラウザが無理やり太く見せる「フェイクボールド」という現象が起き、文字が滲んで汚くなることもあります。

文字が太くならない時は、デベロッパーツール（検証）を開き、font-weight: bold;に取り消し線が引かれていないかを確認します。

取り消し線が引かれていないのに太くならない場合は、Google Fontsなどの読み込み設定を見直し、「Bold（700）」のデータがしっかりインポートされているかを確認してください。

❌ 悪い例（太くならない原因）

ここは普通の文字です。

太くしたいのに、太くならない文字

/* ⚠️ 裏側で強い指定（ID）が効いている */
#article p { font-weight: normal; }

/* ⚠️ クラス単体で太字にしようとしても負ける */
.text-strong { font-weight: bold; } /* 打ち消される */
⭕️ 良い例（優先順位を上げて解決）

ここは普通の文字です。

無事に太字になりました！

/* 💡 相手（ID）の強さを確認し、それに勝つ指定を書く */
#article p.text-strong {
  font-weight: bold; /* これで上書き成功！ */
}

親要素の継承による「太字になってしまう」の解除方法

逆に、「太字にした覚えはないのに、なぜか勝手に太字になってしまう」というトラブルもあります。

文字が勝手に太くなる原因は、「親要素の太字設定が、中の文字にまで引き継がれてしまっている（継承）」か、「太字になるのが標準仕様のタグ（<th>や<dt>など）を使っている」ことのどちらかです。

例えば、「注意喚起の赤い枠線で囲んだボックス全体」に対してfont-weight: bold;を指定すると、ボックスの中にある「注釈」などの細くしておきたい文字まで太字になります。

一度太字になった文字を元の細さに戻すための解決策は、戻したい要素に対してfont-weight: normal; （またはfont-weight: 400;）を明示的に指定することです。

これにより、親から引き継いだ太字設定やタグが持っている太字のデフォルト設定をリセット（解除）できます。

❌ 悪い例（中身が全部太字になってしまう）

【重要なお知らせ】

※この部分（注釈）は目立たせたくないので細い文字にしたいのに、親の設定に巻き込まれて勝手に太字になっています。

/* ⚠️ ボックス全体を太字に設定した状態 */
.alert-box {
  font-weight: bold;
}
/* ※中の注釈まで全部太字になってしまう！ */
⭕️ 良い例（normalを指定して太字を解除する）

【重要なお知らせ】

※この部分（注釈）だけ font-weight: normal; を指定して、太字を美しく解除しました。

/* 💡 ボックス全体は太字にする */
.alert-box { font-weight: bold; }

/* 💡 注釈部分だけ「normal」を指定して解除する */
.note-text {
  font-weight: normal; /* ★太字の解除 */
  font-size: 12px;
}

※テーブルの見出し（thタグ）などで「最初から太字になっている仕様」を解除したい場合も、全く同じように font-weight: normal; を使います。

HTMLコード表示
<div class="hbold-trouble2-wrapper">
  
  <div class="hbold-trouble2-demo-area">
    
    <div class="hbold-trouble2-box">
      <div class="hbold-trouble2-label" style="color:#dc3545;">❌ 悪い例（中身が全部太字になってしまう）</div>
      
      <div class="hbold-trouble2-bad-alert">
        <p style="margin: 0 0 10px 0;">【重要なお知らせ】</p>
        <p style="margin: 0; font-size: 12px; color: #666;">
          ※この部分（注釈）は目立たせたくないので細い文字にしたいのに、親の設定に巻き込まれて勝手に太字になっています。
        </p>
      </div>

      <div class="hbold-trouble2-code hbold-trouble2-code-bad">
        /* ⚠️ ボックス全体を太字に設定した状態 */<br>
        <span class="hbold-trouble2-hl-red">.alert-box</span> {<br>
          font-weight: bold;<br>
        }<br>
        /* ※中の注釈まで全部太字になってしまう！ */
      </div>
    </div>

    <div class="hbold-trouble2-box">
      <div class="hbold-trouble2-label" style="color:#198754;">⭕️ 良い例（normalを指定して太字を解除する）</div>
      
      <div class="hbold-trouble2-good-alert">
        <p style="margin: 0 0 10px 0;">【重要なお知らせ】</p>
        <p class="hbold-trouble2-good-note">
          ※この部分（注釈）だけ font-weight: normal; を指定して、太字を美しく解除しました。
        </p>
      </div>

      <div class="hbold-trouble2-code hbold-trouble2-code-good">
        /* 💡 ボックス全体は太字にする */<br>
        <span class="hbold-trouble2-hl-green">.alert-box</span> { font-weight: bold; }<br><br>
        /* 💡 注釈部分だけ「normal」を指定して解除する */<br>
        <span class="hbold-trouble2-hl-green">.note-text</span> {<br>
          <span class="hbold-trouble2-hl-blue">font-weight: normal;</span> /* ★太字の解除 */<br>
          font-size: 12px;<br>
        }
      </div>
      <p class="hbold-trouble2-note">※テーブルの見出し（thタグ）などで「最初から太字になっている仕様」を解除したい場合も、全く同じように <code>font-weight: normal;</code> を使います。</p>
    </div>

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

/* ❌ 悪い例のスタイル（全体が太字） */
.hbold-trouble2-bad-alert {
  padding: 15px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  margin-bottom: 15px;
  color: #856404;
  font-weight: bold; /* ★全体に太字を指定 */
}

/* ⭕️ 良い例のスタイル */
.hbold-trouble2-good-alert {
  padding: 15px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  margin-bottom: 15px;
  color: #856404;
  font-weight: bold; /* ★全体に太字を指定 */
}
.hbold-trouble2-good-note {
  margin: 0;
  font-size: 12px;
  color: #666;
  font-weight: normal; /* ★太字を解除！ */
  line-height: 1.5;
}

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

まとめ

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

本記事のまとめ
  • <b>タグと<strong>タグ
    視覚的な強調は<b>、意味的な重要性には<strong>を使い分ける。
  • CSSによる太字指定
    デザイン目的の太字はHTMLタグに頼らず、font-weight: bold;（または700等の数値）で指定する。
  • 太字と赤字の併用
    非推奨の<font>タグや原色の指定は避け、CSSで太字と落ち着いたカラーコードを一元管理する。
  • 下線（マーカー）装飾
    リンクと誤認されやすい<u>タグは使わず、linear-gradientを用いた背景グラデーションを利用する。
  • 太字にならない時の原因
    CSSの優先順位で負けているか、Webフォントの太字（Bold）データを読み込んでいない可能性が高い。
  • 太字の解除（リセット）方法
    親要素の継承やタグの初期スタイルによって勝手に太字になる場合は、対象にfont-weight: normal;を明示的に指定する。

よくある質問（FAQ）

<b>タグと<strong>タグはどう使い分ければいいですか？

見た目はどちらも同じ太字になりますが、裏側の「意味合い」が異なります。

<b>タグは単なる「見た目の強調（デザイン）」に使われます。

一方、<strong>タグは検索エンジンや音声読み上げソフトに対して「ここが文章の中で特に重要である」と伝える「強調」に使われます。

本当に重要なキーワードにのみ<strong>を使い、デザイン目的の太字にはタグではなくCSS（font-weight）を使うのが現在の基本です。

CSSを使って文字を太くするにはどう書きますか？

CSSのfont-weightプロパティを使用します。

一般的な太字にしたい場合はfont-weight: bold;（または数値で700）と指定します。

HTMLタグの中に直接書くのではなく、対象の要素にクラス名（例：<span class="text-bold">）を付け、外部のCSSファイルで管理するのがスタンダードな書き方です。

文章の一部だけを太字にしたい場合はどのタグを使いますか？

<span>タグを使用します。

初心者は <div>や<p>タグで囲いがちですが、これらはブロック要素と呼ばれ、前後で改行されて文章のレイアウトが崩れます。

<span>は「改行を伴わないタグ（インライン要素）」なので、文章の途中にあるキーワードだけを切り取って太字にするのに最適です。

CSSで太字（bold）を指定したのに太くならないのはなぜですか？

主な原因は2つあります。

1つ目は「CSSの優先順位負け」で、親要素のID指定など、強力なCSSによって自分の指定が上書きされているケースです。

2つ目は「Webフォントのデータ不足」です。

Google Fontsなどのフォントを導入している場合、太字用（Bold/700）のフォントデータを読み込む設定になっていないとCSSで指定しても太字として反映されません。

見出し（h2など）の太字を普通の細さに戻す（解除する）ことはできますか？

はい、可能です。

見出しタグ（h1〜h6）やテーブルのヘッダー（<th>）などは、ブラウザの標準仕様で最初から太字になるように設定されています。

これを解除して通常の細さに戻したい場合は、対象の要素に対してfont-weight: normal;（または数値で 400）を指定することで、デフォルトの太字設定をリセット（解除）できます。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

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

関連記事

目次