footer東京都を拠点にしたWebサイト制作。以前HTMLの最後にワイヤーフレームを元にしてHTMLファイルを作成する記事を書きました。6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成その中で少し触れましたが、HTMLファイルのメイン部分をdiv#mainというので定義しました。これはdivタグをつかってid属性mainという名前に定義した、ということです。このように固有の名前をつけることによって同じdivでも別の存在として扱うことが出来、cssを書けるときにラクにかけることができます。今回は名前をつけるときに使用するclassとidについて説明します。実際にHTMLファイルにつけた例classやidとはなにかこのclassやidというのはhtmlタグにつけることのできる属性というものです。href=”index.html”>リンク</a>上記赤い部分が属性です。見たことのあるタグかと思います。属性と聞くと構えてしまうかもしれませんが実は身近にあるもの。classやidも属性なので例と同じように使うことができます。id=”contents”>コンテンツ部分</div>複数の属性も使えます。href=”#”>リンク</a>使い方は上記の通り、htmlタグのあとに書きます。id=”name”など。classとidの違いclassとidは同じように見えますが明確な違いがあります。ページ内で何回でも同じ名前を使用できる。idより優先度は低い。classより優先度は高い。他にjqueryでidの方が処理が早いとか、aタグでアンカーとしてジャンプさせたりはidなど使い分けがありますがCSSにおいては上記を覚えておけばOK。HTMLタグにclassやidをつける試しにサンプルを。以下の様なhtmlがあるとします。/>この画像の説明文章です。この画像の補足事項です。</div></div>divタグにCSSをかけようとしてもこのままだとdivが2つあるので同じCSSがかかってしまいます。その時にclassやidを使います。最初のdivにid名としてmain、次のdivにclass名wrapとして名づけます。/>この画像の説明文章です。この画像の補足事項です。</div></div>こうすることで最初のdivにcssをかけたいとき、次のdivにかけたいとき別々にわけることができました。CSS側の処理はどうするかhtmlでそれぞれclassやidをつけてわけることはできました。実際にcss側での書き方はどうなるか見てみましょう。yellow;}idはシャープ、classはドットとおぼえましょう。ちなみにhtmlタグが入る場合は間をくっつけて書きます。yellow;}注意したいのがdivと#や.の間は空かないということです。yellow;}よく間違いやすいところが上記例3の.や#入れ忘れによりエラーとなるケース。HTMLタグは.や#は入りませんが、classやidは入れてあげないといけません。classやidを目印として他のcssを定義するこの方法も覚えておくとラクな書き方をご紹介。何もclassやid名をつけたところだけしかcssがかけられないというわけではありません。class名やid名をつけたタグを目印として子要素にcssをかけたり、子の子、つまり孫要素にかけたりすることもできます。先ほどの例でみてみましょう。/>この画像の説明文章です。この画像の補足事項です。</div></div>例えばh1にcssをかけたい場合どうすればいいでしょうか。新しくclassやidをh1に追加してもいいですが、h1の親要素であるdivにmainというidが付いているのでこれを活かしてcssを書いてみましょう。20px;}このように半角スペースで区切ってあげる。すると「id名mainがついているdivの下にあるh1」というセレクタになります。今回の場合divがなくてもOK。孫要素も見てみましょう。id名mainの下にあるulのliにCSSをかける例です。#ccc;}考えは子要素の時と同じ、半角スペースで区切ります。「id名mainのdivの下にあるulの下にあるli」というセレクタです。このように半角スペースで区切ることにより、下の階層を指定することができます。classやidにかぎらずhtmlだけでもセレクタを指定することができます。footerといった大まかな場所の定義に使い、細かい箇所や何回も出てくるところなどはclassを使うようにしています。他の部分で使うことを考えると新しいid名を毎回書くより使いまわしたほうがcssファイルも小さくなるし何より自分が管理しやすいです。なんでもかんでもつければいいというわけではないidをつけておけばかぶることはないから安心...これはあまりよろしくありません。先ほどちらっと書きましたがidとclassには優先順位があります。おなじ箇所にcssセレクタを指定した場合、idの方が優先順位が強くなります。{color:green;}同じ箇所に書いていますが、idの方が優先されるので文字の色は赤くなります。名前を考えることに時間を費やしてしまうidやclassは自分で好きな名前がつけられる反面、「なんていう名前にしたらいいんだろう」って悩むと思います。なんでもいいやと「agj」とか「jjj」とか適当にしていると、「あれ、これってどんなCSSだっけ?」と作った張本人でもわからなくなってしまいます。他人が作ったコードだともう意味不明。idやclassは必要最低限にして、HTMLタグだけで絞込みができるのであればわざわざclassやidを使う必要はありません。ラクに簡単にいきましょう。実際にHTMLファイルにつけた例6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成で書いたHTMLコード。これにclassやidをつけた例が最後にコードがでていますので参考にしていただければ。サンプルはこちら次回はこのHTMLファイルにCSSを適用させるのでCSSコードを書いていきます。プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。