【初心者向け】HTML spanタグの使い方入門 – CSSで一部を装飾する方法

By /

【初心者向け】HTML spanタグの使い方入門 – CSSで一部を装飾する方法

Webサイトやブログを作成する際、ただ文章を並べるだけでなく、特定の単語やフレーズを目立たせたり、色を変えたり、デザインを適用したりしたいと思ったことはありませんか？例えば、重要なキーワードを赤色にしたり、引用部分の背景色を変えたり、サービス名を特定のフォントで表示したりといった要望です。

このような「テキストの一部だけ」を装飾するために、HTMLとCSSは非常に強力なツールを提供してくれます。その中でも、HTMLの<span>タグは、テキストの特定の範囲を囲み、CSSを使ってスタイルを適用するための、非常に基本的で汎用的な要素です。

この記事では、Web制作が初めての方に向けて、<span>タグがどのようなもので、なぜ必要なのか、そしてCSSと組み合わせてどのようにテキストの一部を自由に装飾できるのかを、たくさんの具体例とともに徹底的に解説します。約5000語のボリュームで、<span>タグの使い方だけでなく、関連するHTMLとCSSの基本的な考え方についても深く掘り下げていきますので、ぜひ最後まで読んで、あなたのWebページをより魅力的にするための第一歩を踏み出しましょう！

1. Webページの見た目を決めるHTMLとCSSの基本をおさらい

<span>タグの使い方に入る前に、Webページの構造と見た目を司る二つの主要な言語、HTMLとCSSについて簡単に復習しておきましょう。

  • HTML (HyperText Markup Language): Webページの「骨組み」や「構造」を定義する言語です。見出し、段落、画像、リンクなど、コンテンツが何であるかをタグを使って示します。例えば、<p>タグは段落、<h1>タグは見出し（一番大きいもの）を表します。
  • CSS (Cascading Style Sheets): HTMLで作られたWebページの「見た目」や「デザイン」を指定する言語です。色、フォント、サイズ、配置、レイアウトなど、ページをどのように表示するかをスタイルルールとして記述します。例えば、color: red;は文字色を赤にする、font-size: 16px;は文字の大きさを16ピクセルにする、といった指定を行います。

つまり、HTMLで「ここに文章がありますよ」「これは見出しですよ」と構造を作り、CSSで「その文章はこんな色で、こんな大きさで表示してくださいね」「見出しはこのフォントで、中央に配置してくださいね」と見た目を整える、という関係です。

<span>タグは、このHTMLの「骨組み」の一部として登場し、特定のコンテンツ（主にテキスト）の範囲を区切る役割を果たします。そして、その区切られた範囲に対して、CSSを使ってスタイルを適用するのが一般的な使い方です。

2. なぜ<span>タグが必要なのか？ – 要素の種類と役割

HTML要素には、その性質によっていくつかの種類があります。中でも、Web制作の初心者が必ず理解しておくべき重要な区別が、「ブロックレベル要素」と「インライン要素」です。<span>タグを理解するためには、この違いを知ることが非常に重要です。

2.1 ブロックレベル要素とは？

ブロックレベル要素は、Webページ上で「一つのまとまり」や「ブロック」を形成する要素です。特徴としては：

  • 通常、内容の前後に改行が入ります。 つまり、一つのブロックレベル要素が終わると、次の要素は新しい行から表示されます。（例外的にCSSで表示方法を変えることも可能ですが、デフォルトの挙動です。）
  • 親要素の利用可能な幅いっぱいに広がろうとします。 特に指定がなければ、左右の端まで要素の領域が広がります。
  • 幅（width）や高さ（height）、上下左右のマージン（margin）やパディング（padding）をCSSで自由に指定できます。 これにより、要素のサイズや他の要素との間隔を細かく制御できます。

代表的なブロックレベル要素には以下のようなものがあります。

  • <div>（汎用的なブロック要素）
  • <p>（段落）
  • <h1> ～ <h6>（見出し）
  • <ul>, <ol>, <li>（リスト）
  • <table>（テーブル）

これらの要素は、ページの主要な構造やセクションを構成するのに使われます。

2.2 インライン要素とは？

インライン要素は、テキストの流れの中に組み込まれる要素です。ブロックレベル要素のように独立したブロックを作るのではなく、文章の一部として扱われます。特徴としては：

  • 内容の前後に改行が入りません。 テキストの流れの中に自然に配置され、他のインライン要素やテキストと横並びに表示されます。
  • 要素の幅は内容の幅（コンテンツの量）によって決まります。 親要素の幅いっぱいに広がることはありません。
  • 幅（width）や高さ（height）をCSSで指定しても、通常は反映されません。
  • 上下のマージン（margin-top, margin-bottom）は指定しても反映されません。 左右のマージン（margin-left, margin-right）は反映されます。
  • 上下のパディング（padding-top, padding-bottom）は指定すると見た目上は広がりますが、他の要素の配置には影響を与えないことがあります。 左右のパディング（padding-left, padding-right）は正常に機能します。

代表的なインライン要素には以下のようなものがあります。

  • <span>（汎用的なインライン要素）
  • <a>（リンク）
  • <strong>（重要性の強調）
  • <em>（強調、イタリック体になりがち）
  • <img>（画像）

これらの要素は、文章中の特定の単語やフレーズに意味を与えたり、装飾を適用したりするために使われます。

2.3 <span>タグはどこに位置する？

ここでようやく<span>タグの立ち位置が明確になります。<span>タグは、特別な意味を持たない「汎用的なインライン要素」です。

「特別な意味を持たない」というのがポイントです。例えば、<a>タグは「リンク」という意味を持ち、<strong>タグは「重要性の強調」という意味を持ちます。これに対して、<span>タグ自体は、囲んだ内容に対して何らかのセマンティック（意味論的）な意味を与えるものではありません。単に「こっからここまでをひとまとまりとして扱いたいな」という、主にCSSでスタイルを適用するための「印（しるし）」として使われます。

では、なぜこのような「意味を持たない」インライン要素が必要なのでしょうか？それは、テキストの一部だけを選択して、特定のCSSスタイルを適用したいというニーズがあるからです。

例えば、以下の段落があったとします。

“`html

今日の天気は晴れです。

“`

このコードでは、<p>タグ全体が段落ですが、その中の「晴れ」という単語だけを<span>タグで囲んでいます。これにより、「晴れ」という単語だけをCSSで選択し、例えば文字色を青に変えたり、背景色を黄色にしたりといった装飾が可能になります。もし<span>タグを使わずに「晴れ」だけを選ぼうとしても、HTMLの構造上、他の部分と区別する方法がありません。

このように、<span>タグは、HTML文書の構造や意味を変えることなく、CSSによる見た目の制御のためだけに、テキストの一部やインライン要素の集まりをグループ化するために使われる、非常に便利な要素なのです。

3. <span>タグの基本的な使い方

<span>タグの使い方は非常にシンプルです。装飾したいテキストや要素の開始位置に<<span>>を置き、終了位置に</span>を置くだけです。

基本構造:

html
<span>囲みたいコンテンツ</span>

例:

“`html

この文章の中で、<>ここだけ色を変えたい。

“`

このHTMLだけでは、<span>で囲んだ部分は何の変化もありません。なぜなら、前述の通り<span>タグ自体は「意味を持たない」ため、デフォルトのブラウザ表示では特別なスタイルが当たっていないからです。<span>タグが真価を発揮するのは、CSSと組み合わせて使うときです。

4. <span>タグとCSSを組み合わせる – 具体的な装飾方法

<span>タグにCSSでスタイルを適用するには、CSSの「セレクタ」を使って特定の<span>タグを選択する必要があります。スタイルを適用する方法はいくつかありますが、ここでは代表的な方法と、<span>タグによく使われるセレクタの種類を見ていきましょう。

CSSをHTMLに適用する方法は主に3つあります。

  1. インラインスタイル: HTMLタグのstyle属性に直接CSSを書く方法。手軽ですが、同じスタイルを複数の場所に適用するのが難しく、HTMLとCSSが混ざってコードが読みにくくなるため、特別な理由がない限り非推奨です。
    html
    <span style="color: red;">この文字は赤</span>
  2. 内部スタイルシート: HTMLファイルの<head>セクションに<style>タグを書き、その中にCSSを記述する方法。1つのHTMLファイル内でスタイルを完結させたい場合に便利です。
    html
    <head>
    <style>
    span {
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <p>この文章中の<<span>>spanタグ内のテキスト</<span>>は太字になります。</p>
    </body>
  3. 外部スタイルシート: CSSのコードを別ファイル（.cssという拡張子）に保存し、HTMLファイルの<head>セクションから<link>タグを使って読み込む方法。最も一般的で推奨される方法です。複数のHTMLファイルで同じCSSファイルを共有できるため、サイト全体のデザインを効率的に管理できます。

“`html

この文章中の<>spanタグ内のテキスト>は太字になります。

/ style.css /
span {
font-weight: bold;
}
“`

この記事では、主に内部スタイルシートか外部スタイルシートを想定して解説を進めます。

<span>タグを選択するためのCSSセレクタ

特定の<span>タグにスタイルを適用するために、CSSでは以下のようなセレクタをよく使います。

  1. 要素セレクタ (span): 全ての<span>タグを選択します。
    css
    span {
    color: blue; /* 全てのspanタグの文字色を青にする */
    }
    これはページ上の全ての<span>に適用されてしまうため、特定の場所だけにスタイルを適用したい場合は、より具体的なセレクタを使う必要があります。
  2. クラスセレクタ (.class-name): class属性に指定された特定のクラス名を持つ要素を選択します。<span>タグの装飾で最も一般的に使われる方法です。 複数の要素に同じクラス名を付けることで、同じスタイルを繰り返し適用できます。
    html
    <p>重要な部分は<span class="important">ここ</span>です。</p>
    <p>もう一つの重要な部分は<span class="important">あちら</span>です。</p>
    css
    .important {
    color: red; /* class="important"を持つ要素の文字色を赤にする */
    font-weight: bold; /* 太字にする */
    }
    このように、class属性を使うことで、目的に応じた名前（例: highlight, emphasis, warningなど）をつけて、複数の<span>に同じスタイルを簡単に適用できます。
  3. IDセレクタ (#id-name): id属性に指定された特定のIDを持つ要素を選択します。idは1つのHTMLページ内でユニーク（固有）である必要があります。特定のたった一つの要素にスタイルを適用したい場合に使いますが、<span>に対してIDを使うのは比較的まれで、ページ全体のユニークな要素（例: ヘッダーやフッター）に使うことが多いです。
    html
    <p>ユニークな単語は<span id="unique-word">これ</span>です。</p>
    css
    #unique-word {
    text-decoration: underline; /* id="unique-word"を持つ要素に下線を引く */
    font-style: italic; /* 斜体にする */
    }
    IDはページ内に一つだけなので、同じIDを複数の要素に使うことはできません。
  4. 子孫セレクタ (例: p span): 特定の親要素の子孫である要素を選択します。例えば、<p>タグの中にある<span>だけを選択したい場合に使います。
    html
    <div>
    <p>この段落の<<span>>span</<span>>だけスタイルを当てたい。</p>
    <p>こちらの段落の<<span>>span</<span>>もスタイルを当てたい。</p>
    </div>
    <div>
    <h2>こちらの見出し内の<<span>>span</<span>>には当てたくない。</h2>
    </div>
    css
    p span {
    background-color: yellow; /* pタグの中にある全てのspanタグに黄色い背景色を付ける */
    }
    このセレクタを使うと、<div>内の<h2>の中にある<span>にはスタイルが適用されません。

<span>タグにCSSスタイルを適用する際は、これらのセレクタを使い分けますが、特にクラスセレクタ（.class-name）が最も柔軟で管理しやすいため、頻繁に使われます。

5. 実践！<span>タグを使ったCSS装飾の具体例

それでは、実際に<span>タグとCSSを組み合わせて、テキストの一部を装飾してみましょう。いくつか代表的な例を挙げながら、HTMLとCSSのコード、そしてその解説を行います。

以下の例では、HTMLファイル（index.html）とCSSファイル（style.css）を分けて作成する「外部スタイルシート」方式で説明します。HTMLファイルの<head>セクションに<link rel="stylesheet" href="style.css">を忘れずに記述してください。

例1: 文字色を変える

特定の単語やフレーズを強調するために、文字色を変えるのは最も一般的な使い方の一つです。

HTML (index.html)

“`html






spanタグ 色の変更

spanタグを使った文字色の変更例

この文章の中で、赤くしたい部分があります。
また、青く表示したい単語もあります。
特に指定しない部分はデフォルトの色です。

もう一つの段落では、緑色にしたいフレーズを囲んでいます。


“`

CSS (style.css)

“`css
/ style.css /

/ color-red クラスを持つ要素の文字色を赤にする /
.color-red {
color: #ff0000; / 16進数カラーコードで赤を指定 /
}

/ color-blue クラスを持つ要素の文字色を青にする /
.color-blue {
color: blue; / 色の名前で青を指定 /
}

/ color-green クラスを持つ要素の文字色を緑にする /
.color-green {
color: rgb(0, 128, 0); / RGB値で緑を指定 /
}

/ 要素セレクタで全てのspanタグを選択し、スタイルを適用することも可能ですが、 /
/ この例ではクラスを使って特定のspanだけを選んでいます。 /
/ span { /
/ font-weight: bold; /
/ } /

/ pタグ全体の基本スタイル /
p {
line-height: 1.6; / 行間を少し広げて読みやすくする /
font-size: 16px;
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  1. HTMLでは、色を変えたいテキストの範囲を<<span>>タグで囲み、それぞれの<span>に異なるclass名を付けています（color-red, color-blue, color-green）。このようにクラス名を分けることで、CSSで個別にスタイルを適用できるようになります。
  2. CSSでは、.クラス名というセレクタを使って、対応するクラスを持つ<span>タグを選択しています。
  3. colorプロパティを使って、文字の色を指定しています。色の指定方法には、色の名前（red, blueなど）、16進数カラーコード（#ff0000）、RGB値（rgb(255, 0, 0)）など、いくつかの方法があります。
  4. このCSSを適用すると、class="color-red"の<span>内のテキストは赤に、class="color-blue"は青に、class="color-green"は緑になります。クラスを指定していない<span>や、<span>で囲まれていないテキストは、親要素やブラウザのデフォルトの色（通常は黒）で表示されます。

例2: 背景色を変える

テキストの一部にハイライトをつけたい場合などに、背景色を変更するのもよく使われる装飾です。

HTML (index.html)

“`html






spanタグ 背景色の変更

spanタグを使った背景色の変更例

この文の中で、重要なキーワードをハイライトしたい。
また、このフレーズは背景を灰色にしたい。

注意書き：この情報には十分ご注意ください。


“`

CSS (style.css)

“`css
/ style.css /

/ highlight クラスを持つ要素の背景色を黄色にする /
.highlight {
background-color: yellow;
padding: 2px 4px; / 背景色がテキストに近すぎる場合に少し余白を追加 /
}

/ background-gray クラスを持つ要素の背景色を薄い灰色にする /
.background-gray {
background-color: #eee; / 薄い灰色 /
padding: 2px 4px; / こちらも少し余白を追加 /
}

/ warning クラスを持つ要素の背景色と文字色を変更 /
.warning {
background-color: #fdd; / 薄い赤色 /
color: #c00; / 濃い赤色 /
font-weight: bold;
padding: 2px 4px;
}

/ pタグ全体の基本スタイル /
p {
line-height: 1.6;
font-size: 16px;
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  1. HTMLでは、背景色を変えたい部分を<span>で囲み、それぞれにhighlight, background-gray, warningというクラス名を付けています。
  2. CSSでは、.highlight, .background-gray, .warningというセレクタで各<span>を選択し、background-colorプロパティで背景色を指定しています。
  3. padding: 2px 4px;という指定を加えています。これは、背景色がテキストの直前・直後にぴったりくっつくと見栄えが良くないことがあるため、テキストと背景色の間に上下左右に少し余白（パディング）を入れるためです。
  4. warningクラスの例では、背景色だけでなく文字色や太字（font-weight: bold;）も組み合わせて、警告のような見た目を作っています。

背景色を変えるだけでも、テキストの一部を視覚的に目立たせることができます。

例3: フォントサイズと太さを変える

特定の単語を大きくしたり、太字にしたりして、重要度を視覚的に表現することも可能です。（ただし、意味として本当に重要な場合は<strong>タグを使う方がセマンティクス上は適切です。これについては後述します。）

HTML (index.html)

“`html






spanタグ フォント変更

spanタグを使ったフォントサイズの変更例

この文章中の少し大きめの文字や、
もっと大きな文字を試してみましょう。

また、太字にしたい部分や、
太字で大きい文字も簡単に指定できます。


“`

CSS (style.css)

“`css
/ style.css /

/ large-text クラスを持つ要素のフォントサイズを少し大きくする /
.large-text {
font-size: 1.2em; / 親要素のフォントサイズの1.2倍 /
}

/ extra-large-text クラスを持つ要素のフォントサイズをもっと大きくする /
.extra-large-text {
font-size: 20px; / 絶対値で指定 /
color: #c00; / おまけで色も変えてみる /
}

/ bold-text クラスを持つ要素を太字にする /
.bold-text {
font-weight: bold; / もしくは 700 など数値でも指定可能 /
}

/ bold-large-text クラスを持つ要素を太字かつ大きくする /
.bold-large-text {
font-weight: bold;
font-size: 1.5em;
color: blue;
}

/ pタグ全体の基本スタイル /
p {
line-height: 1.6;
font-size: 16px; / pタグのデフォルトフォントサイズ /
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  1. font-sizeプロパティで文字サイズを指定します。px（ピクセル）のような絶対単位や、em（親要素のフォントサイズに対する相対単位）、%（親要素のフォントサイズに対する割合）などの相対単位が使えます。相対単位を使うと、親要素のフォントサイズが変わったときに子要素も一緒に拡大縮小されるため、レスポンシブデザインなどで便利です。
  2. font-weightプロパティで文字の太さを指定します。normal（標準）、bold（太字）、または数値（100から900まで、通常は400がnormal、700がboldに相当）で指定できます。
  3. これらのプロパティも、他のCSSプロパティと同様に、複数のクラスで組み合わせて適用できます。例えば、bold-large-textクラスのように、太字と大きな文字サイズを同時に指定することも可能です。

例4: 複数の装飾を組み合わせる

これまでの例で見たように、<span>タグに複数のCSSプロパティを組み合わせて、より複雑な装飾を施すことができます。

HTML (index.html)

“`html






spanタグ 複数の装飾

spanタグを使った複数の装飾例

この特別なテキストは、
色、サイズ、背景、太さがすべてカスタマイズされています。

また、強調したい部分には、下線と斜体、そして色を付けています。

ボックスのような見た目にしたいインライン要素の例。


“`

CSS (style.css)

“`css
/ style.css /

/ special-style クラスを持つ要素に様々なスタイルを適用 /
.special-style {
color: white; / 文字色を白に /
background-color: #333; / 背景色を濃い灰色に /
font-size: 1.3em; / 少し大きく /
font-weight: bold; / 太字に /
padding: 3px 6px; / 内側の余白 /
border-radius: 4px; / 角を丸く /
}

/ emphasize クラスを持つ要素に強調スタイルを適用 /
.emphasize {
color: purple; / 文字色を紫に /
text-decoration: underline; / 下線を引く /
font-style: italic; / 斜体にする /
}

/ custom-box クラスを持つ要素をインラインブロックのように見せる /
.custom-box {
/ インライン要素ですが、paddingやborderを適用 /
background-color: lightblue;
border: 1px solid steelblue;
padding: 5px 10px; / 上下左右にパディング /
margin: 0 5px; / 左右にマージン /
border-radius: 5px;
/ display: inline-block; を使うと、インライン要素の特性を保ちつつ、 /
/ width, height, 上下マージンなどが有効になります。 /
/ この例ではpaddingと左右marginだけなので、display: inline; のままでもOKです。 /
/ 後述の「マージン・パディングの適用」で詳しく説明します。 /
}

/ pタグ全体の基本スタイル /
p {
line-height: 1.8; / 行間を広げて見やすく /
font-size: 16px;
margin-bottom: 15px; / 段落の下にスペース /
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  1. special-styleクラスでは、color, background-color, font-size, font-weightといった基本的なプロパティに加えて、padding（要素の内側の余白）やborder-radius（要素の角を丸くする）を適用しています。これらのプロパティも、<span>のようなインライン要素に対して適切に機能します。
  2. emphasizeクラスでは、text-decoration: underline;で下線を引いたり、font-style: italic;で斜体にしたりしています。
  3. custom-boxクラスでは、背景色、ボーダー（境界線）、パディング、マージン、角丸を組み合わせて、テキストの一部を視覚的にボックスのように見せています。特にpaddingとmarginは、要素のサイズや配置に影響するため、インライン要素への適用には少し注意が必要です（次のセクションで詳しく解説します）。

これらの例からわかるように、<span>タグで囲まれたテキストの範囲に対して、CSSの様々なプロパティを自由に組み合わせて適用できることが、<span>タグの最大の利点です。

例5: <span>タグにマージンやパディングを適用してみる（インライン要素の特性を理解する）

前述の「インライン要素」の特性のところで触れましたが、インライン要素である<span>にマージン（margin）やパディング（padding）を適用する際には、ブロックレベル要素とは異なる挙動があります。この違いを理解しておくことは、レイアウト崩れを防ぐ上で非常に重要です。

マージンとパディングのおさらい:

  • パディング (padding): 要素の「内容（コンテンツ）」と「境界線（border）」の間の内側の余白です。パディングは要素の背景色などが適用される領域に含まれます。
  • マージン (margin): 要素の「境界線（border）」と「他の要素」の間の外側の余白です。マージンは他の要素との間にスペースを空けるために使われ、要素自身の背景色などは適用されません。

インライン要素 (<span>) におけるマージン・パディングの挙動:

  • padding (パディング):
    • 左右 (padding-left, padding-right): 正常に機能します。テキストの左右に指定した分の余白が追加され、背景色などもその領域に広がります。
    • 上下 (padding-top, padding-bottom): 見た目上は指定した分の余白が追加され、背景色なども広がります。しかし、他の要素の配置には影響を与えません。 テキストの行の高さが変わることはなく、上下の余白は他の行のテキストと重なってしまう可能性があります。
  • margin (マージン):
    • 左右 (margin-left, margin-right): 正常に機能します。要素の左右に指定した分のスペースが追加され、他の要素がその分だけ離れて配置されます。
    • 上下 (margin-top, margin-bottom): 指定しても反映されません。 インライン要素はテキストのベースライン上に配置されるため、上下のマージンで要素を動かしたり、上下の行との間にスペースを空けたりすることは基本的にできません。

この上下のパディングが他の行と重なる可能性がある点や、上下のマージンが効かない点が、ブロックレベル要素との大きな違いです。

コード例で確認:

HTML (index.html)

“`html






spanタグ マージン・パディング

spanタグのマージン・パディング挙動

通常のテキストです。
このテキストにパディングを適用
しました。

通常のテキストです。
このテキストにマージンを適用
しました。

行間が広い段落です。
このテキストに大きな上下パディングを適用
しました。


“`

CSS (style.css)

“`css
/ style.css /

.inline-padding {
background-color: yellow;
padding: 5px 10px; / 上下5px, 左右10pxのパディング /
/ 上下パディングは見た目は広がるが、行の高さは基本変わらない点に注目 /
}

.inline-margin {
background-color: lightgreen;
margin: 10px 20px; / 上下10px, 左右20pxのマージン /
/ 上下マージンは効かず、左右マージンだけが効く点に注目 /
padding: 5px; / 見やすくするためにパディングも追加 /
}

.line-height-example {
line-height: 2.5; / 行間をかなり広くする /
background-color: #f0f0f0; / 段落の背景色で領域を確認 /
padding: 10px;
}

.inline-padding-large {
background-color: orange;
padding: 20px 10px; / 上下20px, 左右10pxの大きなパディング /
/ 行間を広くしても、パディング領域が他の行と重なる可能性がある /
/ display: inline-block; にすると、上下パディングが行間を押し広げるようになる /
}

/ pタグ全体の基本スタイル /
p {
line-height: 1.6;
font-size: 16px;
margin-bottom: 20px;
border: 1px dashed #ccc; / 段落の境界線で領域を確認 /
padding: 10px;
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  1. .inline-paddingの例では、padding: 5px 10px;と指定しています。左右のパディング10pxは期待通りに機能し、要素の左右に余白ができます。上下のパディング5pxも背景色が上下に広がりますが、行全体の高さは変わりません。もし、この<span>を含む行の上下に十分なスペースがない場合（例えば行間が狭い場合）、この上下のパディング領域は、上下の行にあるテキストなどと重なって表示される可能性があります。
  2. .inline-marginの例では、margin: 10px 20px;と指定しています。左右のマージン20pxは期待通りに機能し、前後のテキストや要素との間にスペースができます。しかし、上下のマージン10pxは全く効果がありません。上下にスペースを空けることはできません。
  3. .inline-padding-largeの例では、行間を広くした段落の中で、<span>に大きな上下パディング（20px）を適用しています。この場合でも、<span>自体の高さは指定したパディング分広がって背景色も適用されますが、行間は基本的には変わらないため、上下のパディング領域が他の行と重なる可能性があります。

インライン要素にブロック要素のような特性を与えたい場合 (display: inline-block; または display: block;)

もし、<span>タグに上下のマージンを適用したい、あるいはwidthやheightを指定したい、上下パディングが他の行との間にスペースを作るようにしたい、といったブロックレベル要素のような振る舞いをさせたい場合は、CSSのdisplayプロパティを変更します。

  • display: inline-block;: インライン要素として扱われつつも、ブロック要素のようにwidth, height, 上下左右のmargin, 上下左右のpaddingがすべて有効になります。前後のテキストや他の要素とは横並びに配置されますが、要素自身は幅と高さを持ち、上下のマージンやパディングで他の要素との間にスペースを作ることができます。
  • display: block;: 完全なブロックレベル要素として扱われます。前後に改行が入り、親要素の幅いっぱいに広がり、width, height, 上下左右のmargin, 上下左右のpaddingがすべて有効になります。テキストの一部に使うと改行が入ってしまうため、あまり一般的ではありません。

<span>タグで、テキストの一部を囲んで、そこに上下のスペースを加えたい、あるいは特定のサイズを持つ小さな装飾要素として使いたい、といった場合には、display: inline-block;に変更することがよくあります。

display: inline-block; を試すコード例:

HTML (index.html)

“`html






spanタグ display変更

spanタグに display: inline-block; を適用

通常のテキストです。
このspanはinline-blockです
テキストが続きます。

通常のテキストです。

このspanは
上下マージン・パディングが効きます

テキストが続きます。


“`

CSS (style.css)

“`css
/ style.css /

.inline-block-example {
display: inline-block; / inline-block に変更 /
background-color: yellow;
padding: 10px;
margin: 10px;
width: 200px; / widthも有効になる /
height: 50px; / heightも有効になる /
/ テキストはspan内で折り返されます /
overflow: hidden; / 高さに収まらないテキストを非表示に（例として） /
}

.inline-block-margin-padding {
display: inline-block; / inline-block に変更 /
background-color: lightgreen;
border: 1px solid green;
padding: 15px 10px; / 上下左右パディング /
margin: 10px 5px; / 上下左右マージン /
/ 上下のマージンとパディングが行間を押し広げる点に注目 /
}

/ pタグ全体の基本スタイル /
p {
line-height: 1.6;
font-size: 16px;
margin-bottom: 20px;
border: 1px dashed #ccc; / 段落の境界線で領域を確認 /
padding: 10px;
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  • display: inline-block;を指定した<span>要素は、前後のテキストとは横並びになりますが、width, height, margin-top, margin-bottom, padding-top, padding-bottomがすべて有効になります。これにより、要素のサイズを固定したり、他の要素との間に上下のスペースを空けたりすることが可能になります。.inline-block-margin-paddingの例を見ると、上下のマージンとパディングによって、要素を含む行の高さが押し広げられていることが分かります。
  • このように、デフォルトのインライン要素としての挙動が不都合な場合に、displayプロパティを変更することで、要素の振る舞いをコントロールできます。

例6: <span>タグをリンクのように見せる（装飾とインタラクション）

<span>タグ自体はクリックしても何も起きないただのテキストの塊ですが、CSSを使ってリンク（<a>タグ）のように見せることができます。JavaScriptと組み合わせることで、クリック時に何らかのアクションを実行させることも可能です。

HTML (index.html)

“`html






spanタグ リンク風

spanタグをリンクのように見せる例

このクリックできそうなテキストは、実際にはリンクではありません。
見た目だけをCSSで作っています。

本物のリンクはこちらです。比較してみてください。


“`

CSS (style.css)

“`css
/ style.css /

.fake-link {
color: blue; / リンクのような色 /
text-decoration: underline; / 下線 /
cursor: pointer; / マウスカーソルをポインターに変える /
}

/ マウスオーバー時のスタイル変化（オプション） /
.fake-link:hover {
color: purple; / ホバーで色を変える /
text-decoration: none; / ホバーで下線を消す /
}

/ pタグ全体の基本スタイル /
p {
line-height: 1.6;
font-size: 16px;
margin-bottom: 15px;
}

/ 本物のリンクのスタイル（比較用） /
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
a:hover {
color: purple;
text-decoration: none;
}

/ h1タグの基本スタイル /
h1 {
color: #333;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
“`

解説:

  1. color: blue;とtext-decoration: underline;は、一般的なブラウザのデフォルトのリンクの見た目を再現するためのスタイルです。
  2. cursor: pointer;は、マウスカーソルを要素の上に置いたときに、矢印ではなく手の形（リンクを指すポインター）に変えるためのプロパティです。これにより、ユーザーに「これはクリックできるかも？」と感じさせることができます。
  3. :hoverというCSSの擬似クラスを使うと、マウスカーソルが要素の上に乗っている間だけスタイルを適用できます。この例では、ホバー時に文字色を紫に変え、下線を消しています。

このようにCSSを使えば、<span>タグで囲んだテキストを視覚的にリンクのように見せることができます。ただし、これはあくまで見た目だけであり、実際にクリックしてもどこかに移動するわけではありません。もし本当にクリック可能な要素にしたい場合は、JavaScriptを使ってクリックイベントを検知し、処理を記述する必要があります。また、ナビゲーションや外部サイトへのリンクなど、本来リンクであるべき要素には、セマンティクス上も機能上も<a>タグを使用するべきです。

6. <span>タグとセマンティクス

Webサイトを作成する上で、見た目（デザイン）だけでなく、HTMLの「意味」も非常に重要です。この「意味」のことをセマンティクス (Semantics) と呼びます。適切なHTML要素を使うことは、検索エンジンがページのコンテンツを理解するのを助けたり、スクリーンリーダーのような支援技術が視覚障碍のあるユーザーにページの内容を正確に伝えたりするために不可欠です。

前述の通り、<span>タグは「特別な意味を持たない汎用的なインライン要素」です。これは、見た目を調整するためだけに使うべきであり、コンテンツに何らかの意味（重要性、強調、定義など）を与える目的で安易に使用すべきではない、ということです。

例えば、文章中で特に「重要な」単語を太字にしたい場合を考えてみましょう。見た目を太字にするだけなら、<span>タグにfont-weight: bold;というCSSを適用すれば実現できます。

“`html

この情報は重要です。

“`

しかし、HTMLには「重要性の強調」という意味を持つ専用のタグ、<strong>タグがあります。

“`html

この情報は重要です。

“`

<strong>タグは、デフォルトのブラウザスタイルで太字で表示されることが多いですが、これはあくまでブラウザのデフォルト設定です。重要な点は、<strong>タグが「この内容は重要である」という意味を伝えていることです。見た目を太字にするかどうかはCSSで自由に制御できます。

“`html

この情報は重要です。（意味的に重要）

この単語は太く見せたいだけです。（見た目だけ太い）

css
/ style.css /
strong {
font-weight: bold; / デフォルト通りの太字 /
color: red; / さらに意味的な重要性を強調するために赤色にする /
}

.visual-bold {
font-weight: bold; / 見た目だけを太字にする /
/ 特に意味的な重要性はない /
}
“`

この例のように、意味的に重要な箇所には<strong>タグを使い、それに加えて太字以外のスタイル（例えば色など）をCSSで適用するのがセマンティックな方法です。単に見た目を太くしたいだけで、意味的な強調がない場合は、<span>タグとCSSを使うのが適切です。

その他のセマンティックなインライン要素の例：

  • <em>: テキストの「強調」を表します。通常、斜体で表示されますが、これもCSSで変更可能です。
    html
    <p>これは<em>特に強調したい</em>部分です。</p>
  • <mark>: テキストを「ハイライト」するために使います。例えば、検索結果で一致したキーワードなどをマークするのに適しています。通常、黄色の背景色で表示されますが、CSSで変更可能です。
    html
    <p>キーワードは<mark>この部分</mark>にあります。</p>
  • <del>: 削除されたテキストを表します。通常、打ち消し線が引かれます。
    html
    <p>価格: <del>1000円</del> 800円</p>
  • <ins>: 挿入されたテキストを表します。通常、下線が引かれます。
    html
    <p>ステータス: <ins>在庫あり</ins></p>
  • <cite>: 作品のタイトル（書籍、論文、記事など）を表します。通常、斜体で表示されますが、これもCSSで変更可能です。
    html
    <p>夏目漱石の<cite>吾輩は猫である</cite>を読んだ。</p>

これらのセマンティックなインライン要素は、それぞれが特定の意味を持っています。CSSで見た目を制御できる点は<span>タグと同じですが、「なぜそのテキストを囲んでいるのか」という意味が異なります。

結論として、<span>タグは、コンテンツに特別な意味を与える必要がなく、単に見た目を調整するためだけにテキストの一部をグループ化したい場合に最適な汎用要素です。 もし、囲むテキストに何らかの意味がある場合は、その意味に最も近いセマンティックなHTML要素（<strong>, <em>, <mark>, <cite>など）を検討し、その上でCSSで見た目を調整するのが、より適切でアクセシブルなWebページ作成につながります。

7. <span>タグを使う上での注意点

<span>タグは非常に便利ですが、いくつか注意しておきたい点があります。

  • 過度な使用は避ける: 非常に細かくテキストを<span>で区切ってクラスをたくさん付けすぎると、HTMLコードが読みにくくなり、管理が大変になります。CSSでスタイルを適用する範囲を適切に判断し、必要な箇所だけに<span>を使うようにしましょう。
  • クラス名の命名規則: <span>に付けるクラス名は、そのスタイルや目的が分かりやすいように命名しましょう。単にclass="a", class="b"とするのではなく、class="highlight", class="error-message", class="product-name"のように具体的な名前を付けることで、コードの可読性が向上します。BEM（Block Element Modifier）のようなCSS設計手法の考え方を少し取り入れるのも良いでしょう。
  • アクセシビリティへの配慮: 色だけで重要な情報を伝えないように注意しましょう。例えば、エラーメッセージのテキストを赤色にするだけでなく、太字にしたり、アイコンを追加したりするなど、色覚障碍のある方にも情報が伝わるように工夫が必要です。また、<span>で囲んだテキストにrole属性（例: <span role="button">）などを追加して、スクリーンリーダーへの情報提供を補う場合もありますが、基本的にはセマンティックな要素（<a>, <button>など）を適切に使用することが最も重要です。
  • <span>の中にブロック要素は含められない: インライン要素は、その内容として他のインライン要素やテキストを含むことができますが、ブロックレベル要素を直接含むことはできません。例えば、<p><span><div>...</div></span></p>のような構造は不正なHTMLとなります。テキストの一部を囲む際に、意図せずブロック要素まで含めてしまわないように注意しましょう。

8. <div>タグとの違いを再確認

<span>タグと同様に、特別な意味を持たない汎用的な要素としてよく使われるのが<div>タグです。この二つは非常によく似ていますが、決定的な違いは「ブロックレベル要素か、インライン要素か」という点です。

  • <div>タグ: ブロックレベル要素です。主にWebページのセクション分け、レイアウトの枠組み、複数のブロック要素やインライン要素をまとめるコンテナとして使用されます。内容の前後に改行が入り、デフォルトで幅いっぱいに広がります。CSSで幅、高さ、マージン、パディングなどを自由に指定して、ボックスモデルを完全に制御できます。
    “`html

    最新ニュース

    今日のニュースです…

    続きはこちら…

    関連リンク

    * **`<span>`タグ**: **インライン要素**です。主に**テキストの一部**や、インライン要素の集まりを囲み、CSSで見た目を調整するために使用されます。内容の前後に改行が入らず、テキストの流れの中に配置されます。幅や高さ、上下のマージンは基本的に効きません（`display`プロパティを変更しない限り）。html

    詳細はこちらをご覧ください。

    サービスの料金は特別価格で提供中です。

    “`

使い分けの基準:

  • ページ全体のレイアウト、大きなセクション分け、複数の要素をまとめる → <div>
  • 文章中の特定の単語やフレーズ、インライン要素の一部にスタイルを適用する → <span>

例えば、サイドバー全体を囲むなら<div>、そのサイドバー内の特定のリンクテキストの色だけを変えるならそのリンクテキストを<span>で囲む、といった使い分けになります。

どちらのタグも「意味を持たない」点では共通していますが、その性質（ブロックかインラインか）と、それによって可能なレイアウト・スタイリングが大きく異なります。この違いを理解することが、適切なHTML構造を構築し、効果的にCSSを適用するための鍵となります。

9. <span>タグの応用的な使い方

<span>タグは、単にテキストの色やサイズを変えるだけでなく、CSSやJavaScriptと組み合わせることで、より高度な表現やインタラクションを実現できます。

  • CSS擬似要素 (::before, ::after) との組み合わせ: <span>要素の前後に、CSSだけで生成される要素（擬似要素）を追加することができます。これにより、アイコンを挿入したり、テキストの装飾ラインを引いたり、引用符を追加したりといったデザインが可能になります。
    html
    <p>
    <span class="labeled-text">重要</span>: この情報は必ずお読みください。
    </p>
    css
    .labeled-text {
    font-weight: bold;
    margin-right: 5px; /* テキストとの間にスペース */
    }
    /* span要素の前に緑色の点を追加 */
    .labeled-text::before {
    content: "•"; /* 表示するコンテンツ */
    color: green;
    margin-right: 5px;
    }
    この例では、<span>のクラス名自体は意味を持たず、::before擬似要素を使って視覚的な装飾を追加しています。

  • CSSアニメーションとの組み合わせ: CSSアニメーションを使って、<span>で囲まれたテキストに動きを付けることも可能です。例えば、テキストが点滅したり、色が変わったり、フェードイン・アウトしたりといったアニメーションを適用できます。
    html
    <p>
    この単語は<span class="pulsing-text">アニメーション</span>します。
    </p>
    “`css
    .pulsing-text {
    color: blue;
    animation: pulse 1.5s infinite alternate; / pulseというアニメーションを1.5秒間隔で繰り返し実行 /
    }

    @keyframes pulse {
    0% {
    opacity: 1; / 開始時は不透明 /
    }
    100% {
    opacity: 0.3; / 終了時は透過 /
    }
    }
    この例では、`@keyframes`ルールで定義した`pulse`というアニメーションを、`.pulsing-text`クラスを持つ`<span>`に適用しています。
    * **データ属性 (`data-*`) と組み合わせてJavaScriptから操作**: `<span>`タグに`data-*`属性を付けて、CSSだけでなくJavaScriptからその要素を特定したり、要素に関する情報を保持させたりすることができます。例えば、特定のIDを持つ投稿のタイトルを囲んだ`<span>`に、投稿のIDをデータ属性として持たせておき、クリック時にそのIDを使ってJavaScriptで詳細情報を取得する、といった使い方が考えられます。    html

    記事のタイトル: 初心者向けHTML入門

    ``
    JavaScriptでこの    要素を取得し、dataset.articleIdで“12345”という値にアクセスできます。CSSでは属性セレクタ[data-article-id]`を使ってスタイルを適用することも可能です。

これらの応用例は、<span>タグが単なるテキストの一部を囲む要素にとどまらず、CSSやJavaScriptと連携してWebページの表現力やインタラクティビティを高めるための基盤となることを示しています。

10. まとめ – <span>タグの役割と重要性

この記事では、HTMLの<span>タグについて、その基本的な使い方からCSSによる装飾、そして応用的な使い方まで、初心者向けに詳しく解説してきました。

改めて、<span>タグのポイントをまとめましょう。

  • <span>タグは、特別な意味を持たない、汎用的なインライン要素です。
  • 主に、テキストの一部や他のインライン要素を囲み、CSSで見た目を装飾するために使用されます。
  • ブロックレベル要素（<div>など）とは異なり、内容の前後に改行が入らず、テキストの流れの中に配置されます。
  • デフォルトでは、幅や高さ、上下のマージンは適用できませんが、display: inline-block;やdisplay: block;を使うことで、これらのプロパティも有効にできます。
  • CSSで<span>タグを選択する際は、クラスセレクタ（.クラス名）を使うのが最も一般的で効率的な方法です。
  • color, background-color, font-size, font-weight, text-decorationなど、様々なCSSプロパティを組み合わせて装飾できます。
  • コンテンツに意味的な強調や役割がある場合は、<strong>, <em>, <mark>などのセマンティックな要素を優先し、<span>は純粋な見た目の調整に留めるのが良いプラクティスです。
  • 過度な使用や不適切な構造での使用は、コードの可読性を下げたり、予期せぬ表示崩れを引き起こす可能性があるため注意が必要です。

<span>タグは、HTML文書の構造を大きく変えることなく、細かなデザイン調整を可能にする非常に強力なツールです。Webサイトやブログのデザインをより自由に、より魅力的にするためには、<span>タグとCSSの組み合わせをマスターすることが不可欠です。

最初は難しく感じるかもしれませんが、実際にHTMLとCSSを書いて、ブラウザで表示を確認しながら練習を重ねることで、必ず理解が深まります。この記事で紹介した具体例を参考に、ぜひあなたのWebページで<span>タグを使ってみてください。

11. 次のステップへ

<span>タグの使い方を学んだら、次はCSSの他の様々なプロパティ（ボーダー、アウトライン、テキストシャドウなど）を学び、さらに豊富なデザイン表現に挑戦してみましょう。また、Webページの主要な構造を作る上で欠かせない<div>タグの使い方、そしてそれらを配置するためのCSSレイアウト手法（FlexboxやGrid）についても学ぶと、Web制作の幅が大きく広がります。

さらに、JavaScriptを学ぶことで、<span>タグで囲んだ要素をクリックしたら何らかの処理を行う、特定のテキストを動的に変更する、といったインタラクティブな機能を実装できるようになります。

Web制作の世界は広く深いですが、一つ一つの要素やプロパティの役割を理解し、組み合わせていくことで、あなたのアイデアを形にすることができます。

この記事が、あなたのWeb制作学習の助けとなれば幸いです。頑張ってください！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール