以前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は同じように見えますが明確な違いがあります。
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側での書き方はどうなるか見てみましょう。
例:
#main {
color: red;
}
.wrap {
color: yellow;
}
idはシャープ、classはドットとおぼえましょう。ちなみにhtmlタグが入る場合は間をくっつけて書きます。
htmlタグを書く場合の例:
color: red;
}
color: yellow;
}
注意したいのがdivと#や.の間は空かないということです。
ダメな例:
div #main {
color: red;
}
div. wrap {
color: yellow;
}
wrap {
color: yellow;
}
よく間違いやすいところが上記例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をかける例:
font-size: 20px;
}
このように半角スペースで区切ってあげる。そうすると「id名mainがついているdivの下にあるh1」というセレクタになります。今回の場合divがなくてもOK。セレクタは「#main h1」となりますね。
孫要素も見てみましょう。id名mainの下にあるulのliにCSSをかける例です。
孫要素にcssをかける例:
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でセレクタ指定すると
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コードを書いていきます。