divタグとhtmlのブロックレベル要素の使い方まとめ

htmlで一番意味不明な所って、 おそらくdivですよね。
「なんでここにdivを付けてるの？」
「どこにdivを付ければいいの？」
「divってどういう意味？」
って思っちゃいますよねｗ
でも、ここさえわかればhtmlなんて楽勝です！

初心者でもdivの使い方、 htmlのブロックレベル要素の使い方が簡単にマスターできるように、 専門用語はできる限り使わずに紹介していきますね。

このページでは「divを付ける意味」「divを付けるべき場所」「その他、色々」について紹介します。

divって何のために使うの？

divタグは囲った部分をグループ化するために使います。 といってもイマイチぴんと来ないですよね。 なので、まずは下を見て下さい。

例えば上の画像のようなデザインを作りたいとします。 そういう時って、 下のようなhtmlタグを書いていきますよね。

入力したのを見てみると、 h1とｐに背景色の指定をしたのに隙間が空いて、 なんか最初の画像とはかけ離れてますよねｗ こういう時にdivを使います

こういうように、h1とpを「div」で囲んであげる事で、 divで囲まれた部分の背景が変わります。
そして、divに背景色の指定をした場合は 「h1」と「p」それぞれに背景色の指定をする必要がなくなります。

ということは、 h1とpを赤以外の色にする事もできるって事です。
何が言いたいかっていうと 「デザインの幅が広がるよ」ってこと。
例えば、下のようにh1を緑にして、 ｐは青にするってこともできます。

divでh1とpをグループ化するだけで、 こんなふうにカラフルにできちゃいます。 なので基本的には 「デザインのためにdivを使う」と考えて下さい。

●ポイント 「divがないとcssが使えない」という意味ではないので注意。
divを1個も使わなくても全く問題ありません。

でも、まだイマイチぴんと来ないですよね。 わかります、その気持ち。 私も最初は意味不明だったんでｗ
なので「なぜdiv、h1、pの部分の色が変わるのか」 「div、h1、ｐの範囲はどうなっているのか」 など、もうちょっと詳しく紹介しますね。

HTMLのブロックレベル要素を覚えよう！

htmlはブロックを積んでいくような形で出来ています。 例えば下のようにhtmlタグを書いたとします。

こういうように書いた場合、 htmlでは目に見えない（画面に表示されない） 下の画像のようなブロック（領域）が構成されます。

画像を見てもらえばわかるように、 ブラウザ（画面）で文字が何も表示されていない所でも、 目に見えない領域が存在しているわけです。
だからさっきh1とｐの背景色を赤で指定した時も、 文字がない所まで赤くなりましたよね。

そしてこのブロック（領域）は重ねる事ができます。

divでh1とｐを囲った時を思い出してください。
このとき実はdivのブロック（領域）に h1とpのブロック（領域）を重ねていたんです。

画像を見てもらうとわかると思いますが、 divの上にh1とpが重なっていますよね。
それぞれの要素（div、h1、ｐなど）の領域は、 基本的には背景を指定しない限り目には見えません。
ですが、目に見えないだけでしっかりと存在してるので、 覚えておいて下さいね。
それとhtmlというのは、 基本的にはこのブロック（領域）を重ねて作っていきます。
そして、このブロック（領域）の幅は cssで調整することができます。
※html・css入門！初心者でも見るだけで自由自在にの続きで紹介します。
ちなみにdiv、h1、pのように 「ひとかたまりのブロックとして積まれいてく要素」 の事をブロックレベル要素と呼びます。
ちなみにブロックレベル要素は 下のような種類があります。

ブロックレベル要素の他にインライン要素というのもあります。
ですが、今紹介するときっと混乱しちゃいます。
なので今度紹介したいと思います。
（今は仕組みだけ分かれば十分です！）

divタグはどこで使えばいいの？

divタグには、header要素やfooter要素のように 「この場所はヘッダーだよ」「この場所はフッターだよ」
と「テキストの意味」を検索エンジンに伝える役割はありません。 divタグがあっても 「ココが区切りなんだな」と認識するくらいです。
つまりdivタグ自体は意味を持ってないって事です。
なので、装飾したい所、きれいにしたい所、などに使います。 と、いってもわかりづらいですねｗ
まずは下の画像を見て下さい。

上の画像のように、2カラムのサイトを作りたいとします。 でも、普通にhtmlを入力しただけだと 「メインコンテツを左に」「サイドバーを右に」 というようにはできないですよね。 なのでこういう時にdivを使います。

上の画像のようにdivを使ってグループ化する事で、 「メインコンテンツは左」「サイドバーは右」 というふうにcssで位置が調整できるようになります。
（詳しくはhtml・css入門！初心者でも見るだけで自由自在にの続きで紹介）
ですが、ただdivと付けただけでは、 どちらも同じグループとして扱われるので位置の調整はできませんよね。 なので、分けたグループに名前を付けてあげます。
そうする事で、個別にデザインを変えたり、 位置を変えたりできるようになります。
では、divの使い方について紹介しますね。

divの使い方

divで分けたグループを個別で指定するためには、 id属性もしくはクラス属性を使います。

idまたはクラスで指定した名前は、
cssでデザインを編集する時に識別名として使う事ができます。
簡単にいうと「example」という名前を付けたら
「exampleのグループは左に移動、背景は赤色ね」っていうように、
グループの名前ごとに命令が出せるようになるって事。

●ポイント 仮に名前を付けずにdivを二つ以上使って「背景は赤色ね」と命令した場合、全てのdivの背景が赤色になってしまう。

※詳しくは「html・css入門！初心者でも見るだけで自由自在に」の続きで説明

こうすることで 「メインコンテンツは左」「サイドバーは右」というように、 それぞれデザインや位置を別々に調整できるようになります。
デザインや位置を調整する時はcssでします。cssについてはhtml・css入門！初心者でも見るだけで自由自在にの続きで紹介します
「メインコンテンツ」「サイドバー」意外にも、 デザインによって使いたい所が変わると思うので、 それぞれ自由に使うようにしましょう！
ちなみに、divの中にdivを入れるなども可能です。

divには使用制限などはないので、 何回でも使えます。
ただしdivの中にdivを何個も入れるなど、 divを深くし過ぎると webサイトの読み込み速度が落ちたりするので、 気をつけましょうね。

以上、「divタグとブロック要素のまとめ」でしたー(^^)/