CSSで文字テキストを非表示にする（隠す）方法｜ホームページ更新代行サービスブログ

2013.12.04

今回はスマホサイト作成で作業を続けていく中で見つけた「小ワザ」をご紹介します。

合法的に（？）CSSでテキストを非表示にしたい

cleartext

タイトルロゴ画像を表示して、附随するテキストは隠したい、そんな時。

これまでは、text-indent:-9999pxでテキストを飛ばして画像に置換する方法が多く使われてきました。
しかし、それでは、9999px分の領域を使う分パフォーマンスも悪くなってしまい、更にはSEOスパムだと思われてしまう可能性があることから、最近は好まれなくなってきました。

それすら、今回の制作を通して知ったのですが……

『ロゴのテキストを残しつつ画像を表示させるには〜？』と悩んでいた時、岡部さんが、『このクラス使えば〜？』↓ と。

.clearText {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

HTMLはこう。

<h1 class="clearText">logo</h1>

これで“logo”は表示されなくなります。

ちなみに、初級者の松本は、しっかり使えるプロパティ数が少ないため、それぞれに解説を入れますと……（自分のため）

です。

非表示になるその理由は、text-indentを100%とすると、インデント量はその要素の幅分となります。

しかしそれだけだと、テキストが改行して要素の中に残ってしまうので、white-space: nowrap;で改行を禁止して完全にはみ出させます。

overflow: hidden;ではみ出た部分を非表示にします。

こうやって、何事も経験しないとなかなか知識はつかないものです。

コーディングでつまづいたとき、大抵の問題はググれば解決できますが、その時に、なぜそういう挙動になるのかを合わせて調べると、後々応用が利くようになります。

理屈で理解できるようになるまで、深追いする癖をつけましょう。

オカベ

埼玉県在住。アパレル会社での企画営業経て、2013年にスマートスタイル・コンプレックス株式会社へ入社。好きなことは歌うこと♪声の大きさは、社内No.1！最近はまっているのは登山。山ガールよ、集まれー。