CSSの疑似要素で背景に文字を表示させる方法

2025/08/06 HTML/CSS

ウェブサイトやブログのデザイン、ただ文字を配置するだけでは物足りない…そんな時に役立つのが背景の装飾です。
今回はCSSの疑似要素を使って、HTMLをシンプルに保ちながら、背景に文字を表示させる方法をご紹介します。

なぜ「疑似要素」を使うの？そのメリット

背景に文字を入れる方法として、画像を準備するという手もありますよね。でも、それだと文字のサイズ調整が難しかったり、テキストを変更するたびに画像を作り直したりと、何かと手間がかかります。
そこで活躍するのが疑似要素です。疑似要素を使うと、こんなメリットがあります。

HTMLがシンプルに保てる

余計な<p>や<span>タグをHTMLに書く必要がありません。デザインに関わる部分はCSSに集約できるため、HTMLの構造をクリーンに保てます。

CSSで文字を自由に制御できる

色、サイズ、太さ、透明度、位置、回転など、CSSの豊富なプロパティを使って柔軟に文字を調整できます。画像では難しいきめ細やかな表現も可能です。

レスポンシブに対応しやすい

レスポンシブデザインにも対応しやすいのが特徴です。画面サイズに応じて、メディアクエリを使って文字のサイズや位置を簡単に調整できます。

画像を使わないため軽量

画像を使わないため、ページの読み込み速度にほとんど影響を与えません。ユーザー体験の向上にもつながります。

アクセシビリティへの配慮

背景文字は主に装飾目的で使われるため、スクリーンリーダーが読み上げない方が都合が良い場合があります。疑似要素はまさにその用途に最適です。

CSSの疑似要素で背景に文字を表示させる方法

それでは、背景文字の方法をご紹介します。
完成イメージはこちら。

【HTML】


<div class="container">
  <p>疑似要素</p>
</div>

【CSS】


.container {
  position: relative;
  width: 500px;
  height: 120px;
  padding: 50px;
  z-index: 1;
}

.container::before {
  content: "01";
  position: absolute;
  bottom: 0;
  left: 10px;
  font-size: 200px;
  font-weight: bold;
  font-style: italic;
  color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  white-space: nowrap;
  z-index: -1;
}