【HTML入門】span要素の使い方を基本からclass活用術まで徹底解説

HTMLの<span>要素は、テキストをマークアップするための汎用的なインラインコンテナです。他の要素の中に配置して使うのが一般的で、文章の一部分だけにスタイルを適用したい場面で活躍します。

<span>要素の基本的な使い方

<span>要素は、文章の一部だけを周囲とは違う見た目にしたいときによく使われます。

例えば、次のように記述すると、文中の「赤色です。」という部分だけが赤く表示されます。

<p>私の帽子は<span style="color:red">赤色です。</span></p>

class属性で共通スタイルを一括適用する

<span>要素は、同じスタイルを当てたい複数の箇所をclass属性でグループ化する目的でも使えます。

例えば、レシピ記事を執筆していて、材料名の単語をすべて特定の色で強調したいとしましょう。

<p>
  美味しいガーリックバターを作るのに必要な材料は、たった4つ。
  <span class="ingredient">バター</span>、
  <span class="ingredient">ニンニク</span>、
  <span class="ingredient">塩</span>、そして
  <span class="ingredient">黒こしょう</span>です。
</p>

続いて、次のようなCSSクラスを作成します。

.ingredient {
  color: green;
}

再利用できるクラスのメリット

再利用可能なクラスを使うメリットは、後からデザインの方針が変わっても対応が簡単なことです。材料名の見た目を変えたくなったら、.ingredientクラスの定義を一度修正するだけで、このクラスが付いたすべての<span>要素に変更が反映されます。

例えば、色ではなく太字で材料を強調したくなった場合は、以下のように書き換えるだけでOKです。

.ingredient {
  font-weight: bold;
}

<span>要素を使う際の注意点

<span>要素は汎用的である反面、「セマンティック（意味的）ではない」要素とされます。そのため、より意味合いが合致する他の要素がない場合に限って使うべきです。例えば、単に強調したいだけなら、<strong>や<em>といった意味を持つ要素を優先的に検討しましょう。

div要素との違い

<span>要素は<div>要素とよく似ていますが、最大の違いはデフォルトの表示形式です。<span>はインライン要素として振る舞う一方、<div>はブロックレベル要素です。ただし、CSSを使えばそれぞれのデフォルトスタイルを上書きすることも可能です。