<span>タグの解説
<span>は、汎用的なインラインレベルのコンテナを作成したい場合に使用します。これ自体は特に何かの意味を表すものではありませんが、特定の範囲をまとめてCSS（スタイルシート）を適用したい場合などに重宝します。
逆説的に言うと、<span>は何の意味も持たせたくないコンテンツをグループ化するために役立ちます。基本的にHTMLは、文字列に文章的な構造や意味を与えるメタ言語であるため、このような無意味な要素も必要となるのです。
ウェブサイトのコーディングに慣れてくれば慣れてくるほど、<span>は<div>と共に頻繁に使うタグとなるでしょう。
<span>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素自体を入れ子にすることも許可されています。
<span>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<span>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<span>で囲った部分は属性を追加しない限り何の意味も持たず、CSSを追加しない限り見た目も変化しません。
text <span>text</span> text.
一般的に<span>はインラインレベルのコンテンツを扱う場合に適しています。ブロックレベルのコンテンツを扱う場合は<div>の使用を推奨します。CSSのdisplayプロパティを使えば、ブロックとインラインの振る舞いを変えられるのですが、原則として使い分けておくと管理がしやすくなります。
CSSを使って文字の装飾を行う
それでは、文章の一部を<span>で囲って文字を装飾してみましょう。意味の強調や重要性を表す場合は、専用のタグを使って下さい。文章の意味に何の変化も与えたくない場所にこそ、<span>の出番があります。
<p>
文章の中で<span style="color:#f00;">装飾したい箇所<span>を囲います。
</p>
逆に、親要素に指定された装飾を上書きしたい箇所にも活用できます。以下の例では、親要素の<p>に文字を青色にするスタイルが適用されています。それを子要素の<span>で初期値に戻しています。
<p>
文章の中で<span style="color:initial;">装飾を打ち消したい箇所<span>を囲います。
</p>
属性を追加して判定の材料に使う
<span>に指定できる属性を活用して、スタイルの判別を行う方法を紹介します。以下の例では、言語を示すlang属性の値が英語を表すenである場合に、英文用のフォントを表示するように指定しています。このやり方を応用すると、様々なモジュールとして<span>を活用できます。
<p>掲載しているコンテンツは <span lang="en">©Copyright<span> に帰属します。</p>
p {
font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
}
span[lang="en"] {
font-family: Helvetica Neue, Arial;
font-style: oblique;
}