Yugien - 遊戯苑
テーマ

HTML

この記事では、文章の一部をまとめて装飾やJavaScriptの対象にするHTMLのspan要素と、divとの違いを説明します。

The HTML <span> element is a generic inline container for phrasing content, commonly used as a hook for styling or scripting without adding semantic meaning.

span

<span> は、文章の一部を「意味を増やさずに」包むための汎用インライン要素です。テキストの一部だけ色を変える、アイコンと文字をまとめる、JSやCSSのフック（class/data-属性）を付ける、といった目的で使います。

このページでできるようになること

まずは直感：<span> って何？

ざっくり言うと、<span> は「文章の一部をつまんで、目印を付けるための薄いラップ」です。レイアウトの箱ではなく、テキストの一部を狙って扱う場面で出番があります。

正確な定義（仕様に沿った説明）

何のために存在するか

<span> は、意味を持たない（セマンティクスを追加しない）汎用のインライン要素として、文章中の一部をグルーピングするために用意されています。

何に使うか（典型）

CSSの対象にしたい
文章の一部だけ色/背景/下線などを付ける（装飾のフック）
JSの対象にしたい
特定の語句に data-* を付け、クリックで説明を出すなど（振る舞いのフック）
テキストとアイコンを一まとまりにしたい
アイコン＋ラベルを「同じ塊」として扱い、余白や整列を揃える

入れられる内容（重要）

<span> の中には、基本的に文章の流れ（テキストと同列）に置ける内容を入れます。大きな区切り（段落やセクションなど）を入れる箱ではありません。

最小サンプル：まず動かす（部分的に装飾する）

例1：文章の一部だけ目立たせる

合言葉は NEKO-2026 です。

見た目はCSSで変えるだけで、HTMLの意味は増えません。

例2：ラベル（ピル）として扱う

ステータス：公開中

NEW のような短い表示にも使えます。

HTML

<p>合言葉は <span class="demoSpanMark">NEKO-2026</span> です。</p>
<p>ステータス：<span class="demoSpanPill">公開中</span></p>

CSS

.demoSpanMark {
    background: rgba(255, 230, 120, 0.6);
    padding: 0.05em 0.25em;
    border-radius: 0.25em;
}

.demoSpanPill {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    border: 1px solid rgba(120, 120, 120, 0.45);
}

基本の書き方（最短の型）

まずは「狙いたい部分だけを <span> で包み、class を付ける」を型として覚えると速いです。

HTML

<p>
    受付番号：
    <span class="ticketId">A-1204</span>
</p>

CSS

.ticketId {
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
}

<div> と何が違う？（インライン vs ブロック）

<span>
インライン。文章の流れの中で部分的に包むのが得意。
<div>
ブロック。まとまり（レイアウトや段落のグループ）を作るのが得意。

よくある事故：クリックできる部品にしたくなる

<span> は見た目を変えやすいため、つい「ボタンっぽい見た目」にしてクリック処理を付けたくなりますが、基本は <button> / <a> を使います。

避けたい <span> をボタン扱い

保存（見た目はボタンでも、キーボード操作などで事故りやすい）

推奨：<button> を使う

（標準でフォーカス・Enter/Space・A11yが整う）

属性は何が使える？（覚え方）

<span> は汎用要素なので、基本は グローバル属性（id/class/lang/title/data-* など）を中心に使います。

HTML

<p>
    <span lang="en" title="HyperText Markup Language">HTML</span> を学ぶ
    （<span data-level="beginner">初級</span>）
</p>

試験で狙われやすい正誤ポイント

<span> は汎用のインライン要素である
○（意味を持たないインラインのコンテナ）
<span> はブロック要素の代わりに使ってよい
×（段落やセクションの箱としては不適。目的に合う要素を選ぶ）
<span> に意味はないので、強調したい語句にも使うべき
×（強調・重要など意味が言えるなら <em>/<strong> 等が先）

関連要素（迷ったときの候補）

<div>
汎用のブロック要素。まとまり（箱）を作りたいとき。
<strong>
重要度を上げたいとき（意味あり）。
<em>
強調したいとき（意味あり）。
<mark>
検索ヒットや注目箇所のハイライト（意味あり）。

FAQ

<span> をたくさん使うのは悪い？
悪いわけではありませんが、「意味がある要素で書けるのに <span> で済ませる」と、後から読む人が意図を読み取りにくくなります。まず意味のある要素を検討し、それでも当てはまらない部分に限定して使うのが安全です。
<span> をクリックできるようにしてもいい？
基本は <button> / <a> を使います。どうしても <span> を使う場合は、キーボード操作やARIAを含めた設計が必要になります。
<span> の中に <div> を入れてもいい？
避けます。<span> は文章の流れに置く想定なので、大きなブロックの箱は中に入れない方が安全です。