<span>
<span> は HTML の要素で、記述コンテンツの汎用的なインラインコンテナーであり、何かを表すものではありません。スタイル付けのため（class または id 属性を使用して）、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 <span> は <div> 要素ととても似ていますが、 <div> がブロックレベルの要素であるのに対し、 <span> はインラインレベルの要素です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| HTMLSpanElement インターフェイスは span 要素を表し、 HTMLElement から派生していますが、それ以外のプロパティやメソッドを追加していません。 | 15 | 12 | 1 | 6 | 18 | 6 |
基本構文
HTML
<p>Displays <span style="color: red">part of</span> the text <span style="color: red">in red</span>.</p>
<p>Price: <span class="price">¥1,200</span></p>ライブデモ
Span and semntickelement. Compare Usage
meaning that exists case is semntickelement use, and only span.
プレビュー全画面表示
実務での使いどころ
-
<span> の活用
<span> は HTML の要素で、記述コンテンツの汎用的なインラインコンテナーであり、何かを表すものではありません。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。