ウチイダがよくやるCSSの初期設定①：全体適用編

皆さまこんにちは、ウチイダユウゴです！

今日は「知らなくて調べたこと」ではなく「普段やってるけど意識しなくなってたこと」をまとめてみようと思います。

CSSの*(全称セレクタ)になにを指定してる？

この前、お知り合いの方が主催しているもくもく会にお邪魔したときのことです。

制作しているWebサイトで、「なぜか画面から要素がはみ出す」という現象に頭を悩ませている方がいたので、ちょっと見せてもらうことにしました。

結論から言えば、box-sizingの指定がされていなくて、paddingのぶん押し出されていたというものでした。

自分でサイト作るときって、条件反射的にborder-boxにしてるな～っと思ったのですが、振り返れば、過去には同じことでつまづいたものでした(笑)

というわけで、自分が深く考えずに設定している内容をまとめておこうと思います。

今回は特に、サイト全体に適用するような、いわゆる全称セレクタを使って記述しているようなものをピックアップして書きます。

前述の通り、これはほんとどんな時でも書いてますね。定番中の定番かもしれませんが…

なにも設定しない状態(box-sizing:content-box; )だと、widthやheightで指定した大きさにborderとpaddingの値が加算された領域を占めてしまうので、計算するのが面倒くさいのです。

border-boxにしておけば、width: 100%; にするだけで親要素幅や画面幅にフィットさせることができてスムーズになりますね。

当然IEでもサポートされてるので、毎回必ずbody配下に設定してます。

body{
  box-sizing: border-box;
}
body *{
  box-sizing: inherit; /* box-sizingの値は継承されないので明示的に設定 */
}

box-sizingは子要素には継承されません。
bodyに書いておくだけだと全体適用にならないので、body * で子要素に引き継ぐようにすることが多いですね。

あと、単純に *にそのまま書いちゃうこともあります。

これは言うまでもないですね。

デフォルトで余白を無しにしておいて、必要なところに必要な分だけ余白入れられるようにしています。

ユーザーエージェントのスタイルシートだと、pやh1にがっつり上下marginが入ってたりするので、意図しないところでバランス崩れたりしちゃいますし。

これもしょっちゅう設定してます。

ウチイダがpositionの設定を意識するのは、position: absolute;で配置を決めたいときが大半です。

そしてそれは、たいてい親要素を基準にこの位置、っていう風に設定したいことが多いんですよね。

そういうときに、親要素のpositionの値がデフォルトのstaticになっていると、ルートであるbodyのところまですっ飛んでいてしまうわけですよ(笑)

だったら、最初からぜんぷrelativeにしておいたらいいじゃない(￣ー￣)。

親よりも上の要素を基準にしたいなら、その時だけ例外的にstaticにしたらいいと思うんです。

後方互換性を考えると厳しいのでしょうが、relativeがデフォルトでもいいんじゃないかなと思うくらいです！

relativeを全体に適用している設定は、結構いろんなサイトのCSSで見かけるので、皆さん考えることは同じなんじゃないでしょうか？

…まとめてみたら、べつにたいしたこと設定してなかった！Σ(￣ロ￣lll)

目新しい内容じゃなくてすみませんが、、、自分が当たり前にやっていることでも、Webの勉強をし始めたばかりの人にはなにかの足しになるかもしれないなあ、と思ってこんな記事を書いてみました。

新しくWeb制作を学び始めた方の参考になったらうれしいです。

今回こうして記事にまとめてみたら、昔つくってたサイトのこととかいろいろ思い出して感慨深かったです。(笑)
時には昔の話をしようか。

それに、再学習にもなりましたし！relativeやbox-sizingって継承しないんですよね。

これ、わかってないと変なところでつまづきそうです。振り返りと再インプットはやっぱり大事！

※タイトルに「①：全体適用編」　とか書いたけど、続編の構想はとくにありません。。。(笑)

それでは、最後まで読んでいただきありがとうございました(/・ω・)/