今回はclassとidについて紹介します。
classとidを使えるようにならなければWEBサイト制作なんて夢のまた夢です。
がんばって覚えましょう。

classとidとは?

classとidは開始タグ内に書く属性の1つです。
<div id=”box”> や<p class=”apple”>というような書き方をします。
classやidを使うと、タグ毎にに好きな固有の名前を付与させることができます。

では一体なぜ固有の名前を付ける必要があるのかと言うと、
CSSなどで見た目を変える作業をする際に固有の名前を付けることで、
そのタグだけの見た目を変えられるようになります。

その為、デザインを変えたい部分のタグにはそれぞれclassやidを付けていくことになります。

classとidの書き方

classとidは、他の属性と同じようにタグ名の後に半角スペースを空けてから書きます。
id名とclass名（””の中）は自分で決めることができます。

また、classとidを両方入れることも可能です。(どちらが先でもOK)
その際には、半角スペースで区切りましょう。

<div class="apple" id="start">りんご</div>
<span class="gorilla">ごりら</span>
<a href="" class="rap">らっぱ</a>
<p id="end" class="bread">ぱん</p>

ただし、自由に決めることができると言ってもその中にもルールはあります。

class名とid名は英数字のみ

class名とid名は英数字(半角)以外使えません。
「-(半角のハイフン)」は使えます。

これはダメ
<div class="しりとり">しりとり</div>

先頭に数字は使えない

class名とid名の先頭に数字は使えません。
数字を使いたいときは先頭以外にしましょう。

これはダメ
<div class="1apple">りんご1</div>
<div class="2apple">りんご2</div>

これはOK
<div class="apple1">りんご1</div>
<div class="a2pple">りんご2</div>

複数指定は半角スペースで区切る

class名とid名は1つのタグにそれぞれ複数指定することができます。
その際には半角スペースで区切りましょう。

<div id="start end" class="apple gorilla rap">しりとり</div>

classとidの違い

HTML内での違いは1つのHTML内で同じ名前を何度も使いまわせるかどうかです。
なぜわざわざ分ける必要があるのかはCSSのセレクタ編で詳しく説明します。

class

何回でも同じclass名を使用できる。

id

1つのHTML内で同じid名を1度しか使えない。

<div id="start" class="apple gorilla">しりとり開始!</div>
<div class="apple">りんご</div>
<div class="gorilla">ごりら</div>
<div class="rap">らっぱ</div>
<div class="bread">ぱん</div>
<div id="end" class="rap bread">「ん」がついたー負けー</div>