
今回はhtmlの<div>と<span>について思いつくまま話してみたいと思います。
そんなわけで…
divとspan
<div>と<span>は意味を持たない要素と言われています。
- <title>…ページのタイトル
- <h2>…見出し
- <p>…段落
- <a>…リンク
- <img>…画像
といった意味を持つ要素がほとんどの中で<div>と<span>はある意味、特殊です。
div
例えば<div>はこんなふうに使うと思います。
<section>
<div>
<h2>おほほほ</h2>
<p>ニョロニョロニョロ</p>
</div>
<div>
<h3>わははは</h3>
<ul>
<li>リースト1</li>
<li>リースト2</li>
<li>リースト3</li>
</ul>
</div>
</section>
<section>の中で、<h2>と<p>、<h3>と<ul>を一括りにしたい時などですね。
そうすると、

背景色を変えるなどして、グループ化できているのが分かると思います。
つまりこれは、サイトを見た人が上記2つがグループ化していると認識しやすくする。
そのために<div>で囲っていると言えます。
そして、もしこのグループ化を<div>以外で実現しようと思ったら、おかしなことになるわけです。
例えば、<div>の代わりに<p>を使う
<section>
<p>
<h2>おほほほ</h2>
<p>ニョロニョロニョロ</p>
</p>
<p>
<h3>わははは</h3>
<ul>
<li>リースト1</li>
<li>リースト2</li>
<li>リースト3</li>
</ul>
</p>
</section>
こうなると、何となく文法的にもおかしな感じがすると思います。
実際、このhtmlレイアウトは文法的に間違ってるので、ブラウザは以下のように解釈し直しています。

上記のとおり、<div>以外の要素でグループ化するのはむずかしいことなんです。
だから、<div>はデザインを形作る上では便利かつ必要なものなんですね。
span
<span>もサイトを見てくれる人のためのデザインに使います。
こんな感じで↓
<p>おほほほ<span>ニョロ</span>ほほほ</p>
span {
color: red;
}
おほほほニョロほほほ
「ニョロ」だけ目立たせられるんですね。
で、これを<span>以外でやろうと思えば、困ってしまうわけです。
実際、僕も<span>の替わりになる要素を考えたのですが、浮かびません。
<mark>という要素もありますが、これも意味があるのでね。
迂闊には使えないんです。
こういったことも含めて、<span>も意味はないけど、必要不可欠な要素だったりするわけです。
divやspanの中に入れられるもの
<div>や<span>は中にどんな要素を入れられるの?
と疑問に持つ人がいるかもしれません。
<span>の中に入れられるおもな要素
- <img>
- <small>
- <span> など
ただ、<span>はほぼテキストしか囲まないと思います。
そして、仕事でも文章以外はほとんど囲まないです。
ただ、<span>の中に<span>を入れること何度かありました。
<p>おほほほ<span>ニョロ<span>ニョロ</span></span>ほほほ</p>
span span {
color: red;
}
おほほほニョロニョロほほほ
というように使います。
span span { color: red; }
は、<span>の中にある<span>に当てた指定ですね。
divはどうかと言えば、いろいろな要素を入れられます。
<div>の中に入れられるおもな要素
- <header>
- <footer>
- <main>
- <h>の見出し
- <p>
- <ul> など
例えば、上記で見てきた中くらいのエリアからもっと小さいエリア。
<div>
<p>おほほほ</p>
</div>
↑のような使い方でもオッケーです。
そして、
<div>
<header>
⌇
</header>
<main>
⌇
⌇
</main>
<footer>
⌇
</footer>
</div>
のように、<header>から<footer>まで大きく一括りにもできます。
つまり、好きな範囲をグループ化できるってわけですね。
これは、意味のない要素だからできるってことでもあるかもしれません。
divやspanを多用していいのか?
divやspanを多用していいのか?
たぶん1度は聞いたことがある話かもしれません。
僕としては、たくさん使っていいと思います。
特に初心者の頃は。
<div>の中に<div>を。
さらに、その中に<div>を…
とかも、アリです。
まずは、見本のデザインどおりにコードを書けるようになることが先決なんで。
コーディングする力がついてくれば、この<div>は不要だなとか、いずれ分かるようになります。
多少、不恰好なhtmlレイアウトでも問題ありません。
優先順位はあくまで、コードを書けるようになることです。
コード量を減らすとかスッキリさせるのは、もうちょっとあとの話。
と思っておいてもらうと気楽にコードを書けるかもしれません。
参考サイト
この記事は、はHTML Living Standardをもとに書きました。
HTML Living Standardとは、htmlのルールブックみたいなもので、その最新版です。
- div|MDN Web Docs
- 4.4.15 div要素「4.4 Grouping content」|HTML Living Standard
- span |MDN Web Docs
- 4.5.26 The span element「4.5 Text-level semantics」HTML Living Standard
お時間ある時にどうぞ。
まとめ
divもspanもじゃんじゃん使って好きにコードを書きなされ。
で、デザインする楽しみを少しでも感じてもらえれば…