5月だと言うのに、もう暑くなってきましたね。
今回はhtmlのタグの中でも汎用性の高いdivタグについて取り上げます。このdivタグはcssとも相性がよく、たいていclassやidを付与して使います。
ただ、あまりの汎用性の高さにどう使えばいいのかわからない人が多くいると思います。また逆に、無駄に使いすぎている人もいるのではないでしょうか?
そこで、この記事ではdivタグの効果的な使い方を再確認しつつ、cssとの関わりについて述べていこうと思います。
divタグとは
divタグはh1タグやarticleタグのように単体では意味を持ちません。ですが、divタグは囲んだところをグループ化することができます。そして、グループ化した部分にcssを反映させることができます。
divタグは意味を持たないゆえに、様々な部分に挿入できます。ですので、グループに意味を持たせずcssを反映させたい時には非常に便利です。
divタグを使って、cssを使いやすくする
divタグとspanタグの違い
divタグと似た要素にspanタグがあります。どちらも意味を持たないタグではありますが、cssを反映させた際に大きな違いが現れます。
参考URL:http://yoshinaga-test.aispr.jp/spantest
<span class="yellow"> spanタグです</span> <div class="red"> divタグです</div>
.yellow { background-color: yellow; } .red{ background-color: red; }
図1ではdivタグとspanタグ両方に、cssのbackground-colorを指定したものです。divタグには変化がありますが、spanタグには変化がありません。
なぜかというと、divタグとspanタグにはcssプロパティに対して得意不得意があるからです。そこで、divタグとspanタグがどのcssプロパティを得意とし、不得意とするのかを表にしてみました。
それぞれ一長一短ですが、divタグはボックス全体を装飾する際に活躍し、spanタグは文字装飾の際に活躍すると言えるでしょう。
表中に出てきたinline要素、block要素の違いに関しては、displayプロパティに関するページに詳しく書かれています。
divタグとcssのfloatプロパティを使ってマルチデバイスに適応させる
divタグはボックスを装飾する際に活躍することを述べてきましたが、ここからは具体的にdivタグとcssの活用例について述べていきます。
divタグをいくつか並べて表示させる際、特にcssを使ってなければ縦に並列します。しかし、ヘッダーナビなどのように横に並べたい時があると思います。
その時には、cssのfloatプロパティを使います。特にfloatで横並びにしておけば、画面の横幅に応じて変形してくれます。ですから、マルチデバイスに効果を発揮することができるので、非常に便利です。
以下の例のように記載し、PC画面とスマホ画面を比べてみるとよく分かります。PC画面とスマホ画面の両方で確認してみましょう。
参考URL:http://yoshinaga-test.aispr.jp/floattest
<div class=boxa> BOXその1 </div> <div class=boxb> BOXその2 </div> <div class=boxc> BOXその3 </div> <div class=boxd> BOXその4</div>
div{ float:left; padding:50px; } .boxa{background-color: red; } .boxb{background-color: yellow; } .boxc{background-color: green; } .boxd{background-color: blue; }
divタグの無駄使いには注意
divタグは汎用性が高いので、無駄使いしてしまうケースが多いです。
特に、複雑なレイアウトになればなるほど、多用されがちです。目的があって使うのはいいのですが、それだけコードが読みにくくなります。
それを防ぐには、それぞれのclassやid属性を差別化することが必要です。また、SEO対策という点でもh1タグやarticleタグは適材適所で使用し、他人が見ても十分理解できるようなコードを記述しましょう。
まとめ
ここまでのことをまとめると、divタグについては
-
・spanタグとどっちが適切か考える
-
・ボックスを区切れば、細かなcssの設定ができる
-
・無駄に使いすぎている場合は、classやh1タグなどをもう一度検討してみる
divタグを使いこなせれば、cssをさらに活用できるようになるので、ぜひ理解しておきましょう。