Q&A
全ての要素に指定したい時、という要件でよろしいでしょうか。
それとも、bodyのみに適用でいいのでしょうか。
CSSの「box-sizing: border-box;」の設定をするにあたり
参考書によって、セレクタを「*」とするものと、「html *」とするものとがありました。
「」と記載されていたところでは、
『「box-sizing: border-box;」は、全体に設定すべきものなので「」にする』
とあり、
「html 」と記載されていたところでは、
『「」は、古いバージョンに対応していない場合があるので一般的に「html *」に設定する。「head」タグには影響がないので心配なし』とありました。
ここまで来て、疑問が1点出たのですが、セレクタを「body」にしてはいけないのでしょうか。
ご回答いただけると幸いです。
言葉足らずですみません。
『「box-sizing: border-box;」の性質上、全体に指定する』と受け取れる記載がどちらにもありました。
全体に設定するのであれば、セレクタを「*」に設定するというのはわかるのですが、
『「html *」で設定するのだが、「head」には影響がない』
→『「body」に影響がある』と解釈しました
ということは、「html *」＝「body」にはならないのでしょうか。
↓の様な考えをしました。
<html>
<head>～</head>
<body>～</body>
</html>
とした際
<head>～</head>
には影響がない…
<body>～</body>
には影響がある
→ということは、セレクタ「body」に設定すれば良いのではないか？と疑問に思ったのです
>『「*」は、古いバージョンに対応していない場合があるので一般的に「html *」に設定する。「head」タグには影響がないので心配なし』とありました。
この記載ってどこにありました？
headはCSSでコントロールする要素ではないからです。
（つまり必要ない）
質問者さんの意図を反映するなら、
body,
body * { box-sizing: border-box; }
と、bodyと、body内の全ての要素に対して適用すればいいかと。
その記事の筆者は、それが冗長だから、
headには影響ないし、html *でいんじゃね？って意図もあるかと。
参考書の著作者さんに質問した際の回答文からの抜粋です。
@質問者さん
ありがとうございます。
miyabi_takatsuk さん
つまり…継承できないものについて、
「html *」＝「body」+「body *」ということになり、
CSSに書く際、手間を考慮して「html *」でいいんじゃね？
ってことでしょうか。
> 「html *」＝「body」+「body *」
は少し違います。
"html *"は、"html内の全ての子要素"というセレクタになります。
つまり、"head"も含まれます。
しかし、"head"はそもそもCSSを適用させる要素ではないため、適用されても表示に影響がないため、
"body含めた全ての要素"、という意図で、"html *"でいい、となります。
質問者さんの疑問は、headを含めなくていいなら、bodyでいいじゃないか、って考えってことですよね？
ですが、"body"では、子要素には適用されませんし、
"body *"では、"body"自体には適用されません。
なので、意図を反映させるには、
"body,body *"、となるわけです。
それが冗長だから、"head"には効いても問題ないから、
"html *" でいいだろう、となります。
「継承される」or「継承されない」がキーになると。
例えば、「継承される」ものならば、『body』に設定すれば良いが、
「継承されない」ものならば、『*』や『html *』や『body と body *』に設定すべし
との理解でよろしいでしょうか。
（何度もすみません）
> 「継承される」or「継承されない」がキーになると。
今回の質問に関しては、そこがキーになるで合っています。
> 例えば
「表示に関わる全ての要素に適用したい」のであれば、その理解で大丈夫です。
継承されるプロパティの代表としては、
"font-size"がありますが、
これは、bodyに対してだけ効かせれば、
bodyと、body内の全ての要素に適用されます。（継承される）
他にも、いくつか、継承される、されないプロパティは各々ありますので、
やっていく中で、調べたりして、勉強されるとよいかと。
ご回答ありがとうございます。
「継承」について、勉強になりました。
ひとつ、教えていただければと思います。
『「表示に関わる全ての要素に適用したい」のであれば』とは、それ以外にどのようなパターンが考えられるのでしょうか。
継承なしのプロパティを、
bodyのみに効かせたい時などです。
paddingや、marginは割と指定する時があります。
また、positionとか。
miyabi_takatsukさん
ありがとうございます！
ベストアンサーを…と思ったら、このスレッド、質問欄のため設定できません！
あ、よろしければ、私の既回答にBAいただければと。
回答の内容に、上記やりとりの内容も凝縮されていると思うので。
継承の部分も回答に含めますね。
回答2件
0
html * と body * の違いということでしょうか。
前者だと body にも適用されますが、後者は body には適用されないという違いがあります。
投稿2021/03/22 04:46
総合スコア33797
「html *」と「body」の違いです
ならば、miyabi_takatsukさんの回答どおりです。
「body *」ではなく、「body」なのですが…
だから body だけにしか適用されません。
横槍失礼します。
petoさん、box-sizingは、継承が起きないプロパティなので、
セレクタの対象ピンポイントにしか適用されません。
なので、親要素（今回はbody）に適用しても、その子要素には適用されません。
*は、全ての要素を指すので、
全ての要素に対して各々に適用させる、という結果になります。
0
ベストアンサー
bodyだと、bodyにしか、適用されません。
*であれば、全ての要素に適用されます。
質問者さんの意図にあった方を選べばよいかと思います。
では、なぜ、そのようになるかというと、
box-sizingプロパティは、
継承がされないからです。
font-sizeなどの、継承されるプロパティは、
親要素に適用した場合、
子要素全てにも反映されます。
しかし、継承されないプロパティ（今回は、box-sizing）は、そのセレクタのターゲット要素のみにピンポイントにしか当たりません。
よって、
bodyに対して、box-sizingを効かせた場合は、
body自体にしか効かなく、その子要素には、効きません。
html *というセレクタにした場合は、
htmlの子要素全て、というセレクタになるため、
bodyも含めた全てに対して、box-sizingが適用されます。
headには効かせたくない、となれば、
css
1body, 2body * { 3 box-sizing: border-box; 4}
とする必要がありますが、
head要素はそもそも表示されない（CSSが効いても意味がない）要素のため、
分ける必要がありません。
よって、今回の件は、
記事の筆者の言う通り、html *というセレクタが最も適当である、と言えます。
投稿2021/03/22 04:23
編集2021/03/22 14:41総合スコア9528
「box-sizing: border-box;」の設定範囲について、どちらがふさわしいでしょうか。
そこが質問者さんの実装したいものによる、ということです。
全ての要素に適用したいなら、*、
bodyのみでいいなら、body、です。
個人的には、box-sizing: border-box;は最初の段階で、全ての要素に適用すべきではない、と考えてます。
（paddingによって、ボックスサイズが自然と広がる仕様が、活きる時があるから）
ですが、それはあくまで個人的な意見なので、
質問者さんが決めてください。
*は、bodyだけでなく、pや、divといった、全ての要素に対して、のセレクタとなります。
bodyだけに適用すればよい、ならば、bodyにすればいいかと。
ただし、pなどの他の要素には効きません。
（box-sizing: border-box;に関してはです。継承されないプロパティだから）
あなたの回答
tips
プレビュー
