div要素とspan要素の違いは？使い分け方法紹介！

HTMLやCSSを使って、装飾をすることはできますが、

同じ装飾を広範囲にしなければいけない場合は、

少し面倒ですよね。

そのときに活躍するのが「div要素」と「span要素」です！

特定の範囲のグループ化

特定の範囲をグループにするには「div要素」と「span要素」があります。

その違いと使い分けについてご紹介します。

div要素

・<div></div>

<div></div>で囲んだ部分をひとつのグループとして扱うことができます。

特定の範囲にスタイルを適用する場合に使用します。

div要素はブロックレベル要素なので、前後が改行されます。

例）

・CSSの記述

.pink {
color:#ff0066;
}

※クラス名「pink」、スタイル「文字色を#ff0066（ピンク）」

・HTMLの記述

<div　class”pink”>
<h2>div要素について</h2>
<p>div要素の使い方の例を紹介しています。</p>
<p>ひとつのまとまりを一度に指定できます</p>
</div>

※divに囲まれた部分のすべて文字色がピンク（#ff0066)になります。

span要素

・<span></span>

<span></span>で囲んだ部分をひとつのグループとして扱うことができます。

特定の範囲にスタイルを適用する場合に使用します。

span要素はインライン要素です。

例）

・CSSの記述

.pink {
        color:#ff0066;
}

※クラス名「pink」、スタイル「文字色を#ff0066（ピンク）」

・HTMLの記述

<span　class”pink”>
<h2>div要素について</h2>
<p>div要素の使い方の例を紹介しています。</p>
<p>ひとつのまとまりを一度に指定できます</p>
</span>

※divに囲まれた部分のすべて文字色がピンク（#ff0066)になります。

違いはどこ…？

お気づきですか？

divもspanも使い方は一緒です。

では何が違うのか？

説明にも書いていますが、

・div要素は「ブロックレベル要素」

・span要素は「インライン要素」

です！

つまり、前後に改行が入るか、入らないかです。

例）

・CSSの記述

.pink {
        color:#ff0066;
}

※クラス名「pink」、スタイル「文字色を#ff0066（ピンク）」

・HTMLの記述

<p>今日は<span class=”pink>”晴天</span>です！</p>
<p>今日は<div class=”pink>”晴天</div>です！</p>

・ブラウザでの表示

今日は晴れです！
※span要素で指定

今日は

晴れ

です！

※div要素で指定

1つのまとまりとして独立させる場合はdiv要素を使用し、

文の途中やスタイルをならべて表示したいときはspan要素を使用します。

便利なdiv要素の応用！

私が使っているホームページ作成ツールには、

「テンプレート」という便利なものがあって、

文字装飾にとても役に立っています。

テンプレートの部分のソースを見てみると、

なんと「div要素」でした！

はて、どういうことなのでしょう？

テンプレート名は「赤・チェックボックスアイコン」となっており

こんな風に装飾ができます。

ぼかしてしまっていますが、

特徴を箇条書きにしています。

テンプレートはチェックボックスアイコンの後に続けて文章が書けるテンプレートです。

この一番上の行のHTMLを抜き出してみると…

<div class=”icn_ckeck_red”>
<span style=”font-size: medium; line-height: 1.1;”><strong>○○○…</strong></span>
</div>

とあります。

分解して解説すると…

今回の記事になんてぴったりの内容なんでしょうか(笑)

まだ説明していない部分として

「style属性」と「line-height」がありますね。

style属性は、HTMLの中で要素にスタイルを指定する方法です。

私の持っているテキストには、スタイルとHTMLを分けて見やすくするというhtml4.01の目的から外れているから、

適切ではないと記述がありましたが、読めればOK！笑

style属性を使って、文字サイズとインラインボックスの高さを指定しています。

インラインボックスは行の高さです。

この場合「1.1」と指定されていますが、

これはデフォルトの高さ×110％と同じ意味です！

さて、テンプレートの続きです。

HTMLを解読するとテンプレートの部分が

“icn_ckeck_red”という名前のスタイルを適用したdiv要素ということがわかりました。

今度はCSSを見てみます。

CSSを抜き出してみると…

.icn_ckeck_red {
background-image: url(/css/images/check_red.png);
background-repeat: no-repeat;
min-height: 17px;
line-height: 17px;
padding-left: 27px;
margin: 10px 0px 12px 10px;
}

とありました。

分解して解説します。

パディングとマージンは、空白のことです。

要素の周りに隙間をあける指定ですね。

これの説明はまた今度…(笑)

それより大切なのは、

「background-image」の部分です。

ここにurlでファイルが指定されています。

そのファイルがこれ！

見たことありますね！

そう！テンプレートに使われている

文章の頭についていたチェックアイコンです。

つまり、テンプレートとしていますが、

実際は、このチェックボックスを表示するスタイルが指定されていただけなのです！

これを利用すれば、テンプレートなんて便利な機能がない場合でも、

スタイルで先頭にアイコンが来るようなスタイルを作っておけば、

ホームページ上でいつでも簡単に装飾ができるということです！

はじめは上記に記載したCSSやHTMLを

アイコンのURLだけを変更してそのままコピペして、

表示されるか試してみましょう！

その後、パディングや行の高さなども変更していくと、

より理想の形を作れると思います＾＾

今回は非常に長くなりましたが、

便利なdiv要素、span要素のお話でした！

【個人的なお話】

長女が新体操とピアノを習っているのですが、

ピアノの先生は私も3歳から習っているので結構いいお歳。

小学校からの個人レッスンもお願いするつもりが、

「私もういっぱいいっぱいなのよー！」って断られてしまいました…

「あなたが教えなさいよ！」って言われたけど、

さすがに教えるのはむりー(;’∀’)

娘が先生にピアノ辞めたくないって泣いたそうで、

先生も揺らいでしまい(笑)、

4月末に電話するわ！と言われたけど、どうなることやら…

そのことで頭がいっぱいでドキドキしています…

どうか習わせてくださいませ！！！