divとspanについて

今回はhtmlの<div>と<span>について思いつくまま話してみたいと思います。

そんなわけで…

divとspan
1. div
2. span
divやspanの中に入れられるもの
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を多用していいのか？

たぶん1度は聞いたことがある話かもしれません。

僕としては、たくさん使っていいと思います。

特に初心者の頃は。

<div>の中に<div>を。

さらに、その中に<div>を…

とかも、アリです。

まずは、見本のデザインどおりにコードを書けるようになることが先決なんで。

コーディングする力がついてくれば、この<div>は不要だなとか、いずれ分かるようになります。

多少、不恰好なhtmlレイアウトでも問題ありません。

優先順位はあくまで、コードを書けるようになることです。

コード量を減らすとかスッキリさせるのは、もうちょっとあとの話。

と思っておいてもらうと気楽にコードを書けるかもしれません。

参考サイト

この記事は、はHTML Living Standardをもとに書きました。

HTML Living Standardとは、htmlのルールブックみたいなもので、その最新版です。

お時間ある時にどうぞ。

まとめ

divもspanもじゃんじゃん使って好きにコードを書きなされ。

で、デザインする楽しみを少しでも感じてもらえれば…