バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#10  レイアウトを制御する|divとspanについて理解しよう

web兄さん

まだCSSの超初級編の講座の途中ですが、今回説明するのはHTMLのタグである<div><span>についての学習です。

この<div>というタグ、実はHTMLのタグの中で最も記述する回数が多いです。

では、なぜHTMLの超初級編の講座で解説しなかったのかというと、<div><span>というタグはCSSありきで使用するものであり、「CSS」「親要素」「子要素」を理解していないと効率的な学習ができないからです。

web兄さん
まずは<span>、次に<div>という流れで1つずつ丁寧に解説していきます!

span|グループ化

❶spanタグの概要

読みスパン
用途テキスト、<a>、<img>などのグループ化
由来span(意味:ものごとの範囲・期間)
spanの概要

普段、物事の間隔を表現する時に「髪を切るスパンが短い」「長いスパンで考えたら」, etc.

上記のように使いませんか?あのスパンがこのタグの意味です。

❷spanの使い方

意味だけではピンときませんので、どのようなシーンで利用するか見ていきましょう。

例えば以下のように<p>に書かれた「この文字だけ赤色」という文字の色を変更したいとします。

しかし、p{ color : red }と書いては文字が全て赤色になってしまいますよね。

<p>文章のこの文字だけ赤色にしたい</p>
p{
  color: red;
}

そんな時に<span>が活躍します。以下のコードをみてください。

<p>文章の<span>この文字だけ赤色</span>にしたい</p>
span{
  color: red;
}

CSSを適用したい部分を<span>この文字だけ赤色</span>のように、<span>の入れ子にすることでCSSの適用範囲をコントロールすることができました。

web兄さん
このように<span>は要素の一部分に対してCSSを適用させたい時に使用します

❸spanの書き方のルール

実は<span>には入れ子にしてOKな要素とNGな要素があります。

<!-- OKな書き方 -->
<p>これは<span>OKな書き方</span></p>

<p><span>これもOKな書き方</span></p>

<a href="yahoo.co.jp">クリックして<span>Yahoo</span>の公式ページへ</a>

<p><span><img src="icon.png">これは写真です</span></p>


<!-- NGな書き方 -->
<span><p>これはNGな書き方です</p></span>

<spna><h1>これもNGな書き方です</h1></span>

文字<a><img>といった要素であれば入れ子にすることができますが、

<h1><p>といった要素は入れ子にすることができません。

では、文字レベルの狭い範囲のCSSならともかく、色々な要素を含んだ広範囲に対してCSSを適用させたい場合はどのようにすれば良いのでしょうか?

そう、そんな時に登場するのが<div>というタグです。

div|グループ化

❶divタグの概要

読みディブ
用途全てのHTMLのグループ化
由来division(意味:分割、区分)
divの概要

<div><span>と同様にグループ化するためのタグですが、その範囲や用途は<span>よりも広いです。

❷divタグの使用例

以下のようなHTMLがあり、見出し+本文でグループ化させ枠線で囲いたいとします。

<h3>HTML</h3>
<p>これは文書構造を定義する言語です</p>

<h3>CSS</h3>
<p>これは装飾をほどこす言語です</p>

h3{ border : solid 4px #0B78D7}p{ border : solid 4px #0B78D7}とCSSを書いた場合、それぞれの要素に枠線がついてしまい、一括りにして枠線をつけることができません。

h3{
  border:solid 4px #0B78D7;
}

p{
  border:solid 4px #0B78D7;
}

そこで活躍するのが<div>です。以下のように<h3><p><div>の入れ子にし、<div>に対してborderをつけます。

<div>
    <h3>HTML</h3>
    <p>これは文書構造を定義する言語です</p>
</div>
<div>
    <h3>CSS</h3>
    <p>これは装飾をほどこす言語です</p>
</div>
div{
    border:solid 4px #0B78D7;
    margin:10px;
}

すると<div>で囲まれた中の要素は1つのグループとなり、イメージした通りに枠線で囲うことができましたね。

このように<div>は「分割」という意味にある通り、中にいろいろな要素を入れてdivという箱で分割(グループ化)することができるタグなのです。

divはレイアウトを組む際にも使用される

講座の序盤で「divは最も使用するタグ」と説明した理由は複雑なレイアウトをCSSで組むときには必ず<div>を使用するからです。

例えば、左のような1列のようなレイアウトを2列のレイアウトに変更する時にも<div>でのグループ化をします。

1列の縦のレイアウト→

2列の横並びレイアウト

web兄さん
この横並びレイアウトは次の「class属性とid属性」の講座で解説します

❸divの書き方のルール

先ほどの<span>は入れ子にできるタグに制限がありましたよね。(文字と画像とリンク, etc.)

しかし<div>は、ほぼ全ての要素を入れ子にすることができます。

以下にOK例とNG例のコードをそれぞれ書いてみました。

<!-- NGな例① -->
<ul>
    <div>
        <li></li>
        <li></li>
        <li></li>
    </div>
</ul>

<!-- NGな例② -->
<h1>これは<div>見出し</div>です</h1>
<p>これは<div>見出し</div>です</p>

<!-- OKな例① -->
<div>
    <h1>これは見出し</h1>
    <p>これは文章</p>
</div>

<!-- OKな例② -->
<div>
    <h1>見出し</h1>
    <img src="sample.jpg">
    <div>
        <p>これは文章</p>
        <p>これは文章</p>
        <p>これは文章</p>
    </div>
</div>

先にNG例を解説します。

<li><div>の入れ子にすることができません。これは<ul>の直下には<li>が来なければいけないというルールがあるからです。

また「NGな例②」にある通り、<h1><p>の入れ子として<div>を書くことはできません。

とは言え、これは<div>側のルールというよりは<h1><p>タグに関する入れ子のルールです。


次にOKな例です。

<span>ではできなかった、<h1><p>を入れ子にすることができていますよね。

また、<span>でできていた文字を入れ子にしたり、リンクや画像を入れ子にしたりすることも、もちろん可能です。

spanとdivの違いと使い分け

ここまでの説明を整理すると<div><span>の使い分けは以下のようにまとめることができます。

spanの使い方
divの使い方

実際のコーディングでは<span>は文字のみを入れ子にすることが多く、<div>は逆に文字のみを入れ子にすることが少ないので、今回はざっくりと上記のイメージで使い分けを理解してもらえればOKです。


web兄さん
ここからはこれまでの理解を深めるために問題を出題しますので、ケースごとに<span><div>どちらを使うか考えてみましょう。

【問題1】

<??>に入るのはspanとdivどっち?

「<??>」に入るタグはどちらでしょうか?

正解を見る

正解は<div>です。

<span><h1><p>を入れ子にすることはできません。

【問題 2】

<??>に入るのはspanとdivどっち?

第2問目です。

「<??>」に入るタグはどちらでしょうか?

正解を見る

正解は<div>です。

入れ子が複雑になっているので迷いそうですが、<p>を入れ子にしているので<div>だということがわかりますよね。

【問題 3】

<??>に入るのはspanとdivどっち?

第3問目です。

最後の問題は2つ「<??>」があります。それぞれ入るタグはどちらでしょうか?

正解を見る

1つ目の正解は<span>です。文字を囲うときこっちですよね。

2つ目は、引っ掛けクイズでごめんなさい。

実は<span>でも<div>でもどちらでも良いです!

<a><span>でも<div>でも囲うことはよくあるのでHTMLのルールとしてはどちらも正解であり、経験によってケースバイケースで使い分けを行います。(このあたりの感覚は今後勝手に養われます)

【注意】divとspanは“意味を持たない”タグ

pであれば段落」「h1であれば見出し」「strongであれば強調」のように

通常タグは意味を持っていますがdivspanは他のタグと異なり「意味を持たない」タグです。

そのため、以下のようにdivのみで文章をマークアップしてもh1pと同じような見た目で表示することができます。

<div>
    <div>HTML</div>
    <div>タグで文書構造を定義</div>
    <div>数十種類のタグがある</div>
</div>

HTML

タグで文書構造を定義

数十種類のタグがある

しかし、人間から見た文章は同じでも、Googleのロボットから見たこれらの文章の解釈は少し異なります。

h2pなど適切にタグが使用されている場合はページ内の情報の優先度が正確に伝わるため、GoogleにわかりやすいWEBページを作ることができます。

しかし、divだけで書かれた場合、全て同じような文章と捉えられてしまいます。

全てdivで書かれたコードの解釈
h2やpなど適切にタグが書かれたコードの解釈

一見、「CSSでちゃんと見た目を揃えればいいんじゃないの?」と思ってしまいそうですが、Googleに正確に情報を伝えることは「SEO対策(今後学習することになる検索順位を向上させるスキル)」に関わってきます。

spanにも同様のことが言える

spanもタグ自体には「意味」を持ちません。

そのため、文字の背景色を変えたいだけなど見た目をコントロールしたいだけならばspanを使用しCSSで背景色を適用させますが、Googleへ向けて強調して伝えたいという意図があるのであれば、strongを使ってCSSを適用させます。

<!-- 文字に装飾をつけたい場合 -->
<p>これは<span>背景色を変えたい</span>だけ</p>

<!-- 文字をGoogle向けに強調したい場合 -->
<p>これは<strong>強調</strong>だ!</p>
span{
  background-color: #b0e2ff;
}

strong{
  background-color: #fdffbe;
}

これは背景色を変えたいだけ

これは強調だ!

web兄さん
つまり、文章として意味があるのであれば、意味に適したタグを使用し、レイアウトや装飾の都合上タグを使う場合はdivspanを使うということです!

講座のおさらい

divとspanについておさらいをしましょう

  • <span>は要素の指定した部分にのみCSSを適用したい時に使用する
  • <span>は入れ子にできる要素に限りがあり、よく入れるのは文字、リンク、画像
  • <div>は複数の要素をグループ化してまとめてCSSを適用したい時に使用する
  • <div>はほとんどのタグを入れ子にできるが、<h1><p><ul>といった要素の中に入れることはできない

今回<div><span>の入れ子にできるタグや、<div><span>を入れ子にできないタグなど詳しく知りたい方もいるかと思います。