11.HTMLファイルにclassとidをつける

以前HTMLの最後にワイヤーフレームを元にしてHTMLファイルを作成する記事を書きました。

6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成

その中で少し触れましたが、HTMLファイルのメイン部分をdiv#mainというので定義しました。これはdivタグをつかってid属性mainという名前に定義した、ということです。このように固有の名前をつけることによって同じdivでも別の存在として扱うことが出来、cssを書けるときにラクにかけることができます。
今回は名前をつけるときに使用するclassとidについて説明します。

1 classやidとはなにか
- 1.1 classとidの違い
2 HTMLタグにclassやidをつける
- 2.1 CSS側の処理はどうするか
- 2.2 classやidを目印として他のcssを定義する
3 どのHTMLタグにclassやidをつけるという判断をするか
- 3.1 なんでもかんでもつければいいというわけではない
  - 3.1.1 idとclassの優先順位の問題
  - 3.1.2 名前を考えることに時間を費やしてしまう
4 実際にHTMLファイルにつけた例

classやidとはなにか

このclassやidというのはhtmlタグにつけることのできる属性というものです。例で説明します。

属性の場所：
<img src=”apple.gif”>
<a href=”index.html”>リンク</a>

上記赤い部分が属性です。よく見たことのあるタグかと思います。属性と聞くと構えてしまうかもしれませんが実は身近にあるもの。
classやidも属性なので例と同じように使うことができます。

classとid 例：
<h1 class=”title”>タイトル</h1>
<div id=”contents”>コンテンツ部分</div>

複数の属性も使えます。

使い方は上記の通り、htmlタグのあとに書きます。h1ならh1 class=”name”とか、h1 id=”name”など。

classとidの違い

classとidは同じように見えますが明確な違いがあります。

class: ページ内で何回でも同じ名前を使用できる。idより優先度は低い。
id: ページ内で一度だけ。classより優先度は高い。

他にjqueryでidの方が処理が早いとか、aタグでアンカーとしてジャンプさせたりはidなど使い分けがありますがCSSにおいては上記を覚えておけばOK。

HTMLタグにclassやidをつける

試しにサンプルを。例えば以下の様なhtmlがあるとします。

<div>
<h1>タイトル</h1>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト01</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト02</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト03</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト04</li>
</ul>
</li>
</ul>
<div><img src=”“apple.jpg”” />
この画像の説明文章です。
この画像の補足事項です。</div>
</div>

divタグにCSSをかけようとしてもこのままだとdivが2つあるので同じCSSがかかってしまいます。その時にclassやidを使います。
最初のdivにid名としてmain、次のdivにclass名wrapとして名づけます。

<div id=”main”>
<h1>タイトル</h1>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト01</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト02</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト03</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト04</li>
</ul>
</li>
</ul>
<div class=”wrap”>
<img src=”“apple.jpg”” />
この画像の説明文章です。
この画像の補足事項です。
</div>
</div>

こうすることで最初のdivにcssをかけたいとき、次のdivにかけたいとき別々にわけることができました。

CSS側の処理はどうするか

htmlでそれぞれclassやidをつけてわけることはできました。では実際にcss側での書き方はどうなるか見てみましょう。

例：

id: #（シャープ）を使う

・サンプル
#main {
color: red;
}

class: .（ドット）を使う

・サンプル
.wrap {
color: yellow;
}

idはシャープ、classはドットとおぼえましょう。ちなみにhtmlタグが入る場合は間をくっつけて書きます。

htmlタグを書く場合の例：

div#main {
color: red;
}

div.wrap {
color: yellow;
}

注意したいのがdivと#や.の間は空かないということです。

ダメな例：

1: divと#の間に半角スペースがはいっている
div #main {
color: red;
}

2: .とwrapの間に半角スペースがはいっている
div. wrap {
color: yellow;
}

3: .を入れ忘れている（cssがclassだと認識できない）
wrap {
color: yellow;
}

よく間違いやすいところが上記例3の.や#入れ忘れによりエラーとなるケース。HTMLタグは.や#は入りませんが、classやidは入れてあげないといけません。

classやidを目印として他のcssを定義する

この方法も覚えておくとラクな書き方をご紹介。何もclassやid名をつけたところだけしかcssがかけられないというわけではありません。class名やid名をつけたタグを目印として子要素にcssをかけたり、子の子、つまり孫要素にかけたりすることもできます。先ほどの例でみてみましょう。

例えばh1にcssをかけたい場合どうすればいいでしょうか。新しくclassやidをh1に追加してもいいですが、h1の親要素であるdivにmainというidが付いているのでこれを活かしてcssを書いてみましょう。

子要素にcssをかける例：

div#main h1 {
font-size: 20px;
}

このように半角スペースで区切ってあげる。そうすると「id名mainがついているdivの下にあるh1」というセレクタになります。今回の場合divがなくてもOK。セレクタは「#main h1」となりますね。
孫要素も見てみましょう。id名mainの下にあるulのliにCSSをかける例です。

孫要素にcssをかける例：

div#main ul li {
border: 1px solid #ccc;
}

考えは子要素の時と同じ、半角スペースで区切ります。「id名mainのdivの下にあるulの下にあるli」というセレクタです。

このように半角スペースで区切ることにより、下の階層を指定することができます。もちろんclassやidにかぎらずhtmlだけでもセレクタを指定することができます。

どのHTMLタグにclassやidをつけるという判断をするか

個人的にはidはmain部分やwrapperエリア, sidebar, footerといった大まかな場所の定義に使い、細かい箇所や何回も出てくるところなどはclassを使うようにしています。他の部分で使うことを考えると新しいid名を毎回書くより使いまわしたほうがcssファイルも小さくなるし何より自分が管理しやすいです。

なんでもかんでもつければいいというわけではない

idをつけておけばかぶることはないから安心…これはあまりよろしくありません。なぜかというと2つあります。

idとclassの優先順位の問題

先ほどちらっと書きましたがidとclassには優先順位があります。おなじ箇所にcssセレクタを指定した場合、idの方が優先順位が強くなります。

例：
<div id=”contents” class=”mainArea”>サンプル</div>

上記のdivにそれぞれidとclassでセレクタ指定すると

#contents {
color:red;
}
.mainArea {
color:green;
}

同じ箇所に書いていますが、idの方が優先されるので文字の色は赤くなります。

名前を考えることに時間を費やしてしまう

idやclassは自分で好きな名前がつけられる反面、「なんていう名前にしたらいいんだろう」って悩むと思います。僕はよく悩みました。。。
なんでもいいやと「agj」とか「jjj」とか適当にしていると、「あれ、これってどんなCSSだっけ？」と作った張本人でもわからなくなってしまいます。他人が作ったコードだともう意味不明。

なので、idやclassは必要最低限にして、HTMLタグだけで絞込みができるのであればわざわざclassやidを使う必要はありません。ラクに簡単にいきましょう。

実際にHTMLファイルにつけた例

6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成で書いたHTMLコード。これにclassやidをつけた例が最後にコードがでていますので参考にしていただければ。
サンプルはこちら

次回はこのHTMLファイルにCSSを適用させるのでCSSコードを書いていきます。

次の講座：コラム：class名とid名はどうやってつければいい？←目次に戻る