CSS デザインを自由自在に行うための div / span タグ

このページにはプロモーションが含まれています

下のページでは CSS の概要や display プロパティについて解説しました。

CSS（スタイルシート）とは？入門者向けに CSS について徹底的に分かりやすく解説

また下のページでは id / class 属性について解説しました。

よりウェブデザインを CSS 設定する HTML の id / class 属性

id 属性と class 属性が使えるようになると、いきなりウェブデザインに欠かせない存在になるタグがあります。それは「div」と「span」タグです。

このページではこの「div」と「span」について解説します。CSS の display プロパティが大きく関わるタグですので、もし display プロパティについて知らない方は先に重要なプロパティ「display」を読んでいただくことをオススメします。

Contents

HTML の div / span タグの役割
div
span
まとめ

HTML の div / span タグの役割

「div」と「span」は要素としては範囲を指定するだけのタグです。基本的にタグはタグの種類によって役割を持っています。

a ：リンク
strong ：強調
h1 ：見出し
p ：　段落

一方「div」と「span」は範囲を指定するだけのタグであり、それ以上の意味を持ちません。でも、特に意味のないタグだからこそスタイルを自由に設定することができます。これにより、「div」と「span」は自分専用にカスタマイズした新たなタグのように扱うことが可能です。

さらに「div」や「span」タグに id 属性や class 属性を付加することにより、「div」や「span」に複数の種類のスタイル設定を行うことが可能です。ですので、ほぼ無限に自分専用にカスタマイズしたタグを作成することができます。

ここからはこの「div」と「span」を個別にどのようなものであるかを実際の使用例を挙げて解説していきたいと思います。

div

まずは div について解説します。

div とは

div は複数の要素をまたがって範囲指定を行い一つにまとめるタグです。div の displayプロパティは block ですので、display プロパティが block の要素でも inline の要素でもまとめて一つの要素として扱うことが出来ます。

div のイメージを図で表すと下のような感じです（黄色の要素は display が block、赤色の要素は display が inline であることを表しています）。

div タグの書き方

div での範囲指定は他のタグ（h1 や p など）と同様に <div> 〜 </div> で範囲指定を行います。

<div class = "upper">
    <h2>見出し 1</h2>
    <p>段落 1 - 1</p>
    <p>段落 1 - 2</p>
</div>
<div class = "lower">
    <h2>見出し 2</h2>
    <p>段落 2 - 1</p>
    <p>段落 2 - 2</p>
</div>

この HTML を CSS を読み込まない状態でウェブブラウザで開くと下のように表示されます。

div は意味のないタグですので表示結果には現れませんが、実際には下のように指定した要素を囲むブロックのような形でページに存在しています。

div を用いたスタイル設定

続いて下のような CSS ファイルを作成して、これを HTML から読み込ませてみましょう。

.upper {
	background-color : pink;
	margin : 10px;
	padding : 10px;
	border : solid 0.5px;
}

.lower {
	background-color : gold;
	margin : 10px;
	padding : 10px;
	border : solid 0.5px;
}

すると下のように表示が変わります。しっかりブロックとして div タグの要素が２つページに存在していることが確認できますね！

div に CSS でスタイルを設定することで、ブロック単位で見た目を設定することが可能です。これはページ全体のレイアウトを整える時なんかに重宝すると思います。

例えば下記のように HTML を記述すると、

<div class = "header">
    <h1>タイトル</h1>
</div>
<div class ="content">
    <h2>見出し 1</h2>
    <p>段落 1 - 1</p>
</div>
<div class = "right">
     <h2>見出し 3</h2>
    <p>段落 3 - 1</p>
    <p>段落 3 - 2</p>
    <p>段落 3 - 3</p>
</div>
<div class = "footer">
    <p>フッター</p>
</div>

下記のように複数のブロックにページが分割されることになります。

この各ブロックに対してサイズや位置を指定することでページ全体のレイアウトを整えることが出来ます。例えば下のような CSS ファイルを用意してこれを HTML から読み込ませます。

.header {
	background-color : skyblue;
	padding : 10px;
}

.content {
	/* 横幅を画面全体の 70% に設定 */
	width : 60%;
	/* 左側に配置 */
	float : left;
	padding : 10px;
	background-color : gold;
}

.right {
	/* 横幅を画面全体の 20% に設定 */
	width : 20%;
	/* 右側に配置 */
	float : right;
	background-color : palegreen;
	margin : 10px;
	padding : 10px;
}

.footer {
	/* float設定を解除 */
	clear: both;
	background-color : plum;
	padding : 10px;
}>/code>

表示結果は下のようになり、例えば <div class = “content”> 〜 </div> はサイドバーとして画面の右側に配置することが出来ます。

何をやっているかと言うと、まず class = “content” のグループの width プロパティを70%に設定して幅を狭めます。さらに float プロパティを left に設定してこのブロックを左に寄せます。これによりclass = “content” のグループの要素の右側にはスペースができます。

次に class = “right” のグループの width プロパティを 20 % に設定して幅を狭め、さらに float プロパティを right に設定してこのブロックを右に寄せます。これにより class = “content” のグループの右側のスペースに class = “right” のグループが入り込み、サイドバーとして画面に描画されることになります。

このように div を使用することであなた好みのページデザインを行うことが出来ますので、是非活用すると良いと思います！

span

続いて span について解説します。

span とは

span は複数の要素をまたがって範囲指定を行い一つにまとめるタグです。span の displayプロパティは inline ですので、display プロパティが block の要素は span の範囲内に含めることはできません。display プロパティが inline の要素のみを含めて範囲指定し、まとめて一つの要素として扱うことが出来ます。

また span の display はプロパティは inline ですので、span 要素の前後に改行が行われません。ですので文中の一部のスタイルを細かく設定するのに適しています。

span のイメージを図で表すと下のような感じです（黄色の要素は display が block、赤色の要素は display が inline であることを表しています）。

span タグの書き方

span タグも他の HTMLタグ同様で、 span 範囲の指定は <span> 〜 </span> で行います。

<p>昨日は<span class = "hot"><strong>暑</strong>かった</span>ですが、今日は<span class = "cold"><strong>寒</strong>い</span>です</p>

この HTML を CSS を読み込まない状態でウェブブラウザで開くと下のように表示されます。

span も div 同様に意味のないタグですので表示結果には現れませんが、実際には下のように要素内の指定した範囲が文中に存在しています。

span を用いたスタイル設定

続いて下のような CSS ファイルを作成して、これを HTML から読み込ませてみましょう。

.hot {
	color : red;
	font-size : 1.5em;
	background: linear-gradient(#FF8888, #FFFFFF);
}

.cold {
	color : blue;
	font-size : 1.5em;
	background: linear-gradient(#8888FF, #FFFFFF);
}

linear-gradient(色１, 色２) は色１から色２の間をグラデーションで表現するプロパティ設定値になります。