こちらの記事をお読みになってくれている人たちは、おそらくプログラミング言語をこれから学習しようという方たちでしょう。どんなプログラミング言語を学ぶにしてもHTMLの習得は必須です。そして今回はそのHTMLの中でも一番と言っていいほど利用する万能タグ

の活用方法についてお話ししていきたいと思います。

 

divは単なるスタイリングのためではない

みなさんがHTMLやCSSを勉強している最中でよく目にするのがdivタグだと思います。基本的にdivタグはHTML内で使うことにより囲われた部分にstyleを付け加えることができます。wordpressなどを編集する際にdivタグなどを使い項目などにCSSでデザインすることができます。

独学でインターネットサイトなどを使い勉強している人はdivタグを勉強するときに、特に意味のないかたまりをCSSでスタイリングしたい時に使うタグだとして覚えるでしょう。しかしdivは単なるスタイリングのために使うものではなく、webページを作る際に重要なタグになります。
divタグを使うことによりwebページ内にボックスを生成することができるとイメージしましょう。そしてその数あるボックスをCSSでスタイリングできます。

webページをdivタグを使い構想する

divタグでボックスをwebページ内に生成できるとはどういうことでしょう。HTMLとCSSを勉強している人は練習で何かのwebページを真似て作ろうとしている人が多いでしょう。そしてそれらを真似て0から作ることは非常に良い練習になります。そこで重要なのがボックスなのです。

まずはページもheader,body,footerに分かれているように、header,body,footer内でもタイトルや本文、ログインフォームや画像などに色々分かれており、それらをそれぞれdivタグで囲ってボックスにすることによりすべてのサイズや色、フォントなどを自由に簡単に作ることができます。ボックス同士はmarginやpaddingをうまく使いこなして、全体的にwebページを作っていきます。

webページを作る前に設置したい項目をdivタグでボックスごとに分けて、それらを大きなdivタグの袋に入れる、つまり大きなdivの中に小さなdivを並べていくという考え方です。ぜひHTMLやCSSでwebページを作る際はdivをうまく活用してください。