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

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

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

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

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>

複数の属性も使えます。

<a class=”txtLink” href=”#”>リンク</a>

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

classとidの違い

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

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

htmlタグを書く場合の例：

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

ダメな例：

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

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

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

<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>

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

子要素にcssをかける例：

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

孫要素にcssをかける例：

考えは子要素の時と同じ、半角スペースで区切ります。「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でセレクタ指定すると

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

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

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

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

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

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

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