HTML <span>タグ：正しい理解と使い方

定義と使い方

<span>タグは
それ自体には特別な意味をまったく持たないインラインコンテナであり、単純なテキストやインラインコンテンツなどにスタイルや属性、スクリプトを適用するための範囲としてラップするタグです。

<span>の「span」という単語は、英語で「範囲」または「間隔」を意味します。

<span>タグ自体には特別な意味はまったくありませんが、次の目的で使用されます。

スタイルを適用するためのCSSセレクタとして使用したり、
HTML属性を適用するための範囲を示す目的で主に使用されたり、
JavaScriptで特定の部分を選択したり操作するために使用したり、
視覚的なスタイルのみを目的とした装飾用タグとして使用されます。

意味を持つテキストに関連するマークアップ（例えば、<del>や<ins>）を使用できない状況に限って、<span>タグを使用してください。

`<span>`タグと`<div>`タグの違い

<div>タグも<span>タグと同様に、それ自体には特別な意味をまったく持っていません。
ただし、用途はそれぞれ異なります。

divタグとspanタグの違いの比較
`<div>`	レイアウト（ブロックやセクション）を構成したり、グループ化されたマークアップやコンテンツにスタイルやJavaScriptを適用するためのコンテナ、またはHTML属性を適用するための範囲を示すコンテナとして使用されます。
`<span>`	単純なテキストやテキストに関連するマークアップなどのフレージングコンテンツにスタイルやJavaScriptを適用するための範囲をラップしたり、HTML属性を適用するための範囲をラップする目的で使用されます。

<div>タグは
レイアウトを作成したり、コンテンツを分割する（division）ためのコンテナとして使用されるタグです。

<span>タグをレイアウト（ブロックやセクション）の構成に使用しないでください！
<div>タグのほうがより適切です。

活用例

<span>タグは、Webサイトを制作する際に最も多く使用されるタグの一つです。
さまざまな活用例を通して、<span>タグの使用方法について見ていきましょう。

単純なテキストにスタイルを適用する

次は、単純なテキストにスタイルを適用するための範囲を示す目的で<span>タグを使用した例です。

HTML

<p>
    光の三原色は
    <span style="color: red;">赤</span>、
    <span style="color: green;">緑</span>、
    <span style="color: blue;">青</span>で
    構成されています。
</p>

HTML属性を適用する

次は、HTML属性を適用するための範囲を示す目的で<span>タグを使用した例です。

コード補足説明
lang属性は、要素のコンテンツおよびテキストを含むすべての要素属性に対する既定の言語（language）を指定します。

上記の例は、Webページに別の言語で記述された内容が含まれている場合、その内容を囲む要素にlang属性を追加することを示しています。

JavaScriptで特定の部分を選択または操作する

JavaScriptを使用してHTMLの特定の部分を選択したり操作したりする必要がある場合があります。
<span>タグは特別な意味を持たないため、スクリプト用の範囲としてラップするのに適しています。

HTML

<p>
    JavaScriptで選択または操作できる
    <span id="target-span" style="background-color: gold;">特定の部分が</span>
    あります。
</p>
<button type="button" id="target-span-btn">テキストを変更する</button>

<script>
    // JavaScriptを使用して、ボタンをクリックすると特定のspan要素のテキストを変更します。
    const btn = document.getElementById("target-span-btn");
    
    btn.addEventListener("click", () => {
        const targetSpan = document.getElementById("targets-pan");
        targetSpan.innerText = "変更されたテキストが";
    });
</script>

視覚的なスタイルのみを目的とした装飾用タグ

<span>タグはそれ自体に特別な意味をまったく持たないため、スタイルのみを目的とした視覚的な装飾用タグとして使用するのに適しています。

次は、<span>タグをスタイルのみを目的とした視覚的な装飾用タグとして活用した例です。
<button>タグのテキストの横に、視覚的な装飾として矢印を表示しています。この矢印自体には特別な意味はありません。このような場合、スタイルのための装飾として<span>タグを使用するのが適切です。

HTML

<button type="button" id="toggle-button">
    <!-- 単純なテキストにスタイルを適用するために使用 -->
    <span class="toggle-button-text">クリックする</span>
    <!-- 視覚的なスタイルのみを目的とした装飾用タグとして使用：矢印を表示 -->
    <span aria-hidden="true" class="toggle-button-arrow"></span>  
</button>

aria-hidden="true"は、スクリーンリーダーなどの支援技術に関する属性で、aria-hidden属性の値がtrueに設定されている場合、その要素および内部に含まれるコンテンツは支援技術から検出されなくなります。上記の例では、<span>タグが視覚的な装飾としてのみ使用されているため、Webアクセシビリティ向上の目的で使用されています。

CSS

#toggle-button {
    padding: 0.5em 1em;
    background: none;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-button-text {
    margin-right: 1em;
}
.toggle-button-arrow { /* 矢印を表示する */
    display: inline-flex;
    width: 0.7em;
    height: 0.7em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(-45deg) translateY(-0.3em);
}