font 指定は html 要素に指定すべきか・body 要素に指定すべきか
font-family や font-size といったフォント指定は、html 要素に指定すべきか、body 要素に指定すべきか？
TL;DR : html 要素・body 要素、どちらに書いても別に変わんないから好きな方にしたらいい。
目次
参考にした文献
以下のような文献を読んでみたり、自分で色々と HTML・CSS を書いて検証してみたが、「html 要素に書いたから・body 要素に書いたから、こんな挙動の違いが出た」みたいなモノは見つけられなかった。 どっちにどう書こうが、結果は変わらなかった。
- CSS - Bootstrapはなぜhtmlとbody両方にfont-familyを記述しているのか？｜teratail
-
非表示になっていることが前提とはいえ、その装飾を適用したい要素以外に装飾が適用され得る状態は好ましくない
html要素自体のフォントを変えたいワケでないなら、body要素に書いた方が良い
-
- Reboot & Type cleanup by MartijnCuppens · Pull Request #28698 · twbs/bootstrap
- Normalize.css は
html要素に対しline-heightプロパティがあった - Bootstrap Reboot はフォント関連は全て
body要素に寄せる方針になったが、コレはhtml要素にてフォント情報を上書きした時に扱いやすくする意図がある
- Normalize.css は
- HTML vs Body in CSS | CSS-Tricks
fontやbackground系はhtml要素に書いた方が良いとしている
- css - Where to set font-family: body or html element? - Stack Overflow
body要素に指定した方が、html要素に指定した場合より詳細度が強く優先される
- 『CSSの実習(3) - 余白の指定』の発展学習 : 要素と要素へのスタイル附与
- CSS: * vs :root vs html vs body. What is the standard practice for setting defaults for font-size, font-family? - Stack Overflow
- ちなみに
html要素よりも:root要素の方が詳細度が強いので、より優先されるモノから順に書くと* ＜ body ＜ :root ＜ htmlとなるのが基本
- ちなみに
html 要素に書きたい派
html 要素に書きたい派の一部は、font-size: 62.5% などとして 10px 計算したがる、未だにピクセルパーフェクトでやろうとするダメダメデザイナータイプが多かった。だからこういうのは参考にしてはならない。
ただ、rem 単位は html 要素の状態から導かれるので、body 要素以降は相対的なサイズ指定のみにしておき、html 要素でルートサイズを指定する、という方法自体は覚えておくと良いのかもしれない。
html {
font-size: 20px; /* ココの数値を変えることで全体のフォントサイズを変更できる */
}
body {
font-size: 1rem; /* ベースは 20px となる */
}
h1 {
font-size: 2rem;
}
でもコレを以下のように書こうとするのは気に食わない。
html {
font-size: 62.5%; /* コレで 10px になったはず、だと？ */
}
body {
font-size: 1.6rem; /* コレで 16px になったはず、だと？ */
}
ブラウザのベースフォントサイズって変更可能なので、「62.5% にしたから 10px だー」って考えは浅はか。こういうことしようと思うことがそもそも間違ってるので、こういう文献はアテにしちゃあかん。
body 要素に書きたい派
Bootstrap Reboot は body 要素に寄せてあった。「rem 単位は html 要素に従う」といわれているものの、特にその違いを感じるような組み合わせは作れなかったので、body 要素にだけフォント指定を入れても全く問題ないようだ。
body 要素にフォント指定を書く理由はいくつか見られる。
- 前述のように、
body要素はfont-size: 1rem(未指定と同じ) にしておき、html要素側でルートサイズを変更しやすくしておくため、というライブラリ作成者的な目線 - 俺たちは「
html要素」や、それを継承する「head要素」のフォントサイズを大きくしたいワケじゃないだろ？適用させるつもりのない要素に対するセレクタを書くのは気持ち悪いのだ、という意見- 実際そんなことは起こらないものの、
head要素の中身がfont-size: 1.5remで画面に表示されても嫌だし、この理屈は分からんではない - ただコレは、
html要素にoverflowやmarginプロパティの指定が必要なケースがあることも考えると、微妙に腑に落ちないところもある感じ
- 実際そんなことは起こらないものの、
- 昔の HTML では、
body要素にbgcolorやtextといった属性を指定してフォント調整をしていた。basefont要素もbody要素の直後に配置したものだ。今までずっとフォント調整はbody要素で行うモノだったのだから、CSS でもその方が自然だろう- 理屈は分かる
適用対象からしても、歴史的経緯からしても、body 要素でフォント指定するのが自然に読めるよな、というのはよく分かる。
俺はどうするか
自分は以前からずっと html 要素に寄せて書いている。
html 要素と body 要素にそれぞれ background-color を指定すると、ページ内容が1画面内で収まっている時に、html 要素に指定した background-color が下部に登場するので、html 要素には overflow 指定や height 指定をすることが多い。
それに合わせて、フォントなどの指定も html 要素に寄せていて、body 要素の方はほとんど空っぽだったりする。
* は border-box 指定のみ、body は margin 削除のみ、:root は CSS 変数宣言のみ、そして html 要素はルートから全体の指定。ということで、継承や優先度には問題がないかなーと思っている。あちこちにスタイルが散らばらず html 要素にまとまるので見通しも良いかなーと思う。
最近は clamp() を使ってルートフォントサイズを可変させる手法をよく使うが、それも html 要素で指定している。
body 要素に書いた方が適用対象が正確じゃね？という指摘はよく分かるのだが、結局 html 要素にも色々書くことになることが多いので、だったら html 要素に寄せちゃお〜、という感じである。
