【完全保存版】CSSで文字を太字にする方法まとめ｜font-weightの基本・数値指定・boldが効かない原因を実務で解説

はじめに｜太字は一瞬で効く。でも「効かない日」もある

Webを作っていると、強調したい場面は毎回出ます。

• 見出しを少し太くして読みやすくしたい
• CTAボタンの文字だけ強くしたい
• 重要な文だけ目に入るようにしたい

ところが、bold を書いたのに「全然変わらない」こともあります。
私も昔、明朝系のフォントで太字にしたつもりが、PCでは変化が薄くて「え、効いてない？」って焦りました。
結論、効いていないわけじゃなくて“太くできない事情”がありました。

この記事では、太字の基本から「効かない」切り分け、DevToolsでの確認までまとめます。
「css 太字」「font-weight bold 効かない」で迷子になりにくい形にしました。

CSSで文字を太字にするとは

スニペット向けに一文でまとめます。

CSSで文字を太字にするとは、font-weightで文字の太さ（ウエイト）を指定して、見た目の強調を作ることです。

太字にすると、読みやすさや情報の優先度が出ます。
ただし、やりすぎると全部が強調になって逆効果です。そこも後半で触れます。

文字を太字にする基本はfont-weight

一番シンプルな形はこれです。

p {
  font-weight: bold;
}

これだけで対象が太字になります。

font-weightで指定できる値（キーワードと数値）

font-weightは大きく2種類の指定があります。

• キーワード（normal / bold など）
• 数値（100〜900）

キーワード指定（迷ったらこれ）

p {
  font-weight: normal;
}

p {
  font-weight: bold;
}

よく使う値

• normal：通常（だいたい 400）
• bold：太字（だいたい 700）

「とりあえず太くしたい」なら bold でOKです。

数値指定（実務で便利。微調整しやすい）

p {
  font-weight: 700;
}

よく見る数字の目安

• 400：通常
• 500：少しだけ太め（UIで便利）
• 600：見出しを“やりすぎず”太くしたい時に便利
• 700：しっかり太字
• 900：かなり太い（使いどころは選ぶ）

数値指定の良さは、「見出しは600、強調は700」みたいに段階を作れることです。
強調が整理されて、記事もUIも読みやすくなります。

boldと700の違いはある？（ほぼ同じ。でも例外もある）

font-weight: bold;

font-weight: 700;

多くのフォントでは、bold は 700 相当として扱われます。
なので体感はほぼ同じです。

ただ、Webフォントや可変フォント（Variable Fonts）だと、
「600がある」「650がある」みたいに刻めるケースもあり、数値指定が強くなります。

太字が効かない原因（ここからが本番）

「boldが効かない」は、だいたい次のどれかです。

• フォントに太字のデータがない（または少ない）
• Webフォントで太さ（ウエイト）を読み込んでいない
• 別のCSSに上書きされている
• 実は太くなってるけど差が小さい（明朝系で起きがち）

順番に潰していきます。

原因1：フォントが太字に対応していない（日本語で多い）

日本語フォントは、太さの種類が少ないものが混ざります。
そうなると、700 を指定しても「見た目がほぼ変わらない」ことがあります。

body {
  font-family: "Yu Mincho";
}

明朝系は特に「太字差が小さい」「端末で見え方が違う」が起きやすいです。
この場合は、フォントを変えるか、ウエイト以外の強調（サイズ・色・下線）も併用します。

原因2：Webフォントでその太さを読み込んでいない（超ある）

Webフォントは「読み込んだ太さ」しか使えません。
つまり 700 を指定しても、400 しか読み込んでなければ太くなりません。

たとえばGoogle Fontsの読み込みがこうだとします。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="stylesheet">

この状態でCSSにこう書いても…

strong {
  font-weight: 700;
}

700が存在しないので、結果的に400のまま（または擬似ボールド）になります。
解決は、読み込み側で700も指定することです。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

原因3：別のCSSで上書きされている（「効かない」の正体）

よくあるのがこれ。

p {
  font-weight: 700;
}

でも別の場所で…

.article p {
  font-weight: 400;
}

この場合、.article p の方が具体的なので勝ちます。
「太字が効かない」じゃなく「負けてる」パターンです。

原因4：擬似ボールドで“太くなった風”になっている

フォントに700がないと、ブラウザが擬似的に太く見せることがあります。
ただ、見た目が汚くなったり、端末で差が出たりします。

「太いのに微妙」「にじむ」って感じたら、
ウエイトを読み込むか、別フォントを選んだ方が早いです。

DevToolsで「本当に何の太さが当たってるか」を確認する（差別化ポイント）

迷ったらDevToolsです。確認が一番早い。

確認手順（Chrome）

1. 太字にしたい文字の上で右クリック → 検証
2. Elementsで対象要素を選ぶ
3. 右側の Styles で font-weight を探す
4. Computed で最終的な font-weight を確認する
5. font-weight に打ち消し線があれば、その指定は負けています

「700を指定してるのに400になってる」なら、
上書きか、読み込み不足か、要素指定ミスのどれかです。

strongタグとCSSの使い分け（見た目だけじゃない話）

strongは「意味の強調」

<strong>重要なテキスト</strong>

strongは、見た目以上に「ここが大事」という意味を持ちます。
ブラウザは太字で表示することが多いですが、目的は意味です。

CSSは「見た目の調整」

.emphasis {
  font-weight: 700;
}

ざっくり使い分け

• 文として重要 → strong
• デザイン上の強調 → CSS（font-weight）

両方使ってもOKですが、むやみにstrongだらけにしない方が読みやすいです。

見出しを太字にするおすすめ設定（太さを段階で作る）

全部700にすると、サイトがうるさくなりがちです。
段階を作ると読みやすくなります。

body {
  font-weight: 400;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 600;
}

strong {
  font-weight: 700;
}

「本文400、見出し600〜700、強調700」くらいが扱いやすいです。

太字にしすぎると起きる問題（地味にダメージ大）

• どこが大事かわからなくなる
• 視線が落ち着かない
• 長文が読みにくくなる

太字は「ここだけ見て！」のサインなので、
使いどころを絞る方が結果的に伝わります。

スマホ表示で太く見えすぎる時の対策

スマホは太く見えることがあります。
その場合は、太さを落とすより「サイズと行間」もセットで調整が効きます。

body {
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.75;
  }

  h2 {
    font-weight: 700;
  }

  h3 {
    font-weight: 600;
  }
}

太字をいじりすぎると崩れるので、まずは余白・行間から触るのが楽です。

チェックリスト｜boldが効かない時はこれで潰す

• font-weight: 700; を指定している要素は合っているか
• DevToolsで最終的に font-weight が何になっているか見たか
• Webフォントなら wght@400;700 など、必要な太さを読み込んでいるか
• 別のCSSに上書きされていないか（打ち消し線）
• 日本語フォントで太さの差が出にくいだけじゃないか

よくある質問

font-weight: 500; が効かないのはなぜ？

フォント側に500が存在しないと、近い太さに丸められることがあります。
Webフォントなら「500を読み込んでない」が原因のことも多いです。

b と strong の違いは？

• strong：意味として重要（推奨）
• b：見た目を太くするだけ（使うなら意図を明確に）

デザイン目的ならCSSで太さを指定した方が管理しやすいです。

まとめ｜font-weightは「指定」より「効かない時の見方」が大事

CSSで太字にする基本は font-weight です。

• 迷ったら bold または 700
• 見出しは 600〜700 で段階を作ると読みやすい
• 効かない時は「フォント未対応」「Webフォントの読み込み不足」「上書き」が多い
• DevToolsで最終的な font-weight を確認すると一気に解決する

「css 太字」で困っているなら、まずは
font-weight: 700; を書いて、DevToolsで“本当に700が当たってるか”を見てみてください。
原因がはっきりすると、修正はすぐ終わります。