CSSのtext-indentでテキストを非表示にする方法

2024.12.05
HTML&CSS

CSSのtext-indentプロパティを利用して、テキストを非表示にして画像に置換する方法の備忘録です。

check

上記のサンプルでは、「check」のテキストを非表示にして、代わりにSVGのアイコンを表示しています。

HTMLコード

HTMLコードのサンプルです。

<span class="check">check</span>

非表示にするテキストを<span>タグで囲みます。

CSSコード

text-indentを使用して、テキストを非表示にするCSSコードのサンプルです。

.check {
  display: block;
  width: 160px;
  height: 160px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url(../images/check.svg) no-repeat 50% 50%/contain;
}

テキストをtext-indent: 100%;で表示範囲外に移動して、overflow: hidden;で要素の外側を非表示にしています。さらに、テキストの折り返しを防ぐために、white-space: nowrap;を設定しています。

SVGのアイコンは、背景画像に設定して表示します。display: block;を設定した状態で、width、heightでアイコンのサイズを設定します。

以前用いられていた方法でtext-indent: -9999px;でテキストを非表示する方法もありますが、SEO対策的にもtext-indent: 100%;を使用する方法がおすすめです。