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

divとspanの解説ページのアイキャッチ

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

CSSの解説ページのアイキャッチCSS(スタイルシート)とは? 入門者向けに CSS について徹底的に分かりやすく解説

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

id と class の解説ページのアイキャッチよりウェブデザインを CSS 設定する HTML の id / class 属性

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

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

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 タグの書き方

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

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 タグの要素が2つページに存在していることが確認できますね!

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>

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

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> はサイドバーとして画面の右側に配置することが出来ます。

divタグ要素のスタイルをサイドバーに設定した時の様子

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

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

divのwidth設定とfloat設定

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

スポンサーリンク

span

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

span とは

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

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

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

spanのイメージ

span タグの書き方

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

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

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

spanで範囲指定した結果(スタイルシートなし)

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

span により要素が囲まれる様子

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(色1, 色2) は色1から色2の間をグラデーションで表現するプロパティ設定値になります。

spanにスタイル設定した時の表示結果

span タグで囲った範囲のみ、class 属性を使って指定したスタイルが適用されていることがわかると思います。

例えば、よく使うフォントのサイズや色・背景設定などのスタイル設定を class 属性 に適用しておけば、<span class = “class名”> 〜 </span> で囲うだけで、囲った範囲の文字列にすぐにそのスタイル設定を適用することが可能です。

span に対してスタイル設定するのではなく class に設定するというところがポイントですね。class は自分の好きなだけ定義できますので(数に制限はあるかもしれませんが…)、class 数の分のスタイル設定を定義することができます。新たな自分専用のタグのように扱えるので便利ですよ!

まとめ

このページでは div と span について解説しました。

div や span 単体では特に意味のないタグですが、スタイルシートと組み合わせると div はページ全体のレイアウトを整えるのに便利なタグになりますし、span は文字列の装飾を行うのに便利なタグになります。

ウェブデザインを行うために必須のタグになりますので、div や span タグの使い方やスタイルの設定の仕方は是非身につけておきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です