今回は、divタグについて解説していきます。このタグは、HTMLで本当によく使われるタグです。
実際に公開されているコードをみると、divタグが大量に使われているサイトをよく目にします。
使い方を知りたい方、使用する上での注意点を知りたい方はご覧ください。
divタグの意味や使い方
divタグは、それ自体、何の意味も持っていないタグです。「ディブ」と読みます。
え？じゃあ、このタグの存在意味って何？
そうなりますよね。しかし、HTMLでdivタグには、他の要素をグループ化する役割があり、使うシーンは多々あります。
CSSという言語のスキルがある方は、結構ピンとくる話です。
では、下記を例にイメージしてみましょう。「今日の夜ご飯は焼きそばだ。」「楽しみだー。」という2つの文章を、divタグを使って、1つの緑色の箱にグループ化します。
※divタグには、class、green-boxを指定。
<div class="green-box">
<p>今日の夜ご飯は焼きそばだ。</p>
<p>楽しみだー。</p>
</div>.green-box{
background-color: #deffe3;
border: dashed 2px #7bc890;
padding:30px;
}これを、ブラウザで表示すると下記のようになります。
今日の夜ご飯は焼きそばだ。
楽しみだー。
要は、こんな感じで、一まとめにグループ化したい時に使う箱、これがdivタグです。
使用する上での注意点、divの乱用に注意
divタグは、意味を持たないタグですが、言い換えれば、代替えの役割もできてしまうということになります。
例えば、段落を表すpタグ等をdivタグとして使うこともできてしまうんです。
しかし、HTMLは、文書構成をコンピュータに知らせるための言語なので、避けるべきでしょう。
divタグとspanタグの違い
divタグと似たタグに、span（スパン）タグというものがあります。spanタグも、それ自体意味を持っていないタグです。
この2つの違いは、divタグはブロックレベル要素、spanはインライン要素という違いです。
ブロックレベル要素は、見出しや段落等、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。その為、使用すると改行が入ります。
インライン要素は、主にブロックレベル要素の内容として用いられ、文章の一部として扱われます。 その為、使用しても改行が入らず、文章の一部として認識されます。
まとめ
divタグは、それ自体特に意味はないものの、非常によく使われるタグです。
CSSという言語を勉強すると、今回の話が結構スムーズに頭に入ってきますよ！
コメント