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

divタグとブロック要素の使い方

htmlで一番意味不明な所って、おそらくdivですよね。 「なんでここにdivを付けてるの?」 「どこにdivを付ければいいの?」 「divってどういう意味?」 って思っちゃいますよねw

でも、ここさえわかればhtmlなんて楽勝です!

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

このページでは「divを付ける意味」「divを付けるべき場所」「その他、色々」について紹介します。(詳しくは目次をご覧下さい。)

目次
divって何のために使うの?
HTMLのブロックレベル要素を覚えよう!
divタグはどこで使えばいいの?
divの使い方

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

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

divタグ参考画像

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

<h1>htmlについて</h1>
<p>htmlについてのテキスト・・・</p>
<h2>htmlの歴史</h2>
<p>htmlの歴史のテキスト・・・</p>
<h3>html使い方</h3>
<p>html使い方のテキスト・・・</p>

そしてcssかhtmlに直接「背景の色指定」をしてあげると色が変わりますね。

※cssが全く分からないという場合はhtml・css入門!初心者でも見るだけで自由自在にを見て下さい。 cssの詳しい使い方は後ほど説明するので気にしないで下さい。

h1{background:red;}
/* h1の{背景を:赤色にする;}という意味 */

p{background:red;}
/* pの{背景を:赤色にする;}という意味 */
<h1 style="background:red;">
htmlについて
</h1>

<p style="background:red;">
htmlについてのテキスト
</p>

<!--htmlに上のように書いてもcssに書いた時と同じになる-->

※p{background:red;}とした場合は、通常は全てのpの背景が赤色になりますが、下の画像ではわかりやすさを重視するために、あえて背景を表示していません。

htmlブラウザ表示例

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

<div>
   <h1>htmlについて</h1>
   <p>htmlについてのテキスト・・・</p>
</div>

<h2>htmlの歴史</h2>
<p>htmlの歴史のテキスト・・・</p>
<h3>html使い方</h3>
<p>html使い方のテキスト・・・</p>
div{background:red;}

/* divで囲んだ部分の{背景を:赤色にする;}という意味*/
/* h1とpの指定は必要ない*/
<div style="background:red;">
   <h1>htmlについて</h1>
   <p>htmlについてのテキスト・・・</p>
</div>
divで囲んだ場合の表示例

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

ということは、h1とpを赤以外の色にする事もできるって事です。

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

div{background:red;}
h1{background:green;}
p{background:blue;}

/*囲んだ部分の{背景を:〇色にする;}という意味*/
h1を緑、pを青にした場合の表示例(div参考例)

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

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

でも、まだイマイチぴんと来ないですよね。 わかります、その気持ち。 私も最初は意味不明だったんでw

なので「なぜdiv、h1、pの部分の色が変わるのか」 「div、h1、pの範囲はどうなっているのか」 など、もうちょっと詳しく紹介しますね。

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

htmlはブロックを積んでいくような形で出来ています。

例えば下のようにhtmlタグを書いたとします。

<h1>htmlについて</h1>
<p>htmlについてのテキスト・・・</p>
<h2>htmlの歴史</h2>
<p>htmlの歴史のテキスト・・・</p>
<h3>html使い方</h3>
<p>html使い方のテキスト・・・</p>

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

htmlのブロック(領域)

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

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

領域を重ねた例

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

divにh1とpを重ねた場合の領域

画像を見てもらうとわかると思いますが、divの上にh1pが重なっていますよね。

それぞれの要素(div、h1、pなど)の領域は、基本的には背景を指定しない限り目には見えません。 ですが、目に見えないだけでしっかりと存在してるので、覚えておいて下さいね。

それとhtmlというのは、基本的にはこのブロック(領域)を重ねて作っていきます。

そして、このブロック(領域)の幅はcssで調整することができます。

html・css入門!初心者でも見るだけで自由自在にの続きで紹介します。

ちなみにdiv、h1、pのように「ひとかたまりのブロックとして積まれいてく要素」の事をブロックレベル要素と呼びます。 ちなみにブロックレベル要素は下のような種類があります。(一部のみ紹介)

要素名 内容
h1~h6 見出しを設定する
p 段落を設定する
div div自体に意味はない。複数のブロックレベル要素を一つのグループにまとめる時に使う事が多い
ul・その他リストタグ 箇条書きを設定する

ブロックレベル要素の他にインライン要素というのもあります。

ですが、今紹介するときっと混乱しちゃいます。なので今度紹介したいと思います。 (今は仕組みだけ分かれば十分です!)

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

divタグには、header要素やfooter要素のように「この場所はヘッダーだよ」「この場所はフッターだよ」「テキストの意味」を検索エンジンに伝える役割はありません。 divタグがあっても「ココが区切りなんだな」と認識するくらいです。

つまりdivタグ自体は意味を持ってないって事です。

なので、装飾したい所、きれいにしたい所、などに使います。 と、いってもわかりづらいですねw

まずは下の画像を見て下さい。

webサイト構成

上の画像のように、2カラムのサイトを作りたいとします。

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

divでグループ化した場合の例

上の画像のようにdivを使ってグループ化する事で、「メインコンテンツは左」「サイドバーは右」というふうにcssで位置が調整できるようになります。

(詳しくはhtml・css入門!初心者でも見るだけで自由自在にの続きで紹介)

ですが、ただdivと付けただけでは、どちらも同じグループとして扱われるので位置の調整はできませんよね。 なので、分けたグループに名前を付けてあげます。

そうする事で、個別にデザインを変えたり、位置を変えたりできるようになります。

では、divの使い方について紹介しますね。

divの使い方

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

※id、クラス属性について詳しくは「html・css入門!初心者でも見るだけで自由自在に」の続きで紹介。

<div id="example"></div>
<!--「example」の部分に任意の名前を付けられる-->
クラス属性
<div class="example"></div>
<!--「example」の部分に任意の名前を付けられる-->

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

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

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

こうすることで「メインコンテンツは左」「サイドバーは右」というように、それぞれデザインや位置を別々に調整できるようになります。

デザインや位置を調整する時はcssでします。cssについてはhtml・css入門!初心者でも見るだけで自由自在にの続きで紹介します

「メインコンテンツ」「サイドバー」意外にも、デザインによって使いたい所が変わると思うので、 それぞれ自由に使うようにしましょう!

ちなみに、divの中にdivを入れるなども可能です。

<div>
    <div>
       コンテンツなど
    </div>
</div>

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

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

頂いたコメント

  1. マレク より:

    こんにちは。
    htmlは覚えようと思えば楽しくなる学びなのかなと思いつつ、どうしても避けてしまうところです。
    しかし、少しずつでも知識にしていくことは大切なことだと思います。
    前向きに学ばせてもらおうと思います!

    • ゆう。 より:

      マレクさん、こんにちわー(^^♪

      覚えると面白いですよー。
      何より、自分で好きなようにできる所がいいですよ(#^^#)

      あとはcssの仕組みさえわかれば、なんでもできちゃうので
      ぜひ覚えてみて下さいね(^-^)

  2. ともちん より:

    こんにちは。ともちんと言います。
    丁寧に説明いただいて、さすがの私でも少しは分かりました。
    ただ、自分の問題として、そもそももっと知ってないといけないと思いました。
    ちょっと興味も出ましたので勉強します。
    ありがとうございます。
    応援します。

    • ゆう。 より:

      ともちんさん、こんにちはー(#^^#)

      タグとかは覚える必要ないので、
      仕組みだけなんとなーくわかってれば出来るようになりますよ(^-^)

      htmlとcssはゲームみたいな感じでできるので、
      ぜひ覚えてみて下さいねー(^^♪

      応援ありがとうございます(*´з`)

  3. mame より:

    はじめまして。
    アフィリエイトを始めたばかりで、勉強のためいろいろな先輩の
    ブログを拝見させて頂いています。
    divタグとhtmlのブロックレベル要素の使い方まとめ を拝見させて頂いてていたのですがHPのデザインのことで、htmlは位置を決めるもの、cssはデザインを決めるもの、
    この位の理解で、ホットケーキのブログに移っちゃいました。
    ホットケーキの作り方ぐらい理解できるといいんですけど、、、。

    • ゆう。 より:

      はじめましてー(^^♪

      大丈夫ですよw
      実際ホットケーキの作り方なみに簡単ですよ(^-^)

      まだ、cssの使い方を詳しく紹介してないので、
      ちょっと意味不明な部分もあるかもしれないですけど、
      これから公開するcssの使い方をみてもらえれば、多分簡単に理解できますよ(^-^)

      あと、「ここが意味不明w」ってとこがあったら、教えて下さいねー(^^)/
      説明に追加しますのでー

  4. sa-chi より:

    こんにちは。

    パソコン系の学校を卒業したわりにhtmlとは無縁のsa-chiといいます。

    パソコン系といっても、専攻した学課はシステム系ではなかったので、html言語はほんの少しかじった程度ですが(^^;

    htmlを見ただけで、うわぁ~(>_<)って感じですが、ゆう。さんの説明は分かりやすくてとても楽しいです。

    ありがとうございました。

    • ゆう。 より:

      こんにちわー(^^♪

      パソコン系の学校行ってれば、きっとhtmlなんて余裕ですよー(*´з`)

      すごいやる気のでる一言ありがとうございます(#^^#)
      すごい嬉しいです!

      画像とか作るのが結構面倒だったので、もうちょっと簡略化しようかなって
      思ってたんですけど、このままがんばってみます!!

      ありがとうございます