オリジナルの記事：HTML vs Body in CSS
<html>と<body>の違いは見落とされがちです。小さなことのように思えます。認める必要がありますが、私はすべてのグローバルスタイルを<body>に適用するという悪い習慣があります。望ましくない効果がある場合、私は考えずに<html>に移動します。
しかし、実際には違いがあります。CSS のベテランでも初心者でも、それに気づくべきです。この記事では、それらについて議論し、意味のあるいくつかの実際の適用例を考慮します。
HTML と body の関係#
基本的な HTML ドキュメントの標準的な構造を考えてみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- メタデータなど -->
</head>
<body>
<!-- コンテンツの開始地点 -->
<body>
</html>
仕様では<html>をドキュメントのルート要素と定義しています。上記の例では明確にわかるように、<html>要素は他のすべての要素の最上位にあります。これ以上の階層はありません。
そこから、<head>と<body>は<html>内に直接配置される 2 つの要素です。実際、仕様では<body>と<head>を対比させて定義しています。これらは区別する必要がある唯一の 2 つの要素です。
したがって、要点は<html>がドキュメントのルート要素であり、<body>がその子要素であるということです。実際、CSS にはセレクタがあります。それらの目標は完全に同じです。
:root {
}
html {
}
注意：:rootはより高い特異性を持ちます：(0,0,1,0) vs (0,0,0,1)。
グローバルスタイルを常に<html>に配置すべきですか？#
ドキュメントのルート要素であるため、台全体に継承されるスタイルはすべて直接<html>に適用する必要があると思われるかもしれません。<html>は<body>の責任範囲を含んでいます。
しかし、実際にはそうではありません。実際、以下のコードのインライン属性は最初に仕様で<body>に割り当てられていました。
- background
- bgcolor
- marginbottom
- marginleft
- marginright
- margintop
- text
これらの属性は現在は非推奨とされていますが、それに対応する CSS プロパティを使用することが推奨されています：
| インライン属性 | CSS プロパティ |
|---|---|
| background | background |
| bgcolor | background / background-color |
| marginbottom | margin-bottom |
| margintop | margin-top |
| marginleft | margin-left |
| marginright | margin-right |
| text | font |
これらの CSS プロパティは、<body>に割り当てられたインライン属性から派生していることを考慮すると、それらは<html>要素ではなく<body>要素に直接適用するべきです。
グローバルスタイルを常に<body>に配置すべきですか？#
うーん、完全にそうではありません。特定の場合には、<html>にスタイルを適用する方が意味があるかもしれません。いくつかのシナリオを考えてみましょう。
rem 単位の使用#
rem 単位はドキュメントのルートに対して相対的です。たとえば、次のようなものを書くとき
.module {
width: 40rem;
}
rem 単位は<html>要素のフォントサイズに対して相対的であり、それはドキュメントのルートです。したがって、デフォルトのユーザー設定でルートレベルに設定された.moduleクラスは、その値に伸縮します。
Jonathan Snook は、<html>のフォントサイズをパーセンテージで設定し、rem 単位を使用する場合にリセットとして使用する方法を説明したクラシックな記事を持っています。
奇妙な背景色#
CSS では、<body>の背景色がビューポート全体を覆ってしまいますが、要素自体の測定が全体の領域をカバーしていない場合でもです。html 要素に背景色が設定されていない限り、ビューポート全体が対象になります。
ビューポート全体を対象にしたくない場合は、背景色を HTML 要素に設定することが賢明かもしれません。
まとめ#
CSS での<html>と<body>の使用方法の重要な違いについて理解していただければ幸いです。JavaScript にも違いがあります。たとえば、クエリを行う必要はありませんが、html はドキュメントの rootElement であり、body は document.body です。
もちろん、これらの 2 つの間にはさらに多くの技術的な違いがあるかもしれませんが、ここでは私たちの理解を高め、より良い CSS の決定を下すために重点を置いています。
他にも意味のあるスタイルが一つよりもう一つに適用される例がありますか？または、異なる基準を持っていて、いつデザインするかを知っているセットがありますか？コメントで教えてください。