セレクタ「＊（アスタリスク）」は何に使う？cssの初期設定で使う

* {
  box-sizing: border-box;
  padding: 0;
  border-width: 0px;
  border-style: solid;
  margin: 0;
  line-height: 1;
  list-style-type: none;
}

「そもそもセレクタは何？」の説明は、別記事にしました。

よければご覧ください。

cssのセレクタとは？よくわかる解説

cssのセレクタについての説明です。

omosirofuturestory.com

2020.07.10

セレクタ「＊（アスタリスク）」３つの使い方

セレクタ「＊（アスタリスク）」は、
全てのhtml要素へ指示を出すことができます。

そのため

一回の指示で全てのhtml要素を設定することができます。

主な使い方は３つあります。

　１：初期設定
　２：デフォルト値の統一
　３：色の統一

それぞれ詳しく説明します。

１：初期設定

初期設定とは、
最初に決めておいた方が良い設定です。

それでは

最初に設定していた方が良いcssは何があるでしょうか？

一番に思いつくのは

box-sizing: border-box;
list-style-type: none;

この２つでしょうか。

どちらも後で変えることが少ないからです。

２：デフォルト値の統一

デフォルト値とは、
どんなものなんでしょうか？

初めから入っている数値のことです。

なぜ初めから入っている数値を統一する必要があるのでしょうか？

それは

padding、marginなど

初めに入っている数値がバラバラだからです。

デフォルト値を統一した方が良いcssは何があるでしょうか？

padding: 0;
margin: 0;

border-width: 0px;
border-style: solid;
 
line-height: 1;

などがあります。

なんとなく挙動がおかしそうなプロパティは、
デフォルト値を統一した方が良いでしょう。

３：色の統一

色の統一とは、
どんなものなんでしょうか？

全てではありませんが
ページを作るとき「テーマ色」を決めることがあります。

　・みかんのページなら「オレンジ色」

　・ぶどうのページなら「紫色」

　・チョコレートのページなら「茶色」

このように

使う色が決まっているなら
セレクタ「＊（アスタリスク）」へ入れてしまいましょう。

* {
color: red;
}

テーマ色と違うところだけ
色を変えれば良いのでcssの行数も減ります。