8.

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

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

とは

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

編集
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要素

最近更新/作成されたページ