8.

HTML span 要素完全ガイド (インライン汎用コンテナ / div との違い / アクセシビリティ)

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

とは

は 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: 自体は中立。ただし で代用すると検索エンジンが重要キーワードを認識しにくくなります。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方(フッター・コピーライト・連絡先)
  11. main要素
  12. address要素