今回はdivについて説明していきたいと思います。
それではいってみましょう！
Menu
divとは
グループ化するということです。
divの使用方法
1 2 3 4 5 6 7 8 | <!-- ①divタグのみ --> <div>～</div> <!-- ②クラスを使用時 --> <div class="sample">～</div> <!-- ③idを使用時 --> <div id="sample">～</div> |
cssの書き方
1 2 3 4 5 6 7 8 9 10 11 | div{ color: red; } .sample{ color: red; } #sample{ color: red; } |
divでグループ化①
下記のようにdivでグループ化した時の背景色のかかり具合も違います。
Resultの下の方にある背景色ボタンを押してみてください。
See the Pen YzWvqmG by tomoy777 (@tomboy777) on CodePen.
【pタグのみ】
1 2 3 | p{ background: yellow; } |
【divでグループ化】
1 2 3 | div{ background: yellow; } |
このようにpタグの背景色に色を付けるにしてもdivタグをつけることによって背景色のかかり具合が変わってきます。
divでグループ化➁
pタグのA、B、Cのクラスで色を付ける。
①AクラスのPタグは赤色
1 2 3 | .A{ background: red; } |
②BクラスのPタグは青色
1 2 3 | .B{ background: blue; } |
③CクラスのPタグは黄色
1 2 3 | .C{ background: yellow; } |
Resultの背景色ボタンを押してみてください。
See the Pen eYzKzxp by tomoy777 (@tomboy777) on CodePen.
今回は分かりやすいように各グループごとにｐタグが1つずつしかありません。
これが数十個単位で各グループにpタグが存在した場合など、このようにdivタグでグループ化しておかないと修正する際に非常に時間がかかってしまいます。
ですので実際の場面ではヘッダー、コンテンツ、サイドバー、フッターなどをdivタグでグループ化してCSSでまとめて書式変更します。
そうすることによって修正がはいっても、グループごとにまとめて修正できるので、超絶な時短が可能になります(*^^)v
その他の特徴
divタグはブロック要素
HTMLの概念としてブロック要素とインライン要素というものがあります。
そしてdivタグはブロック要素になります。
・divタグを使用した場合は下記のようにHTMLで横書きしてもサイト表示した場合は縦表示になります（ブロック要素）
・spanタグを使用した場合は下記のようにHTMLで縦書きしてもサイト表示した場合は横表示になります（インライン要素）
下記がその例です。
Resultが実際のサイト表示です。
See the Pen divとspan by tomoy777 (@tomboy777) on CodePen.
これがブロック要素とインライン要素のタグの違いです。
ですのでdivはブロック要素だということを覚えてくださいネ(^-^)
ちなみにspanタグは横方向に表示されるのでインライン要素だということがわかります。
まとめ
htmlはDOM（階層）になってて、divを作成した時点で階層が増え、わかりづらくなるので、ご自身でdivタグを作成して練習する時は最初はなるべく背景色を付けて練習すると習得が容易になりますヾ ^_^♪
以上です。
