divタグとspanタグ

みなさまどうも。

これまでのお勉強大変お疲れ様でした。次回が総まとめとなりますのでHTML入門編は当記事が最後の項目となります。ここまでお読み頂き本当にありがとうございました。

では改めまして『div』タグと『span』タグについて解説していきます。『div』の読み方は「ディブ」もしくは「ディヴ」、『span』の読み方は「スパン」です。

『div』タグも『span』タグもそれだけでは全く意味を持たないタグです。意味を持たないタグなのでHTMLだけの世界ではこれらのタグの存在価値はあまりありません。しかし実際のHTMLでは使用する頻度が非常に高いです。

全く意味を持たないのに使用頻度が非常に高い要素ってなんだか不思議ですね。まずこの理由について解説していきたいと思います。

前回の記事で『要素を特定する』というお話がありましたね。例えば文字の色をCSSで変更したい、といった場合にはその部分を何かしらのタグで囲んでHTML要素にしないとCSSで設定したデザインを的確に当てることはできません。

仮にそこに『h1』タグを使用すると考えてみましょう。『h1』タグは『見出し』という意味が含まれていますので、『h1』タグを使用してしまうと見出しでも何でもないところが見出し扱いになってしまいます。文字の色を変えたかっただけなのにちょっと変なことになっちゃってますね。

こういう時に『div』タグと『span』タグを使用すると非常にスマートなHTML構造を設計できます。『div』タグと『span』タグなら意味を持たないタグなので単純に要素としてひとまとめにしたい時などに使用できます。意味を持たない故に万能のタグ、といった具合ですね。このような理由から使用頻度が非常に高いタグとなっています。

では試しに少し記述してみましょう。ほんの一例ですがこのような構造になります。

<h1>ここはh1タグです。タイトルです</h1>
<div>
    <p>ここはpタグです</p>
    <p>ここもpタグです。<span>ここはpタグの中のspanタグです</span></p>
</div>
<div>ここはdivタグです。</div>

サンプルをみてみる。

いかがでしょうか。タグのデフォルトのデザインなどもなく、装飾がない状態で表示されているだけですね。このように意味がなく装飾もない、そんなタグです。

『div』タグと『span』タグは同じような意味も装飾もないタグですが両者には大きな違いがあり、『div』タグはブロック要素、『span』タグはインラインレベル要素としてレンダリングされます。
※ブロックレベル要素とインラインレベル要素についてはCSS入門編のこちらの記事で詳しく解説しています。

『div』タグと『span』タグの使い分けについてはHTMLだけの知識では難しいところがあります。HTMLだけの世界ですと両者の違いは視覚的に改行されるかされないかくらいの違いしかありません。

『div』タグと『span』タグを使う必要性が実際に出てくるのはCSSやJavaScriptを組み込むようになってからとなります。

ですので今は
「意味も装飾もない『div』タグと『span』タグというものがあってかなり便利らしいぞ」
と言った感じで覚えておくようにしましょう。

というわけで『div』タグと『span』タグの解説は以上となります。これまで本当にありがとうございました、このような駄文をここまでお読み頂き大変光栄です。次の記事では今まで勉強したHTMLのまとめを掲載しているので忘れてしまった項目などをチェックしちゃってください。ではまたお会いしましょう。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア