<span> インラインレベルの汎用的な範囲を指定する

<span>タグの説明

<span>は、インラインレベルの汎用的な範囲を指定する際に使用します。これ自体は特に意味を持っている訳ではありませんが、ある特定の範囲をまとめてスタイルを指定したい場合などに重宝します。

逆説的に言うと<span>は、何の意味も持たせたくない部分をグループ化する時に役立ちます。基本的にHTMLは、文字列に文章構造的な意味を付与するメタ言語であるため、このような無意味な要素も必要となるのです。

ウェブサイトのコーディングに慣れてくれば慣れてくるほど、<span>は<div>と共に頻繁に使うタグとなるでしょう。

<span>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
• 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも許可されています。

<span>に指定できる主な属性

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<span>の使い方とサンプル

最もシンプルな使い方は、ある要素の中で一部分だけスタイルを変えたい場所を<span>で囲うものです。特に、サイト全体を通して一時的にしか使わないスタイルは、共通のファイルに持たせておく必要性も低いので、特に意味付けをしない<span>の出番と言えるでしょう。

<p>
ある文章の中で<span style="color:#f00;">視覚的な効果を与えたい箇所<span>を囲います。
</p>

また、親要素に指定されたスタイルを上書きしたり打ち消したい場所に活用できます。以下の例では、リンクをブロックレベルにしてボタンを作り出した祭に、その内容に継承されるスタイルの一部を上書きしています。

<div class="sample1">
	<a href="#####">メニューボックス
	<span>スタイルを変える箇所<span>
	</a>
</div>

.sample1 a {
	display: block;
	width: 240px;
	padding: 0.3em;
	border: 1px solid #ddd;
	font-size: 1.2em;
	font-weight: bold;
}
.sample1 a:hover {
	background: #ddd;
}
.sample1 span {
	display: block;
	font-size: 0.8em;
	font-weight: normal;
	color: #333;
}