WEBサイトを作成するときに頻繁に’div’というタグが使われます。これ自体はhtml上で、特に何も効果を及ぼしませんが、
div内に<p>タグや<h2>タグなど、他の要素をまとめて括り、そこに対してcssを共通に適用させる場合などに使用します。WEBデザインはボックスの概念を中心に構成されており、’div’は、各ボックスを囲む役割を担います。
つまり、divに対してcssを適用させることで、その中にあるすべてのタグ（<p>や<h2>、<h3>など）に対して、一括でスタイルを適用させることができるようになります。カテゴリ別に作成したボックスをWEBページ内で配置する際など、多岐に渡り必要となるタグです。webデザインを形成する上ではかかせなタグですので、早めに習得していきましょう。
【使用例1】テキストと画像を合わせて、共通のcssを適用させる
【ソースコード html側】
<div class=“test-box”>
<img src=“〇〇.com/img/test.png” class="test-image">
<p>htmlに欠かせないDIVとは</p>
</div>【ソースコード css側】
test-box{
padding:20px;
background:whitesmoke;
text-align:center;
width:200px;
margin:0 auto 20px;
height:auto;
}
.test-text{
padding:0;
margin:0;
}
.test-image{
width:200px;
height:auto;
}【WEBブラウザ側 結果】
htmlに欠かせないDIVとは
<img>要素と<p>要素に対して、共通のCSSを適用することができました。二つ要素に対して、上下左右20px分の間隔と、背景色にwhitesmoke、中央寄せ、幅200px、高さ自動調整を共通に適用させることが出来ています。
まとめ
繰り返しますが、<div>は、内包する要素をまとめる働きがあり、まとめてデザインやスタイルをつけることができます。また<div>でまとめておくことで、html上のソースコードを参照した際に見やすくなるというメリットもあります。WEBデザインをする上では、非常に頻繁に使用されますので、使い慣れておくようにしましょう。
コメント