＜span要素＞ - 汎用的なインライン要素

公開日: 2017/02/09

span要素は意味を持たないインライン要素です。ある範囲に、意味付けはしたくないけどデザイン目的でclass属性を適用したい場合などに便利です。利用する時は、他により適切な要素がないかを確認するようにしましょう。

概要

名前: span
カテゴリー: Flow content; Phrasing content; Palpable content
配置できる場所: Phrasing contentが期待される場所。
コンテンツモデル: Phrasing content。
タグの省略: 開始タグも終了タグも省略できません。
DOM Interface: HTMLSpanElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-span-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

意味を持たないとは？

span要素はセマンティクス上の意味を持たない汎用なインライン要素です。例えば、「太文字にしたい」というデザイン上の理由でstrong要素を使ったとします。すると、ユーザーエージェントは該当箇所を「重要なコンテンツ」と解釈してしまいます。strong要素は「重要」という意味を持つ要素だからです。

間違ったstrong要素の使用例

<p>大分旅行は楽しかった。</p>

<p>私は…、<strong>生まれて初めて別府温泉に入ったのです。</strong></p>

<p>また行きたいな〜。</p>

デモを開く

こういう時に便利なのが、意味を持たないspan要素です。余計な意味を与えずに、任意の範囲をマークアップすることができるというわけです。マークアップする時に適切な要素がない場合は、最後の手段としてspan要素を使いましょう。なお、厳密に考えると下記の例は、強調を意味するem要素の方が適切かもしれません。が、ここでは「意味を持たない」というのがどういうことか理解していただければ大丈夫です。

span要素の使用例

<p>大分旅行は楽しかった。</p>

<p>私は…、<span class="aaa">生まれて初めて別府温泉に入ったのです。</span></p>

<p>また行きたいな〜。</p>

デモを開く

CSS

.aaa {
	font-weight: 700 ;
}

span要素とdiv要素の違い

同じ用途で使えるdiv要素があります。span要素はインライン要素なのに対して、div要素はブロック要素です。簡単に言うと、ブロック要素は前後に改行が入りますが、インライン要素は前後に改行が入りません。複数の段落をまとめて囲みたい時などはdiv要素を使うといいでしょう。

span要素とdiv要素の違い

<h1>div要素とspan要素の違い</h1>

<h2>悪い例</h2>
<span class="aaa">
	<p>複数の段落を囲む時はspan要素じゃなくdiv要素を使う。</p>
	<p>複数の段落を囲む時はspan要素じゃなくdiv要素を使う。</p>
</span>

<h2>良い例</h2>
<div class="aaa">
	<p>複数の段落を囲む時はspan要素じゃなくdiv要素を使う。</p>
	<p>複数の段落を囲む時はspan要素じゃなくdiv要素を使う。</p>
</div>

デモを開く

CSS

.aaa {
	border: 1px solid #000 ;
	color: red ;
}

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜span要素＞ - 汎用的なインライン要素</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/span/">
		<style>
			body {
				background-color: #fff ;
			}

			.aaa {
				color: red ;
			}
		</style>
	</head>
	<body>

<p>span要素は、意味を持たない汎用的なインライン要素です。意味付けを伴わずに、任意の範囲をマークアップしてスタイルなどを適用できます。</p>

<p>大分旅行は楽しかった。</p>

<p>私は…、<span class="aaa">生まれて初めて別府温泉に入ったのです。</span></p>

<p>また行きたいな〜。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/624/"> <meta charset="utf-8"> <title>【デモ】＜span要素＞ - 汎用的なインライン要素</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/span/"> </head> <body>

<p>span要素は、意味を持たない汎用的なインライン要素です。意味付けを伴わずに、任意の範囲をマークアップしてスタイルなどを適用できます。</p> <p>大分旅行は楽しかった。</p> <p>私は…、<span class="aaa">生まれて初めて別府温泉に入ったのです。</span></p> <p>また行きたいな〜。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } .aaa { color: red ; }

</style>

</script>