class名とid名を付けてデザインをする

CSSを要素別に割り当てるには

前回（第16回：CSSの文法とホームページに適用させる3つの方法）ではCSSの基本的な文法をお伝えしました。
この方法だとセレクタがHTMLタグなので、ページ内で該当する要素の装飾がすべて同じになってしまいます。
これでは自由なホームページデザインができませんね。
そんなときは、セレクタにclass名・id名を付けて管理しましょう。

class名・id名とは

class名・id名とは、宣言ブロックをひとまとめにした個別の名前だと考えてください。
個別に名前を付けてあげることで、p要素やdiv要素などのタグにそれぞれ個別に割り当てることができるようになります。

赤字で書かれている部分がclass名の書き方、青字で書かれている部分がid名の書き方です。
class名は先頭が「.（ドット）」で始まり、id名は先頭が「#（シャープ）」で始まります。
それぞれの記号に続く名称は任意で設定することができます。

名称については数字から始めない、日本語を使わないというルールを守れば何を設定しても基本的に問題ありませんが、後から見て何を設定しているのかが分かりやすい名称をつけるようにしましょう。
デザインの変更や追加を行う際に探しやすくなりますよ。

class名・id名を使って要素に割り当てる

class名、id名を使ってCSSを作成したら、今度は要素に割り当てていきましょう。

このように、class名で作成したCSSであれば要素の後ろに「半角スペース＋class=””」
id名で作成したCSSであれば要素の後ろに「半角スペース＋id=””」
とそれぞれ設定してあげることで、個別のデザインを施すことができるようになります。

class名とid名の違いについて

class名は1ページの中で何度も使う事ができますが、id名は1度だけしか使う事ができません。
たとえば以下のような使い方は問題ありません

正しい使用

ですが、以下のような使い方は間違いですので注意してください。

間違えた使用

少しややこしいのですがid名を重複して使ってしまっても、デザインはきちんと反映されますが、重複して使用しないと定められているので注意が必要です。
慣れるまではすべてのセレクタ名をclassで作成するようにしてみてください。

id名を使うメリットについて

全てclass名で作成して問題ないならば、id名の必要性がないように感じてしまいます。
ですが、1ページ中に1度しか登場しないid名の場合が使われていれば、「一部だけで使われているのだな」と簡単に把握できるので、CSSを読み解く時に便利な場合もあります。
また、ページ内リンクを設定する時にも利用できるので、メリットが全くないというわけではないのです。

まとめ

・class名、id名には数字から始めない
・class名、id名は半角英数で記述する
・class名は先頭が「.（ドット）」で始まる
・id名は先頭が「#（シャープ）」で始まる
・同じclass名は1ページ中に何度も使用できる
・同じid名の利用は1ページに1度だけ