cssの初期化は、セレクタ(アスタリスク)を使う

こんにちは tanaka です。

今回は、cssの初期化の話をします。

cssの初期化とは、
セレクタ(アスタリスク)を使って、
html要素全てに対し設定することです。

なぜ、
こんなことをするのか?

cssプロパティの値には
ブラウザのデフォルト値
が入っています。

そのブラウザのデフォルト値は
0ではないもの
もあります。

それら
不揃いのデフォルト値は
気付かないところで
問題を起こす可能性があります。

気付かないところでの問題は
解決しにくいものです。

そんなことにならないよう、
cssの初期化を行います。

それでは
詳しく説明します。

そもそもセレクタとは何?
と言う方に記事を用意しました。
よければご覧ください。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

説明

cssの初期化をなぜするのか?

ブラウザの初期値は
初期値は0ではありません。

padding、marginを初め
様々なところへ
最初から0ではない数値
が入っています。

それら
0ではない数値が
気づかないところで
問題を起こさないようにするため

cssの初期値を行います。

それだけでは無く、
ページ全てに共通する
プロパティの値などがあれば

cssの初期値に
入れておいても
良いでしょう。

* {
line-height: 1;
box-sizing: border-box;
list-style-type: none;
}

など

* {
line-height: 1;
box-sizing: border-box;
list-style-type: none;
}

まとめ

ブラウザによってデフォルト値が違う

ブラウザの種類によって
プロパティのデフォルト値が違う。

なので、
あらかじめ
自分にとって必要な数値を

セレクタ(アスタリスク)を使って
プロパティに値を入れましょう。

cssの初期値

それだけでは無く、
ページ全てに共通する
プロパティの値などがあれば

cssの初期値に
入れておいても
良いでしょう。

ただし
入れ過ぎ注意。

初期値・一覧

入れておきたい初期値・一覧

padding: 0;内の余白
margin: 0;外の余白
line-height: 1;行間
box-sizing: border-box;幅、高さをborderまで含める
list-style-type: none;リストの印を消す
* {
padding: 0;
margin: 0;
line-height: 1;
box-sizing: border-box;
list-style-type: none;
}

以上、
cssの初期化
の説明でした。

ありがとうございました。

タイトルとURLをコピーしました