PR

【HTML】divタグの意味や使い方のご紹介!使用する上での注意点等の解説も!

WEB制作技術系

今回は、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という言語を勉強すると、今回の話が結構スムーズに頭に入ってきますよ!

コメント

タイトルとURLをコピーしました