Q&A
Bootstrap側に質問はしてみましたか？
私個人は、今までなんとなく html か body に書いていたのですが、Bootstrapを見たら以下のようになっていました。
html { font-family: sans-serif; ... }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ... }
疑問
・なぜhtmlにfont-familyの内容を直接指定しないのか
・htmlとbodyの内容が違う理由
Normalizeに記載されているようでその名残？とも思ったのですが、調べてもよく分かりませんでした。
変更されたコミットはhttps://github.com/twbs/bootstrap/commit/4fa7749442ea7ab609d1c8c25dc4ba750194e542のようです。
不思議な書き方をしている理由等をご存知でしたらお教えください。
回答1件
0
ベストアンサー
Bootstrapはなぜhtmlとbody両方にfont-familyを記述しているのか？
質問文に書かれている二つの疑問点は上記の疑問から発生している気がするので、まずはこちらについて回答します。html 要素の font-family プロパティは、 normalize.css から Reboot へ移行するときに、一部のスタイルを normalize.css からそのまま移したために残っているに過ぎません。html 要素の子要素のうち、表示されている要素が body 要素のみだとすれば、これは明らかに無意味な記述です。そして、 html 要素の font-family プロパティは**冗長な記述として削除される予定です**。
・なぜhtmlにfont-familyの内容を直接指定しないのか
ブラウザの設定を調整することでデフォルトのルートフォントサイズを調整出来るように、 Bootstrap では html 要素のフォントサイズが指定されておらず、 body 要素に font-size: 1rem が指定されています。そのため、 html 要素へ font-family プロパティを指定するよりも、 font-* プロパティやグローバルなプロパティを body 要素へまとめてしまったほうが読みやすくなると思います。実際のところは分からないため推測になりますが、こういった背景から font-family プロパティも html 要素ではなく body 要素に指定されているのではないでしょうか。
・htmlとbodyの内容が違う理由
最初に書いたとおり、一方は normalize.css からそのまま移しただけの (実際には使われない) スタイルで、他方は実際に Bootstrap で使われているスタイルであるため、この二つの値で同期が取れていないほうが自然です。
参考:
投稿2019/11/20 14:07
総合スコア14731
度々ご回答ありがとうございます。
意味のある記述では無かったんですね。
`root` を気にしているから`body`に書く。って感じですかね。
> `root` を気にしているから`body`に書く。って感じですかね。
回答文に書いた理由はどうしても無理矢理っぽくなってしまいましたが、単純に `body` 要素がより適切な適用対象という判断をしたことも考えられますね。
- 非表示になっていることが前提とはいえ、その装飾を適用したい要素以外に装飾が適用され得る状態は好ましくない。
- 文書のコンテンツへ適用したい装飾であるため、文書の根ではなく、文書のコンテンツへ装飾を適用するほうが理にかなっている。
- HTML4.01 より前に使用されていたプレゼンテーション属性 (bgcolor, background, textなど) の適用対象が `body` 要素であったため、文書のコンテンツへの装飾は `body` 要素に行うほうが無難かもしれない。
あなたの回答
tips
プレビュー
