こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- CSSで全ての要素に適用するスタイルの指定方法が知りたい
- Web制作の現場で全称セレクターに指定しているプロパティが気になる
という方のお悩みを解決します！
全称セレクターとは？
全称セレクター（universal selector）を使うと、全ての要素に一様にスタイルを適用させることができます。
書き方は以下のように「*（アスタリスク）」を用います。
default.css
* {
プロパティ： 値;
}全称セレクターに指定するプロパティの例
実際のWeb制作案件でぼくが全称セレクターに指定しているプロパティは、
「font-family」と「box-sizing」の2つです。
Webサイトの大部分で使われるフォントは大方一緒ですので一括で指定します。
見出しのフォントなどがデフォルトのフォントでない場合は、
そのフォントごとにクラスを作って指定することが多いです。
box-sizingプロパティはpaddingやborderを要素のサイズに含むかどうかを指定するものです。
含ませないと横幅が意図しないサイズになりデザインが崩れるといったことが起きるので、
border-boxを指定します。
例えば、ぼくは以下のように全称セレクターにスタイルを指定しています。
参考にしてくだされ。
default.css
* {
font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}まとめ
以上、CSSで全ての要素にスタイルを適用させる全称セレクターの解説でした。
全体で共通のスタイルをいちいち指定するのは非効率ですので全称セレクターをうまく活用して快適なCSSライフを。
「box-sizingプロパティについてもう少し詳しく、サンプルコードも見てみたい」
という方は以下の記事で解説していますのでチェックしてみてください〜！
paddingで左右余白をつけた時に横幅がはみ出してしまうのを解決する方法【box-sizing】
