HTML&CSSとWebデザイン＃7　〜クラスとID〜

お疲れ様です。コーヒーです。

第7回の勉強内容も引き続きHTML＆CSSです。

参考書はこちらです。

今回はCSSのクラスとIDについてまとめていきます！！

　クラス（class）とIDはタグの中に記述できる属性の一つです。全てのタグに指定することができます。HTML内でクラスやIDを割り振ることで、CSSで部分的にデザインを変更することができます。

　クラスを使用する場合、HTMLファイルでタグに　class属性を追記し、任意のクラス名を指定します。

<p>クラス指定なし</p>
<p class="blue">クラス指定あり<p>

　CSSファイルには「.（ピリオド）」と「クラス名」を書き、適用させたいスタイルを記述します。

p {
    color: #999;
}
.blue {
    color: #0bd;
}

結果は以下のようになります。

クラス指定なし
クラス指定あり

IDもクラスと考え方は同じです。HTMLファイルでID属性を追記し、ID名を記述します。

<p>ID指定なし</p>
<p id="orange">ID指定あり<p>

CSSファイルには「＃（ハッシュ）」と「ID名」を記述します。

p {
    color: #999;
}
.blue {
    color: #fa2;
}

結果は以下のようになります。

ID指定なし
ID指定あり

クラスとIDはほとんど同じ役割であることがわかりました。しかし、この2つには大きな違いが2点あります。

　まず、HTMLファイルで使用できる回数ですが、IDはページ内で同一IDは使用できません。そのため、レイアウトの枠組み等で指定されることが多いです。クラスはページ内で何度も使用できます。

　CSSの優先順位については、IDの方が優先されます。同じタグにIDとクラスを指定する際には気をつけましょう。

今週の内容は以上です！！

日々地道に成長