Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<span>
『span』はHTMLの汎用インラインコンテナ要素で、それ自体に意味を持たず、テキストの一部などインラインコンテンツをグループ化してスタイルや操作を適用するために使用します。
構文
<span>テキストの一部</span> <!-- classやidを指定してCSSやJavaScriptと連携 --> <p>価格は<span class="price">1,980円</span>です。</p>
主な属性
| 属性 | 概要 |
|---|---|
| class | CSSのクラスを指定します。スペース区切りで複数のクラスを指定できます。 |
| id | 要素を一意に識別するIDを指定します。ページ内で重複してはいけません。 |
| style | インラインCSSを直接記述します。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.price {
color: red;
font-weight: bold;
font-size: 1.2em;
}
.highlight {
background-color: yellow;
}
.badge {
display: inline-block;
background: #333;
color: #fff;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.8em;
}
</style>
</head>
<body>
<!-- テキストの一部に色を付ける -->
<p>特別価格：<span class="price">980円</span>（税込）</p>
<!-- テキストの一部をハイライト表示 -->
<p>この機能は<span class="highlight">最新バージョン</span>で追加されました。</p>
<!-- バッジラベル -->
<p>JavaScript <span class="badge">ES2023</span></p>
</body>
</html>
実行結果
インライン要素なので文の流れを保ったまま、特定の部分だけにスタイルが適用されます。
特別価格：980円（税込） ← 「980円」の部分だけ赤・太字・大きく表示 この機能は最新バージョンで追加されました。 ← 「最新バージョン」が黄色いハイライト JavaScript ES2023 ← 「ES2023」が黒背景の小さなバッジ表示
概要
『span』は『div』のインライン版といえる存在です。『div』がブロックレベルの汎用コンテナであるのに対し、『span』はインラインの汎用コンテナです。文章の流れを崩さずに一部分だけを装飾したり、JavaScriptで操作したりする際に活躍します。
『span』自体には視覚的なスタイルも意味も持ちません。CSSや『class』属性と組み合わせて初めて効果が出る要素です。テキストの一部を赤くしたい、特定の単語を太字にしたい、文字列をJavaScriptで動的に書き換えたいといった場面でよく使われます。
意味のある装飾には意味のある要素を優先して使用してください。強調したい場合は『strong』や『em』、コードを示す場合は『code』など、内容に合ったセマンティック要素が用意されています。それらでは対応できない汎用的なケースに『span』を使います。
対応ブラウザ
デスクトップ
Chrome49 以降 ○全バージョンで対応しています
Firefox57 以降 ○全バージョンで対応しています
Safari18 以降 ○全バージョンで対応しています
Edge80 以降 ○11 以前 ×
IE11 以前 ×
Opera48 以降 ○
14 以前 ×モバイル
iOS Safari18 以降 ○全バージョンで対応しています
Android Browser37 以降 ○4 以前 ×
Chrome Android36 以降 ○17 以前 ×
Firefox Android79 以降 ○3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする