HTMLを書く上で必ず必要になるタグがdivやpかと思います。
そしてなんとなく使っているspanがありますが、意外とそれぞれのタグの違いは？
と聞かれるとよくわからない場合が多いかと思います。
ここでは、divとspanの違いについてわかりやすく説明していきたいと思います。
divとは？
辞書などで調べるとこのような説明書きをよく見ます。
・特定の意味を持たない汎用的な領域を設定するタグ
・ブラウザー上に表示をしても変化がない
・スタイルシートを設定したい場合に利用する
divの機能として簡単に説明すると<div>～</div>で囲うと1つのまとまりにできるということです。
下記の画像をご覧ください。
HTMLの記載↓
<div class="a">
こんにちは<br>
今日は良い天気ですね。<br>
今日も一日よろしくお願いします。
</div>
<div class="b">
お疲れ様でした。<br>
また明日もよろしくお願いします。
</div>ブラウザー上の表示↓
こんにちは
今日は良い天気ですね。
今日も一日よろしくお願いします。
お疲れ様でした。
また明日もよろしくお願いします。
ブラウザー上の表示では何も変化がないのでわかりにくいですが、これをclass=aに文字を赤色にする。(.a { color: red;}) といったCSSを付けた場合、aというclass名を付けたdivで囲われた部分だけが赤文字になります。
CSSの記載↓
.a{
color : red;
}
aのクラスのみCSSを付けた場合のブラウザー上の表示↓
こんにちは
今日は良い天気ですね。
今日も一日よろしくお願いします。
お疲れ様でした。
また明日もよろしくお願いします。
このようにひとつのまとまりだけに何かしらのデザインを変えたい。といった時に使えるのがdivタグです。とても便利なタグですね。
ただし、汎用的だからと言っても多用せずに、使う場合はdivよりも適した要素が他にないかを考えてから使うようにした方がいいでしょう。
例：navやsectionなどはHTML5より新しく出来た要素なので、使用場面をよく考えてdivと使い分けるなどしましょう。
spanとは？
spanもdivと同様に主にこのような性質をもっています。
・ 特定の意味を持たない汎用的な領域を設定するタグ
・ブラウザー上に表示をしても変化がない
・スタイルシートを設定したい場合に利用する
そして、divと決定的に違うところは、特定の範囲内のさらに一部をデザインしたい時に使えるところです。
divの中の文章の一部分を<span>～</span>で囲みます。
HTMLの記載↓
<div class="a">
こんにちは<br>
今日は良い<span>天気</span>ですね。<br>
今日も一日よろしくお願いします。
</div>
<div class="b">
お疲れ様でした。<br>
また明日もよろしくお願いします。
</div>ブラウザー上の表示↓
こんにちは
今日は良い天気ですね。
今日も一日よろしくお願いします。
お疲れ様でした。
また明日もよろしくお願いします。
このように文章の中の一部のみをデザインしたい場合などはspanで囲むことによって実現します。
divとspanの違いは？
divはひとまとまり、spanはさらにその中の一部のみ。といった囲い方で使うことができます。
2つのタグの違いを簡単に説明すると、それぞれ囲った部分が、divは改行されるけど、spanは改行されない。というところです。
divの場合
HTMLの記載↓
これは、<div>テスト文章</div>です。ブラウザー上の表示↓
これは、
テスト文章
です。
spanの場合
HTMLの記載↓
これは、<span>テスト文章</span>です。ブラウザー上の表示↓
これは、テスト文章です。
このようにそれぞれ違いがあります。
最後にこれだけは覚えてほしいのが、divは色々な要素を挟んで大きなまとまりを作ることが出来る。spanは文字など小さいまとまりを作ることが出来る。といった違いになります。 今まで曖昧に使用してたdivとspanの違いを知っていただけたらと思います。
補足
もう少し詳しく説明をすると、CSSのdisplayプロパティー値がそれぞれ異なる為、divとspanではブラウザー上で表示した際の動きが異なります。
div= display: block
span= display: inline
block要素かinline要素かで動きが異なります。
block要素、inline要素に関しては、今後また別の記事で詳しく説明をしたいと思います。
コメント