class属性とid属性【HTML・CSS入門】

HTML、CSS入門者向けに、class属性とid属性について簡単に解説していきます。

属性とは何か


属性はタグ(開始タグ)の中に、以下の形式で記述します。

属性の名前="属性の値"

値を " で囲い、名前と = で繋ぎます。

上のコードでは、1つ目のpタグの中に class属性が書かれています。名前は『class』で、値は『first』です。

値が複数ある時


値が複数ある場合は、上のコードのように半角スペースで区切ります。

class属性とid属性


class属性とid属性はどちらもタグの中に書き、同じタグに複数の属性を書くことも可能です。その場合は、上のコードのように半角スペースで区切ります。

違い


class属性とid属性の違いは、class属性は1つのHTML内の複数のタグに、同じ値を設定出来るのに対し、id属性は複数のタグに同じ値を設定することが出来ません。

上のコードの場合、class属性の『red』と『large』という値が複数のタグに設定されていますが、これは問題ありません。ただし、3行目で既に『ccc』というid属性があるので、5行目のように再度『ccc』という値のid属性を書くことは出来ません。

使い分け

class属性はこう使う、id属性はこう使うべきみたいなものは無いと思いますし、私自身も特に意識せずに使用してきたのですが、個人的には、CSSのセレクタとして使用する際はclass属性が多い気がしていて、JavaScriptから扱うものにはid属性を使うことが多いように思います。

class属性はタグのグループ分けのようなものであり、ここと、あの要素のデザインだけ変更したい場合などに重宝します。もちろん、特定の要素だけ変更したい場合にも使用できます。

CSSのセレクタの書き方

class属性とid属性はそれぞれ、CSSのセレクタで指定する時などに役立つものです。

以下のHTMLをbody要素内に書き、CSSをstyle要素内か別ファイルに書いてみてください。



.aka {
    color: red;
}

.large {
    font-size: 1.5rem;
}

#ao {
    color: blue;
}

上の2つのコードをファイルに書き込み、ブラウザで表示すると以下のようになります。

class属性で『aka』を指定されたタグは文字色が赤色になり、『large』を指定されたタグはフォントサイズが大きくなっています。そして、id属性で『ao』が指定されたものは青色になっています。

# と .

CSSのセレクタを書くとき、タグ名の場合はそのまま書いていましたが、class属性の場合は、値の前に . を書き、id属性の場合は、 # を書きます。

上のコードの場合、HTMLで『red』というclass属性の値は、CSSのセレクタとして書く時は『.red』となり、『ao』というid属性の値は、『#ao』という風に書いています。

さいごに

class属性とid属性をうまく使い、すっきりとページをデザインしたり、JavaScriptで動作を定めていきましょう。