タイトル: span要素
SEOタイトル: HTML span 要素完全ガイド (インライン汎用コンテナ / div との違い / アクセシビリティ)
| この記事の要点 |
|
とは
は HTML のインライン汎用コンテナです。要素自体には意味がなく、CSS でスタイルを当てたい・JavaScript で部分操作したい時に、テキストの一部を囲むために使います。
今日の気温は35度です。
ステータス: 完了
これは Hello World と表示されます。
カート数: 0
vs の決定的な違い
項目 カテゴリ インライン要素 ブロック要素 改行 しない (前後に流れる) する (前後に改行) 幅・高さ指定 デフォルトでは効かない 効く margin (上下) 効かない 効く padding 左右は効く、上下は背景は付くが行高に影響しない 効く 子要素 インライン要素のみ (基本) 何でも入る 使い所 テキスト中の部分強調 セクション / レイアウト枠
これは仕様違反
これは OK
幅は効かない
効く
セマンティック要素を優先する
「意味」がある場合は で誤魔化さず、適切な HTML 要素を使うとアクセシビリティ・SEO・LLMO が向上します:
用途 非推奨 推奨 強い強調 (重要) 強調 (語気) マーカー (蛍光ペン) コード キーボード入力 — 変数 — 削除済テキスト 追加テキスト — 略語 — 引用 — 時刻 —
JavaScript からの動的操作
カート内: 0 個
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: カート: {count} 個
// Vue: カート: {{ count }} 個
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 等を付与します。
重要なお知らせ
状態: 送信中
多言語 / 双方向テキスト:
ユーザー名: إيان さんが投稿しました
これは 逆順に表示される 部分
英語の Hello World と中国語の 你好
FAQ
Q: と はどう違う？
A:
は段落 (ブロック・意味あり)、 はインライン・意味なし。文章なら 、文中の一部装飾なら 。
Q: 何個までネストして良い？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。
Q: SEO に影響する？
A: 自体は中立。ただし を で代用すると検索エンジンが重要キーワードを認識しにくくなります。
| 項目 | ||
|---|---|---|
| カテゴリ | インライン要素 | ブロック要素 |
| 改行 | しない (前後に流れる) | する (前後に改行) |
| 幅・高さ指定 | デフォルトでは効かない | 効く |
| margin (上下) | 効かない | 効く |
| padding | 左右は効く、上下は背景は付くが行高に影響しない | 効く |
| 子要素 | インライン要素のみ (基本) | 何でも入る |
| 使い所 | テキスト中の部分強調 | セクション / レイアウト枠 |
これは仕様違反
これは OK
幅は効かない
効くセマンティック要素を優先する
「意味」がある場合は で誤魔化さず、適切な HTML 要素を使うとアクセシビリティ・SEO・LLMO が向上します:
| 用途 | 非推奨 | 推奨 |
|---|---|---|
| 強い強調 (重要) | | |
| 強調 (語気) | | |
| マーカー (蛍光ペン) | | |
| コード | | |
| キーボード入力 | — | |
| 変数 | — | |
| 削除済テキスト | | |
| 追加テキスト | — | |
| 略語 | — | |
| 引用 | — | |
| 時刻 | — | |
JavaScript からの動的操作
カート内: 0 個
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: カート: {count} 個
// Vue: カート: {{ count }} 個
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 等を付与します。
重要なお知らせ
状態: 送信中
多言語 / 双方向テキスト:
ユーザー名: إيان さんが投稿しました
これは 逆順に表示される 部分
英語の Hello World と中国語の 你好
FAQ
Q: と はどう違う？
A:
は段落 (ブロック・意味あり)、 はインライン・意味なし。文章なら 、文中の一部装飾なら 。 Q: 何個までネストして良い？ Q: SEO に影響する？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。
A: 自体は中立。ただし を で代用すると検索エンジンが重要キーワードを認識しにくくなります。