カテゴリー:HTML

記事本文

この記事をお勧めしたい方

classとidの使い分けがよく分からない方!




今日もお疲れです!
ビギナー中里です!


今回はclassとidについて学びたいと思います。


私は専門学校の頃に1度だけあったWEBの授業で
「idは良くない、classを使いなさい」
とざっくりした説明(のようなもの)を受けました。

確かにこれは、状況によっては正しいです。
しかし、idにも当然使うべき時があります。

今回はそこを理解できるようにしていきましょう。



本記事で得られるスキル

  • classのルール
  • idのルール
  • classとidの使い方





それでは行きましょう!










classのルール

classには特にルールはありません。

ページ内で同じクラス名を複数回使うこともできますし
マルチクラスとにすることも可能です。


<!-- OK -->
<div class="box">箱です</div>
<div class="box">箱です</div>
<div class="box box-blue">青い箱です</div>


class="box box-blue"
のように、半角スペースで区切ることで
1つの要素に複数のクラス名を設定することをマルチクラスと言います。










idのルール

idは上で述べたclassでできることをするとルール違反となります。つまり

1つのページに同じid名は複数存在してはならず
1つの要素に複数のidを指定してはいけない(指定するメリットがない)

ということになります。


<!-- OK -->
<div id="box1">箱です</div>
<div id="box2">箱です</div>
<div id="box-blue">青い箱です</div>

<!-- NG -->
<div id="box">箱です</div>
<div id="box">箱です</div>
<div id="box box-blue">青い箱です</div>











classとidの使い方

classの使い方

classを使うのは以下の2つの場面です。

  • スタイルを当てる
  • JavaScriptの基点にする






idの使い方

idには複数の使い方があります。

  • スタイルを当てる(非推奨)
  • JavaScriptの基点にする
  • ページ内リンク
  • フォーム要素との関連付け


まず、idでもスタイルを当てることはできますが、これはclassで行うべきです。
非推奨と書きましたが、idでのスタイリングは行わないようにしましょう。

JavaScriptの基点にする、については、JavaScript講座で別途触れたいと思います。





ページ内リンク

このリンクをクリックしてみてください。

青い箱


青い箱の先頭にジャンプしましたか?
これは以下のコードで実現しています。


<a href="#box-blue">このリンクをクリックしてみてください。</a>
<div id="box-blue"></div>
(スタイルの記述は省略しています)





フォーム要素との関連付け

2つのチェックボックスを用意しました。
それぞれチェックボックス、関連するテキストをクリックしてみてください。


 
 


チェックボックス1はテキスト部分をクリックしても何も起こりませんが
チェックボックス2はテキスト部分をクリックするとチェックが付きます。
これは以下のコードで実現しています。


<input type="checkbox"><label for="checkbox1">チェックボックス1</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">チェックボックス2</label>
(チェックボックス1の
for
属性は本来不要ですが、id動作の確認のために付けています)






ページ内リンクとフォーム要素との関連付けで分かったように、idには
対応する1つの要素を限定する使い方があります。

そのために1つのページに同じid名は複数存在してはならず、1つの要素に
複数のidを指定してはいけない、となるのです。










今回はここまで、お疲れ様でした!


これから全てidでコーディングしている人を見つけたら、優しく「ちょいちょい」と
言って教えてあげましょう!

・・・はい。3年前の自分です。
よくサイト動いていたなぁ。と思います。


次回はHTMLの正しい構造についてです。
ではまた!