CSSでspanを使って重ね順を変更する方法

Posted on by

Webデザインでテキストや要素を「重ねる」シーンは多くあります。
例えば、文字に背景色を部分的に敷きたい、タイトルにアクセントを加えたいなどです。
この記事では、spanタグとCSSのz-indexを活用して、重ね順をコントロールする方法を解説します。

spanタグとは？

spanタグはインライン要素で、文章の一部分を囲って装飾するのに使われます。
例えば

<p>この文章の<span>ここだけ</span>を強調します。</p>

このようにすれば、span内のテキストに色や背景を自由につけられます。

CSSで重ね順を変える基本

要素の重なり順は、以下のルールで決まります。

  1. HTMLの記述順（後に書かれた要素ほど上にくる）
  2. positionが設定されているか（relative / absolute / fixed / sticky が必要）
  3. z-indexの数値（大きい方が上にくる）

つまり、spanにpositionとz-indexを指定すれば、重ね順をコントロールできます。

実践例：テキストに色付きの帯を重ねる

HTML

<h2 class="title">
  <span class="bg">重ね順のテクニック</span>
</h2>

CSS

.title {
  position: relative; /* spanを相対的に配置する基準 */
  font-size: 2rem;
}

.title .bg {
  position: relative; /* 重ね順操作のため必要 */
  z-index: 1;         /* テキストを前面に */
}

.title .bg::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 50%;
  background: yellow;
  z-index: -1;        /* 背景をテキストの下に */
}

表示イメージ

「重ね順のテクニック」という文字の下半分に、黄色い帯が重なるように見えます。

応用例：テキストを画像の上に配置する

HTML

<div class="image-wrap">
  <img src="sample.jpg" alt="背景画像">
  <span class="caption">キャプションテキスト</span>
</div>

CSS

.image-wrap {
  position: relative;
  display: inline-block;
}

.image-wrap img {
  display: block;
}

.caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  z-index: 2; /* 画像より上に配置 */
}

これで、画像の下にテキストを重ねられます。

注意点

  • z-indexはpositionが必須
    static（デフォルト）のままでは効果が出ません。
  • 親要素のz-indexに依存
    親にz-indexがある場合、子要素はその範囲内で重ね順が決まります。
  • 数値の使いすぎに注意
    1, 10, 100…と無限に大きくするより、「前に出したい」「後ろに下げたい」だけで十分です。

まとめ

  • spanはテキストの一部分を装飾するのに便利
  • position + z-indexで重ね順を自由に操作できる
  • ::beforeや::afterを組み合わせれば、背景や装飾の幅が広がる