【CSS】すべてに適用する*を利用してnormalize.cssを加工する

すべてに適用できる「*」を利用してnormalize.cssの設定を上書きします。

* { /*すべてにCSSを適用する内容を入れる*/ }

これは「ユニバーサルセレクタ」といって、すべての要素を対象にスタイルを適用するセレクタです。

body * p{ color: red; }

上の例ではbody内のp要素すべてが赤になる設定です。

normalize.cssを加工

normalize.cssを利用している場合、各要素に初期値でマージン、パッディングがそのまま設定されてたり、liタグの点や、box-sizing:border-boxが設定されていないため作業しづらかったりという事があると思います。

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; list-style-type:none; }

上の設定で、すべてのマージン・パッディングを0にし、すべてにbox-sizing:border-boxを適用しています。
※list-style-type:noneは実際にはリストタグへしか反映する必要はありませんが、一緒に記載する事でCSSを簡素化しています。

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。