【CSSで簡単！】背景にテキストを表示する方法

当サイトは広告を含んでいます。

2024-12-17

テキストの背景にテキストを表示したい・・・！

テキストの背景に数字や英文字があるとおしゃれに見えますよね！

今回は、CSSのみで背景にテキストを表示するスタイリッシュなデザインの作り方をご紹介します。

背景にテキストを表示させる方法

CSSの「::after」擬似要素を使って背景にテキストを表示するすることができます。

シンプルな配置

こちらはシンプルな例です。背景に表示させる文字を変更したい場合は、::after要素の「content」内の文字を変更してください。

表示する通常のテキスト

HTML コードを表示

<div class="background-text">
  表示する通常のテキスト
</div>

CSS コードを表示

.background-text {
  position: relative;
  display: flex; /* フレックスボックスを有効化 */
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ */
  font-size: 20px; /* 通常テキスト用のフォントサイズ */
  color: #000; /* 通常テキストの色 */
  margin: 50px 0; /* 上下に50pxのマージンを設定 */
}

.background-text::after {
  content: '背景テキスト';
  position: absolute;
  top: 50%; /* 垂直方向の中央寄せ */
  left: 50%; /* 水平方向の中央寄せ */
  transform: translate(-50%, -50%); /* 中央に配置 */
  font-size: 70px; /* 背景テキストのフォントサイズ */
  color: rgba(209, 201, 173, 0.3); /* 背景テキストの色（透明度含む） */
  z-index: -1; /* 背景として配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}

色や文字のサイズを変更することで、様々なカスタマイズが出来そうですね！

背景文字を斜めに配置

「transform: rotate(-20deg);」を追加することで、背景文字を斜めに表示することも可能です。「rotate」の括弧内の値は、正の値（時計回り）・負の値（反時計回り）に回転します。

配置位置は「top」と「left」で調整してください。

表示する通常のテキスト
テキストテキスト

HTML コードを表示

<div class="background-text">
  表示する通常のテキスト<br>テキストテキスト
</div>

CSS コードを表示

.background-text {
  position: relative;
  display: flex; /* フレックスボックスを有効化 */
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ */
  font-size: 30px; /* 通常テキスト用のフォントサイズ */
  color: #000; /* 通常テキストの色 */
  margin: 50px 0; /* 上下に50pxのマージンを設定 */
  text-align: center; /* 複数行テキストを中央揃え */
}

.background-text::after {
  content: '背景テキスト'; /* 背景に表示するテキスト */
  position: absolute; /* 絶対配置で位置調整 */
  top: 0px; /* 背景テキストの縦方向の位置を調整 */
  left: 20%; /* 背景テキストの横方向の位置を調整 */
  font-size: 30px; /* 背景テキストのフォントサイズ */
  color: rgba(209, 201, 173, 0.3); /* 背景テキストの色（透明度含む） */
  z-index: -1; /* 背景として配置し、通常テキストより後ろに表示 */
  white-space: nowrap; /* テキストの折り返し防止 */
  transform: rotate(-20deg); /* 背景テキストを斜めに配置 */
}