初心者必見！レイアウトで失敗する前に”divタグ”を理解しよう。

 
今回はHTMLタグの「divタグ」について勉強していくよ。
HTMLを最初に勉強する段階では理解するのが難しいかもしれないけど、最頻出タグだから絶対覚えておこうぜ！！
 

divタグとは？

 

divタグはブロック要素のタグで、英語のdivided(ディヴァイディッド)の略。日本語で「分割した」といった意味です。

 

絶対覚えておこうぜといいながら実は「divタグ」自体には意味はないんです。
divタグだけを書いてもなにも表示されないんです。ちなみにdivタグはブロック要素となっています。
 
 

 
 

と、無言の吹き出しに見えますが、裏のコードではdivタグと書いています。
こんな感じでブラウザにはなにも出てきません。

 

どういうときに使うか

 
さて、この意味を持たないdivタグさんは一体いつ使えばいいのか？
 

divタグの役割は『グールプ化』をさせることです。
なるほどわからん。
 
 
例えばたくさんのHTMLコードをずらーっと書いたとしましょう。
ヘッダーのタグたち、サイドバーのタグたち、フッターのタグたち、メインコンテンツのタグたちなどずらーっと書きます。
 
そうするとどこからどこまでがヘッダーに使われたタグで、どこからがサイドバーのタグなのかがわからなくなってしまいますね。
 
そうならないためにdivタグを使ってグループにしておきます。
ヘッダーで使われているタグをすべて囲んでグループにしておけば、どこからどこまでがヘッダーなのかを区別することができますね。
 

 
divタグのHTMLタグをグループに区分けするのが役割なのです。
ちなみにdivタグはidやclassを使って名前を付けるとなおわかりやすくなりますよ。
 
 

divタグの使い方

 
では実際にコードを見てもらいましょう。
 
 

 
 

2か所にdivタグを使用しました。
ここでは複数のpタグで囲まれた文章をid名＝header、つまりヘッダーとid名＝sidebar、つまりサイドバーのタグのグループに分けるためにdivタグを使いました。
このようなイメージでグループ化していきます。
 
ただこれだけだとブラウザの表示上はなにも変わらないです。

 
 
divタグをグループ化のみで使用するときは基本的にコーディングをしている人の目印としてしか役に立ちません。
 
しかし！このdivタグには秘められた力があります！それはalign属性使えることだよ！
 

align(アライン)は日本語で「整列させる」という意味。google翻訳が言ってた。
 
そうです。整列させるんです。
左に寄せる場合は「aligen=”left”」、中央に寄せる場合は「aligen=”center”」、右に寄せる場合は「aligen=”right”」を使います。
 

具体的に見ていきましょう。
 
 

こんな感じにdivタグで囲ってグループ化させたタグたちを左に寄せたり、右に寄せたり、中央に寄せたりできるのがalign属性なんです。
これはページのレイアウトをするときに便利な機能ですね。
他にもこのalign属性を持つタグはあるので、その都度紹介していきますね。
 
 

CSSあってのdivタグ

 
divタグにはalign属性を使えばある程度デザインに使うこともできますが、もっと凝りたい場合はHTML単体ではあまり訳に立ちにくい。あくまでグループ化させるのが目的のタグなので。
 
そこで使うのがCSS！先ほどdivタグにid名を付けましたが、このid名を使ってCSSを指定していけばグループ化された場所のみにCSSを適応させることができます。
 
ではやってみましょう。
ヘッダーで囲まれた部分の背景を赤に、サイドバーで囲まれた部分の背景を黄色にしてみましょう。
 
 

※「background」は背景のデザインを設定するプロパティ。
 
 
そうすると結果はこうなります。

ほらね！こういう感じでCSSを書けば、divタグで囲まれた部分だけにデザインが入ります！
背景の色以外にもいろいろなCSSを指定すればもっといろいろなことができるので試してみましょう。
 
 

似ているタグ<span>

 

divタグに似ているタグとしてspanタグというものがあります。
こちらも同様にタグ自体に意味はありませんが、役割はdivタグと同じ。

 

違いはdivタグがブロック要素で、spanタグがインライン要素になっています。
ブロック要素とインライン要素の違いについては解説した記事がありますので、こちらを参考にしてください。

 

あなたは大丈夫？”ブロック要素”と”インライン要素”の違いを理解しよう。【お母さんにもできるHTML入門】

 
 

まとめ

これでdivタグの一通りの説明は終わりです。
他にも用途はたくさんありますが、それは作っていくうちに身についてきますので、ここでは割愛します。
またほかのサイトのソースコードを見ればいろいろなところに使われていることがわかるので、そこを参考にするのもよさそうですね。
ソースコードの見方はこちら。HTML・CSSスキル上達を”爆速”にするたった1つの方法
 
それでは今回はこの辺で失礼しましょうかね。
ばいなら。

 
 
質問や意見がありましたらお気軽にツイッターの方へどうぞ。

 
ユトピのツイッター
@yutopi60pa