ウェブログ

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


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

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

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

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は同じように見えますが明確な違いがあります。

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

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

HTMLタグにclassやidをつける

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

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

こうすることで最初の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と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コードを書いていきます。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり