てがろぐで個人サイトを作るための基礎知識

CSSの基本プロパティその4(クラスとIDを用いた指定方法について)

前回までの記事では基本的なプロパティについて説明してきました。この記事ではCSSをもっと上手に使うためのクラスとIDについて解説していきます。

クラスとIDとは
タグにつけることができる属性の一つです。全てのタグに指定することができます。
htmlでクラスやIDを割り振り、CSSと紐づけることでその部分だけデザインを変えることができます。

ルール
クラス名とID名は自分でつけることができますが、ルールがあります。
スペースを入れない
英数字とハイフン(-)とアンダースコア(_)で記述
1文字目は必ず英字(数字も✕)
※厳密には日本語のクラス名やID名でも良いが、ブラウザによってはエラーを吐くので英数字で揃えたほうが無難。

CSS内でクラスを指定するときは.(ピリオド)クラス名というように指定し、その後プロパティと値を書きます。
IDを指定するときは#(シャープ)ID名というように指定し、その後プロパティと値を書きます。
タグとクラスまたはID名をセットで指定したいときは、タグ名.クラス名またはタグ名#ID名のように書きます。タグ名とクラス・IDの間にスペースは必要ありません。

違い
クラスとIDの違いは同じHTMLファイルで使用できる回数です。同じIDは一度しか使えませんが、同じクラスは何度でも使うことができます。
もう一つの違いはCSSでの優先順位です。同じタグにクラスとIDで別の装飾を指定すると、IDで指定された装飾が優先されます。