デザインカンプでは「本文の字重」がひとつ決まっていることが多いのに対し、HTML ではタグごとにブラウザ既定の太さが付きます。body { font-weight: 500; } のようにベースだけ書いても、意図どおりに揃わないことがあるので、継承がどう効くかと UA(ユーザーエージェント)スタイルを押さえておくと、あとからの CSS が書きやすくなります。
font-weight は継承されるが「子に直接指定があれば」継承は使われない
font-weight は継承プロパティです。親が 500 なら、子も特に指定がなければ 500 を引き継ぎます。
一方で、h2 などには多くのブラウザで font-weight: bold(実質 700 相当) が UA としてその要素自身に当たっています。このとき子の font-weight は「親から継承」ではなく UA が付けた値が使われるため、body が 500 でも h2 は 500 にならない、という挙動になります。
body が 700 のときに「700 以外」になりやすい例
body { font-weight: 700; } でも、次のようなときは結果が 700 以外になりえます。
strong/b… UA はしばしばbolderで、親が 700 のとき さらに一段重い(800 や 900 など)に上がることがある- 途中の祖先が別の
font-weightを指定している … 継承は 直近の祖先からなので、bodyが 700 でも内側のラッパーが400ならその子は 400 側になる - 別のスタイルシートが要素に別の字重を指定している
- フォーム系(
input/buttonなど)やiframe内 … 環境や文書の切れ方で、ページのbodyと一致しないことがある
逆に、h1〜h6 や th の UA は多くが bold(700 相当)なので、body が 700 のときは 結果として 700 のままになりやすい、という対比もあります。
「* 単独」より「body *」で inherit を書く理由
body と同じ字重に揃えたい子孫に font-weight: inherit を当てる手法はよく使われますが、セレクタは * だけより body * の方が扱いやすいことが多いです。
- 詳細度 …
*の詳細度は 0。UA のh2 { font-weight: bold }は型セレクタ 1 つで詳細度が上がるため、作者の* { inherit }だけでは負けて効かないことがある。body *のように型セレクタを足すと、UA と並べやすくなり、作者スタイルが後から読み込まれていれば上書きしやすい。 - 適用範囲 …
bodyの子孫に限定でき、意図が「ページ本文ツリー」に寄る。
疑似要素まで揃えるなら、次のように書くことがあります。
body *,
body *::before,
body *::after {
font-weight: inherit;
}
これは **「ベースと同じ字重の箇所では、各所に font-weight を重ね書きしない」**ための下準備として有効です。コンパで字重が変わる見出し・ボタン・強調などは、従来どおり明示指定が必要です。
デザイン再現での位置づけ
この inherit は UA とのズレを減らすベースラインであり、タイポグラフィ全体の指定の代替ではありません。見出しレベルごとの字重や、strong の見え方は、コンポーネントやタイポのトークンとしてコンパに合わせて別途書く前提になります。
WordPress の the_content を例外に切る
the_content で出る HTML は、ブロックエディタ・クラシック・プラグインの影響で タグ構成が案件ごとに変わりやすいです。サイト全体で body * に inherit を敷いても、本文エリアだけ別のリセットや上書きが要るかは都度判断するのが安全です(グローバル方針と CMS 出力の境界を明示するイメージ)。
まとめ
| 論点 | 要点 |
|---|---|
body にだけベース字重 | UA が要素に直接太字を付けると、継承だけでは揃わない |
body * + inherit | UA を作者側で上書きしやすくし、ベースと同じ箇所の重複指定を減らす |
| コンパ再現 | ベースと違う字重は明示。inherit は万能ではない |
| WordPress | the_content は案件ごとに例外を検討 |
MDN の font-weight や、使用しているブラウザの開発者ツールで、当たっているルールの詳細度を確認すると判断がしやすくなります。