[コーディングの基礎]「id」と「class」

htmlタグの属性「id」「class」とは

id(#)はページ内で一度だけ使うもの、class(.)はページ内で複数回使うもの

htmlタグには「id」そして「class」と属性(名前)を付けることができます。

大原則として・・・、
idと指定しているものは、同一ページ内で一度だけ使う(一意性あり)。
classと指定しているものは、同一ページ内で複数回使う可能性がある(一意性なし)。
と、覚えてください。

一意性

htmlファイルにおける一意性とは、同一ページ内の複数の要素に同じ名前(属性値)をつけることができるかどうかです。属性が「class」の場合は一意性がないため複数箇所で同じ名前(属性値)を付けられますが、属性が「id」の場合は一意性があるため同じ名前を付けることはできません。

例えば、トップページでレイアウトされたスライドショーやお知らせの大枠のブロックなど、
同一ページ内で一度だけしか使わないhtmlタグの属性値にはidを使用することになり、
ページデザインのレイアウト上、コンテンツの中央揃えを複数箇所で行いたい場合など、
複数箇所で何度も使う可能性があるものはclassを使用して指定することが多いです。

「id」属性および「class」属性は本当に重要なのでしっかり覚えておきましょう。
「id」属性と「class」属性を間違えてコーディングしてしまうとレイアウト崩れの原因になります。

ちなみに「<div id=”wrapper”></div>」と「<div class=”wrapper”></div>が同一ページ内にあるなど、
idとid、classとclassで重複をしなければ同じ名前でも共存ができます。

idとclassの書き方

ではidとclassのcssでの記述方法について説明します。
idとclassの違いについて簡単に説明しましたが、htmlでの記述ルールがあるように、
cssにもidとclassのそれぞれの記述ルールがありますので記述例を見ながら説明します。

idの記述方法

まずhtml・cssでのidの記述方法は以下になります。
前提として、id指定しているものは一意性があるため、同一ページ内で一度だけ使うもので、
属性値を重複させてはいけません。

See the Pen Untitled by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

htmlでのidの記述方法は、開始タグのタグ名のあとに半角スペースを1文字分あけ、
「id(属性)=”英数記号のid名(属性値)“」と記述します。
上記の例ではdivタグに「profile」や「blog」とidを付けています。
cssでのidの記述方法は「#◯◯」とセレクタの頭にシャープをつけて指定を行います。

classの記述方法

次にhtml・cssでのclassの記述方法は以下になります。
class指定しているものは一意性がなく、同一ページ内で複数回使う可能性があるもので、
必要ならば、複数回にわたりあらゆる場所で使用することができます。

See the Pen classの書き方 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

htmlでのclassの記述方法は、開始タグのタグ名のあとに半角スペースを1文字分あけ、
「class(属性)=”英字のclass名(属性値)“」と記述します。上記の例では入れ子になっているdivタグに「wrapper」とclassを付けています。
cssでのclassの記述方法は「.◯◯」とセレクタの頭にピリオドをつけて指定を行います。

id・classの対象を限定した記述方法

またコーディングを行っていると、特定のブロックだけ色を変えたいなど影響を与える対象を限定したい場合があります。
そういった場合はidやclassを付与してcss内での入れ子構造を利用した記述方法を使用しましょう。

See the Pen id・classの対象を限定した記述方法 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

上記の例はすべての「divタグ」に「横幅400px」および「中央揃え」を全体指定していますが、
「#div1」と「.div2」に対象を限定してそれぞれの背景色を変更しています。

このようにcssの入れ子構造を作って特定のセレクタに指定を行いたい場合は、
親セレクタの宣言ブロックの中にセレクタを記述することで実装できます。

「&」は親セレクタの意味で、idがあるセレクタは「&#」、classは「&.」と記述すれば、
対象を限定して指定を行うことが可能です。

id属性とclass属性の属性値の命名に関して

今回の記事内ではid属性の属性値を「#profile」や「#blog」など、
class属性の属性値を「.wrapper」などにしていますが、
以下のルールさえ守れば名前はなんでも構いません。

1. 日本語を使わず半角英数字のみを使用。
2. 記号を使うのなら「-」(ハイフン)もしくは「_」(アンダースコア)を使用。
3. ①や□など機種依存文字は使用しない。
4. スペースは使用しない(全角および半角)。
5. 1文字目は数字を使用しない。

ブラウザに正しく認識されない場合がありますので属性値の命名ではこの5点を必ず守りましょう。