タイトル: span要素
SEOタイトル: HTML span 要素完全ガイド (インライン汎用コンテナ / div との違い / アクセシビリティ)
| この記事の要点 |
|
とは
は HTML のインライン汎用コンテナです。要素自体には意味がなく、CSS でスタイルを当てたい・JavaScript で部分操作したい時に、テキストの一部を囲むために使います。
<!-- 基本: テキストの一部だけ色を変える -->
<p>今日の気温は<span style="color:red;font-weight:bold">35度</span>です。</p>
<!-- クラス付与でスタイル分離 -->
<p>ステータス: <span class="badge badge-success">完了</span></p>
<!-- 一部だけ別言語を示す -->
<p>これは <span lang="en">Hello World</span> と表示されます。</p>
<!-- JS から参照するための ID 付与 -->
<p>カート数: <span id="cart-count">0</span></p> vs の決定的な違い
項目 カテゴリ インライン要素 ブロック要素 改行 しない (前後に流れる) する (前後に改行) 幅・高さ指定 デフォルトでは効かない 効く margin (上下) 効かない 効く padding 左右は効く、上下は背景は付くが行高に影響しない 効く 子要素 インライン要素のみ (基本) 何でも入る 使い所 テキスト中の部分強調 セクション / レイアウト枠
<!-- ❌ NG: span の中にブロック要素 (HTML 仕様違反) -->
<span><div>これは仕様違反</div></span>
<!-- ✅ OK: div の中に span -->
<div><span>これは OK</span></div>
<!-- ❌ NG: span は改行しないので、ボックスにしたいなら div か display 変更 -->
<span style="width:200px;height:50px;background:red">幅は効かない</span>
<!-- ✅ OK: inline-block で span にも幅・高さを効かせる -->
<span style="display:inline-block;width:200px;height:50px;background:red">効く</span>
セマンティック要素を優先する
「意味」がある場合は で誤魔化さず、適切な HTML 要素を使うとアクセシビリティ・SEO・LLMO が向上します:
用途 非推奨 推奨 強い強調 (重要) <span class="bold"><strong>強調 (語気) <span class="italic"><em>マーカー (蛍光ペン) <span class="hl"><mark>コード <span class="code"><code>キーボード入力 — <kbd>変数 — <var>削除済テキスト <span style="text-decoration:line-through"><del> / <s>追加テキスト — <ins>略語 — <abbr title="...">引用 — <q> (短い)、<blockquote> (長い)時刻 — <time datetime="...">
JavaScript からの動的操作
<p>カート内: <span id="cart-count">0</span> 個</p>
<button onclick="addToCart()">追加</button>
function addToCart() {
const el = document.getElementById('cart-count');
el.textContent = parseInt(el.textContent) + 1;
el.classList.add('flash');
setTimeout(() => el.classList.remove('flash'), 500);
}
// React / Vue でも span は頻出
// React: <p>カート: <span>{count}</span> 個</p>
// Vue: <p>カート: <span>{{ count }}</span> 個</p>
display プロパティで挙動を変える
/* デフォルト: インライン */
.tag-inline { display: inline; }
/* インライン-ブロック: テキスト中に流れつつ幅・高さ指定可 */
.tag-ib {
display: inline-block;
width: 80px;
padding: 4px 8px;
background: #2563eb;
color: white;
border-radius: 4px;
text-align: center;
}
/* ブロック: div と同等 */
.tag-block {
display: block;
margin: 1em 0;
}
/* フレックス: 子要素を flex 配置 */
.tag-flex {
display: inline-flex;
align-items: center;
gap: 4px;
}
アクセシビリティ (Lighthouse / WAI-ARIA)
はデフォルトでアクセシビリティツリーに現れません。スクリーンリーダーで読み上げさせたい場合は role / aria-label 等を付与します。
<!-- ❌ アイコンだけだとスクリーンリーダーが認識できない -->
<span class="icon-trash" onclick="del()"></span>
<!-- ✅ ボタンとして認識させる -->
<button aria-label="削除" onclick="del()">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<!-- ✅ 装飾用 span は aria-hidden -->
<p><span aria-hidden="true">★</span> 重要なお知らせ</p>
<!-- ✅ ステータスを通知 -->
<p>状態: <span role="status" aria-live="polite">送信中</span></p>
多言語 / 双方向テキスト:
<!-- 言語混在で双方向アルゴリズム壊れ防止 -->
<p>ユーザー名: <bdi>إيان</bdi> さんが投稿しました</p>
<!-- 強制的に方向指定 -->
<p>これは <bdo dir="rtl">逆順に表示される</bdo> 部分</p>
<!-- lang 属性で言語明示 -->
<p>英語の <span lang="en">Hello World</span> と中国語の <span lang="zh">你好</span></p>
FAQ
Q: と はどう違う？
A:
は段落 (ブロック・意味あり)、 はインライン・意味なし。文章なら 、文中の一部装飾なら 。
Q: 何個までネストして良い？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。
Q: SEO に影響する？
A: 自体は中立。ただし を で代用すると検索エンジンが重要キーワードを認識しにくくなります。
| 項目 | ||
|---|---|---|
| カテゴリ | インライン要素 | ブロック要素 |
| 改行 | しない (前後に流れる) | する (前後に改行) |
| 幅・高さ指定 | デフォルトでは効かない | 効く |
| margin (上下) | 効かない | 効く |
| padding | 左右は効く、上下は背景は付くが行高に影響しない | 効く |
| 子要素 | インライン要素のみ (基本) | 何でも入る |
| 使い所 | テキスト中の部分強調 | セクション / レイアウト枠 |
<!-- ❌ NG: span の中にブロック要素 (HTML 仕様違反) -->
<span><div>これは仕様違反</div></span>
<!-- ✅ OK: div の中に span -->
<div><span>これは OK</span></div>
<!-- ❌ NG: span は改行しないので、ボックスにしたいなら div か display 変更 -->
<span style="width:200px;height:50px;background:red">幅は効かない</span>
<!-- ✅ OK: inline-block で span にも幅・高さを効かせる -->
<span style="display:inline-block;width:200px;height:50px;background:red">効く</span>セマンティック要素を優先する
「意味」がある場合は で誤魔化さず、適切な HTML 要素を使うとアクセシビリティ・SEO・LLMO が向上します:
| 用途 | 非推奨 | 推奨 |
|---|---|---|
| 強い強調 (重要) | <span class="bold"> | <strong> |
| 強調 (語気) | <span class="italic"> | <em> |
| マーカー (蛍光ペン) | <span class="hl"> | <mark> |
| コード | <span class="code"> | <code> |
| キーボード入力 | — | <kbd> |
| 変数 | — | <var> |
| 削除済テキスト | <span style="text-decoration:line-through"> | <del> / <s> |
| 追加テキスト | — | <ins> |
| 略語 | — | <abbr title="..."> |
| 引用 | — | <q> (短い)、<blockquote> (長い) |
| 時刻 | — | <time datetime="..."> |
JavaScript からの動的操作
<p>カート内: <span id="cart-count">0</span> 個</p>
<button onclick="addToCart()">追加</button>function addToCart() {
const el = document.getElementById('cart-count');
el.textContent = parseInt(el.textContent) + 1;
el.classList.add('flash');
setTimeout(() => el.classList.remove('flash'), 500);
}
// React / Vue でも span は頻出
// React: <p>カート: <span>{count}</span> 個</p>
// Vue: <p>カート: <span>{{ count }}</span> 個</p>display プロパティで挙動を変える
/* デフォルト: インライン */
.tag-inline { display: inline; }
/* インライン-ブロック: テキスト中に流れつつ幅・高さ指定可 */
.tag-ib {
display: inline-block;
width: 80px;
padding: 4px 8px;
background: #2563eb;
color: white;
border-radius: 4px;
text-align: center;
}
/* ブロック: div と同等 */
.tag-block {
display: block;
margin: 1em 0;
}
/* フレックス: 子要素を flex 配置 */
.tag-flex {
display: inline-flex;
align-items: center;
gap: 4px;
}アクセシビリティ (Lighthouse / WAI-ARIA)
はデフォルトでアクセシビリティツリーに現れません。スクリーンリーダーで読み上げさせたい場合は role / aria-label 等を付与します。
<!-- ❌ アイコンだけだとスクリーンリーダーが認識できない -->
<span class="icon-trash" onclick="del()"></span>
<!-- ✅ ボタンとして認識させる -->
<button aria-label="削除" onclick="del()">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<!-- ✅ 装飾用 span は aria-hidden -->
<p><span aria-hidden="true">★</span> 重要なお知らせ</p>
<!-- ✅ ステータスを通知 -->
<p>状態: <span role="status" aria-live="polite">送信中</span></p>多言語 / 双方向テキスト:
<!-- 言語混在で双方向アルゴリズム壊れ防止 -->
<p>ユーザー名: <bdi>إيان</bdi> さんが投稿しました</p>
<!-- 強制的に方向指定 -->
<p>これは <bdo dir="rtl">逆順に表示される</bdo> 部分</p>
<!-- lang 属性で言語明示 -->
<p>英語の <span lang="en">Hello World</span> と中国語の <span lang="zh">你好</span></p>FAQ
Q: と はどう違う？
A:
は段落 (ブロック・意味あり)、 はインライン・意味なし。文章なら 、文中の一部装飾なら 。 Q: 何個までネストして良い？ Q: SEO に影響する？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。
A: 自体は中立。ただし を で代用すると検索エンジンが重要キーワードを認識しにくくなります。