CSSで文字テキストを非表示にする(隠す)方法

cleartext

こんにちは。松本です。

なんだか、最近、オフィスにコーヒーマシーンのキューリグさんがやってきてかなり癒し空間になりつつあります。弊社のFBでご覧になった方もいらっしゃるかもしれませんが、キューリグのカップを整頓するツリーがあるのです。クリスマスも近いことだし、これをクリスマスプレゼントだと思って、よし、頑張るぞ!!

今回は先日、ブログでお話ししていたスマホサイト作成で、作業を続けていく中で見つけた小ワザをご紹介します。

合法的に(?)CSSでテキストを非表示にしたい

cleartext

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

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

参考サイト:text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 | delaymania

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

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

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

HTMLはこう。

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

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

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

text-indent 一行目のインデント幅を指定する
white-space ソース中のスペース・タブ・改行の表示の仕方を指定する
overflow はみ出た内容の表示方法を指定する

参考サイト:text-indent-スタイルシートリファレンス

です。

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

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

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

参考サイト:CSSスプライトについてあれこれ。

こうやって、何事も経験しないとなかなか知識はつかないものです。壁にあたっては乗り越えて、またあたって乗り越えて、来年のクリスマスには、『こうしてみなさい。』と言える自分になりたいです。

さささ、今週中にかたちにしなければ。

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

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

オカベ

The following two tabs change content below.
松本

松本

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