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

htmlタグの名前(識別子)「id・class」とは

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

htmlタグには「id」そして「class」と呼ばれる名前(識別子)を付けることができます。

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

LEVEL EASYのコーディングではそういった理由から、
それぞれ一度しか使わない「PROFILE」「BLOG」のsectionタグにはidを使用し、
中央揃えなど他のブロックでも複数回使う可能性があるものはclassを使用して指定しています。

idとclassは本当に重要なのでしっかり覚えておきましょう。
idとclassを間違えてコーディングしてしまうとレイアウト崩れの原因になります。
ちなみにidとid、classとclassなどの重複をしなければ同じ名前でも問題ありません。

idとclassの書き方。

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

idの記述方法

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

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

htmlでのidの記述方法は、開始タグのセレクタ名のあとに半角スペースを1文字分あけ、
「id=”英字のid名”」と記述します。上記の例ではsectionタグに「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を付けています。

LEVEL EASYのCSSコードのセレクタは「.wrapper」ですね。
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の命名に関して。

LEVEL EASYではidの名前を「profile」や「blog」、classの名前を「wrapper」にしていますが、
以下のルールさえ守れば名前はなんでも構いません。

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

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