【完全保存版】CSSで文字を太字にする方法まとめ｜font-weightの使い方と注意点を初心者向けに解説

Webサイトを作っていると、
「ここは強調したい」「見出しを太くしたい」
という場面が必ず出てきます。

CSSで文字を太字にしたい
boldを書いたのに太くならない
数字指定（700など）の意味が分からない

この記事では、「css 太字」で検索した初心者の方に向けて、
CSSで文字を太字にする基本から、
よくあるトラブルの原因と解決方法までを 分かりやすく解説 します。

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

CSSで文字を太字にするとは、
文字の線を太く表示して強調することです。

CSSでは、主に font-weight プロパティを使って
文字の太さを指定します。

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

最も基本的な書き方はこちらです。

p {
  font-weight: bold;
}

これだけで、指定した要素の文字が太字になります。

font-weightで指定できる値

font-weightには、いくつかの指定方法があります。

キーワード指定（初心者向け）

p {
  font-weight: normal;
}

p {
  font-weight: bold;
}

主な値

normal：通常（400）
bold：太字（700）

初心者の方は、
まず normal / bold を覚えれば十分です。

数値で指定する方法（推奨）

p {
  font-weight: 700;
}

よく使われる数値

400：通常
500：やや太め
700：太字
900：かなり太い

数値指定の方が、
デザインの微調整がしやすい というメリットがあります。

boldと700の違いはある？

font-weight: bold;

font-weight: 700;

実質的には ほぼ同じ意味 です。
ただし、数値指定の方がフォントによっては
より細かく制御できます。

CSSで太字が効かない原因

フォントが対応していない

日本語フォントの中には、
太さのバリエーションが少ないものがあります。

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

この場合、
boldを指定しても太く見えないことがあります。

Webフォントで太さを読み込んでいない

font-weight: 700;

Webフォントを使っている場合、
その太さを読み込んでいないと反映されません。

他のCSSで上書きされている

p {
  font-weight: bold;
}

.article p {
  font-weight: normal;
}

後から書かれたCSSが優先されます。

HTMLのstrongタグとの違い

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

strongタグの役割

意味的な強調（重要であることを示す）
見た目は太字になることが多い

CSSとの使い分け

見た目だけ → CSS（font-weight）
意味も強調 → strongタグ

見出しを太字にするおすすめ設定

h1, h2, h3 {
  font-weight: 700;
}

見出しは、
太さでメリハリをつける と読みやすくなります。

太字にしすぎると起きる問題

全体がうるさく見える
強調の意味が薄れる
読みにくくなる

スマホ表示での注意点

スマホでは、
太字が強く見えすぎることがあります。

@media screen and (max-width: 768px) {
  body {
    font-weight: 400;
  }
}

画面サイズに応じた調整も重要です。

よくある質問

太字はSEOに影響しますか

直接的な影響はありませんが、
読みやすさ・理解しやすさ はユーザー評価に影響します。

boldが効かないときはどうすればいいですか

フォントを変更する
数値指定を試す
Webフォントの読み込みを確認する

この3点を確認してください。

まとめ

CSSで文字を太字にするには、
font-weight を正しく使うことが重要です。

太字指定は font-weight
bold と 700 はほぼ同じ
数値指定の方が調整しやすい
フォントによって効かない場合がある

「css 太字」で検索した方は、
まず font-weight: 700; を使ってみてください。
正しく使い分けることで、Webページの情報がぐっと伝わりやすくなります。

【完全保存版】CSSで文字を太字にする方法まとめ｜font-weightの使い方と注意点を初心者向けに解説