今回は、divタグを使って範囲を作ってみましょう。
divタグとは？
divタグとは、範囲を指定するための汎用コンテナのことで、意味を持たないHTMLの要素です。
これまで見てきた要素は、すべてなんらかの意味を持つ要素でした。なぜなら、HTMLは文書の構造を正しくコンピューターに伝える為の言語である為です。
しかし、divタグは「意味を持たない」要素です。
ではなぜ、意味を持たない要素が必要なのでしょうか？まずは、そこから見ていきましょう。
divの役割
divタグの役割は、複数の要素をまとめて、デザインの変更やひとかたまりのブロックにする為に使用します。
例えば、下記のようなHTMLがあるとします。
<p>divタグの役割</p>
<p>divタグは、デザインの変更に使用します。</p>上記のようなHTMLはそれぞれに独立した要素ですが、これをdivタグで囲むと、こうなります。
<div class="example">
<p>divタグの役割</p>
<p>divタグは、デザインの変更に使用します。</p>
</div>divタグで囲むことで、CSSでまとめてデザインの変更が可能になります。
CSSについては、「CSSとは？スタイルシートの役割を理解しよう」で説明していますが、divで囲むことでひとまとめの範囲にすることができますので、CSSを適用しやすくなります。
現時点でCSSを学んでいないという方は、divで範囲をまとめる際に使う要素だということを覚えておきましょう。
spanタグとは？
divタグと近い使い方をできる要素が「span」要素です。spanタグは、divタグ同様、意味を持たない要素で、範囲を指定するための汎用コンテナです。
範囲にしたい要素を<span></span>で囲むことで使用できます。
divとspanの違いとは？
どちらも意味を持たない要素ではありますが、この二つの要素には大きな違いがあります。
それは、「行内のコンテンツかどうか」ということです。例えば、下記のようなHTMLのコードがあったとします。
これを、divタグで囲んでひとかたまりの範囲とすると、
このようになります。divタグは、pタグなどと同様タグの下に改行がされます。
一方で、spanタグは、以下の様に使います。
あくまで、行内で範囲を指定したい場合は、spanタグを使用します。
このspanタグは、使用しても行内のコンテンツとして扱われる為、改行はされません。
このように、行内のコンテンツの一部にCSSを適用したい場合にはspanタグを使用します。
divとspanを使う時の注意点
divタグとspanタグにはそれぞれ使用する際の注意点があります。
divタグの使用頻度が多いと煩雑になる
divタグはレイアウトをしたり、CSSを適用しやすくするには非常に使い勝手の良い要素ですが、あまりに多く使うと非常に煩雑なコードになってしまう場合があります。
慣れてくるとある程度問題ないのですが、初心者の場合、コードミスにつながりますので必要最低限に抑えて見やすいコードを心がけることが重要です。
他にふさわしい要素が無い場合に使う
div、spanタグは、他にふさわしい要素が無い場合に使用するようにしましょう。
HTML文書は文書の構造を示す言語ですから、ふさわしい要素がある場合にはそちらを使用するようにしましょう。
HTMLのコンテンツモデル
ここからは、余裕がある人だけ読み進めて問題ありません。
しっかりと理解する必要がある内容ではありますが、初心者の方には少し難しく感じるかと思いますので、今は参考程度に留めておきましょう。
divとspan以外にもHTMLには、要素によって使用ルールが決められています。
HTMLの各要素は、ルールや役割によってグループごとに分類されています。
現在使用が推奨されているHTML5というHTMLのバージョンでは、「メタデータ、フロー、セクショニング、ヘディング、フレージング、エンベッディッド、インタラクティブ」という7つのコンテンツの種類で要素は分類されています。
これらは「コンテンツモデル」と呼ばれています。
上記の図は、各コンテンツを使用する際に、関係性を表しています。
例えば、フレージングの中にエンベッディッドが存在します。エンベッディッドの要素は、フレージングに分類された要素の外側で使用してはならないことを表します。
どの要素がどのコンテンツモデルに属するかはこちらで確認が出来ます。
コンテンツ・モデル-https://w3g.jp/html5/content_models-
理解するポイントまとめ
- divタグとは、範囲を指定するための汎用コンテナのことで、意味を持たないHTMLの要素です。
- divタグで囲むことで、CSSでまとめてデザインの変更が可能になります。
- spanタグは、divタグ同様、意味を持たない要素で、行内（インライン）で使用します。
- divタグの使用頻度が多いと煩雑になる。
- div、spanタグは、他にふさわしい要素が無い場合に使用するようにしましょう。