divとspanの役割などについて

html/css初心者がはじめに覚える<div>と<span>。

この2つについて解説します。

何となく多用してたけど、しっかり理解して使えるようになりたい。

そんな人はご覧ください。

divとspanは意味を持たない要素
1. divの役割はグループ化すること
2. spanの役割は文字の強調
divやspanの中に入れられる要素
1. divの中に入れていい要素
2. spanの中に入れていい要素
divやspanを多用していいのか？
参考サイト
まとめ

divとspanは意味を持たない要素

<div>と<span>は意味を持たない要素です。

一方、意味を持つ要素には、サイトでの明確な役割があります。

<title>…ページのタイトル
<h2>…見出し
<p>…段落
<a>…リンク
<img>…画像

<div><span>は上記のような、文章上の役割がありません。

つまり、これが意味のない要素と言われる理由です。

しかしながら、<div><span>にも役割があります。

その役割を次で解説しますので、ご覧ください。

divの役割はグループ化すること

<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>などを一括くくりにしたい時ですね。

その一括りにした<div>に背景色をつける。

そうすると見た目上、グループ化されます。

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レイアウトは文法的に間違ってます。

下図の検証画面での結果をご覧ください。

ブラウザはhtmlコードを再解釈していますね。

このように<div>以外の要素で、グループ化するのはむずかしい。

だから<div>はデザインを形作る上では、便利かつ必要なものなんですね。

spanの役割は文字の強調

<span>は文字を目立たせるのがおもな役割です。

こんな感じで使います↓

<p>おほほほ<span>ニョロ</span>ほほほ</p>

span {
  color: red;
}

おほほほニョロほほほ

「ニョロ」だけ目立たせられますね。

span以外で文字を強調するのはできない

文字の強調を<span>以外ではできません。

僕も<span>の替わりになる要素を考えたのですが浮かびません。

<mark>という要素もありますが、これも意味があります。

だから安易に使えないんです。

こういったことも含め<span>も意味はないけど、必要不可欠な要素なんです。

【参考外部サイト】mark｜MDN Web Docs

divやspanの中に入れられる要素

「<div>や<span>は中にどんな要素を入れられるの？」

と疑問に持つ人がいるかもしれません。

<div>や<span>にはいろいろな要素を入れられます。

divの中に入れていい要素

<div>の中に入れられるおもな要素はこちらです。

<header>
<footer>
<main>
<h>の見出し
<p>
<ul> など

<div>は以下のように<p>だけを括るのにも使えます。

<div>
  <p>おほほほ</p>
</div>

また<header>から<footer>までも、大きく一括りにもできます。

<div>
  <header>
  ⌇
  </header>
  <main>
  ⌇
  ⌇
  </main>
  <footer>
  ⌇
  </footer>
</div>

つまり、好きな範囲をグループ化できるのが<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やspanを多用していいのか？

「divやspanを多用していいのか？」

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

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

特に初心者の頃は。

<div>の中に<div>を。

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

とかも、アリです。

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

コーディングする力がつくと、「この<div>は不要だな」といずれ分かる時が来ます。

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

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

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

というわけで、気楽にコードを書きましょう。

参考サイト

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

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

専門家向けのため、やや難解です。

お時間ある人はご覧ください。

まとめ

<div>と<span>について紹介しました。

役割を少しでも理解して使えると、コーディング力が上がるはずです。

「また<div>で囲ってしまったな…」と気にせず、どんどん使いましょう。