シェアする
The div and span Tags - Japanese Only
みなさまどうも。
これまでのお勉強大変お疲れ様でした。次回が総まとめとなりますので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入門編のこちらの記事で詳しく解説しています。
HTML5ではブロック要素やインラインレベル要素という概念は廃止され、『コンテンツ・モデル』という概念が取り入られていますのでご注意下さい。『コンテンツ・モデル』についてはまた先の記事で解説したいと思います。
『div』タグと『span』タグの使い分けについてはHTMLだけの知識では難しいところがあります。HTMLだけの世界ですと両者の違いは視覚的に改行されるかされないかくらいの違いしかありません。
『div』タグと『span』タグを使う必要性が実際に出てくるのはCSSやJavaScriptを組み込むようになってからとなります。
ですので今は
「意味も装飾もない『div』タグと『span』タグというものがあってかなり便利らしいぞ」
と言った感じで覚えておくようにしましょう。
というわけで『div』タグと『span』タグの解説は以上となります。これまで本当にありがとうございました、このような駄文をここまでお読み頂き大変光栄です。次の記事では今まで勉強したHTMLのまとめを掲載しているので忘れてしまった項目などをチェックしちゃってください。ではまたお会いしましょう。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
