オリジナルの記事：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>要素に押し込むのではなく、直接 CSS の<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 の決定を下すための重要なポイントを紹介しました。
他にも意味のあるスタイルが一つよりもう一つに適しているという例がありますか？または、異なる基準を持っている場合、いつデザインするかを知っていますか？コメントで教えてください。