この記事の要点

<span> はインライン汎用コンテナ。意味を持たず、CSS / JS で部分的にスタイル・操作するための器 <div> はブロック要素 (改行を伴う)、<span> はインライン (テキスト中に埋め込む) 強調なら <strong> / <em>、目立たせる装飾的強調なら <mark>。意味があるならそちらを優先 display: inline-block で span にも幅・高さ・padding を効かせられる 多言語混在では <bdi> / <bdo> で双方向テキスト制御

<span> とは

<span> は 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>

<span> vs <div> の決定的な違い

項目	<span>	<div>
カテゴリ	インライン要素	ブロック要素
改行	しない (前後に流れる)	する (前後に改行)
幅・高さ指定	デフォルトでは効かない	効く
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>

セマンティック要素を優先する

「意味」がある場合は <span class="..."> で誤魔化さず、適切な 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)

<span> はデフォルトでアクセシビリティツリーに現れません。スクリーンリーダーで読み上げさせたい場合は 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>

多言語 / 双方向テキスト: <bdi> <bdo>

<!-- 言語混在で双方向アルゴリズム壊れ防止 -->
<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: <span> と <p> はどう違う？
A: <p> は段落 (ブロック・意味あり)、<span> はインライン・意味なし。文章なら <p>、文中の一部装飾なら <span>。

Q: 何個までネストして良い？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。

Q: SEO に影響する？
A: <span> 自体は中立。ただし <strong> を <span class="bold"> で代用すると検索エンジンが重要キーワードを認識しにくくなります。