text-indent:-9999px;でテキスト飛ばしをしなくてもテキストを非表示、背景画像を表示する方法

公開日： 2015/07/22 : 知識と経験

必要に応じてテキストを非表示にしたいときはたまにだけど「text-indent:-9999px;」を使ったことがあります。

単純に非表示にしたいだけなら「display: none;」を最近は頻繁に使っているんだけど、これだと領域ごと非表示になってしまうし、やりかた次第だけど、ソースの数を増やしたくないときや<ソースじたいいじることができない環境にいる方はこの方法がおすすめです。

よく使われるのはロゴが多いですかね～

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

.text-kesuyo {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

}

もっとがっちりやるなら以下のように、これぐらいやってもいいかもしれません

.text-kesuyo {
	display: block;
	width:auto;
	height:auto;
	background: url(/image/kesuyo.jpg) no-repeat left center;
	outline:none;
	text-indent: 100%;
	white-space: nowrap;
	overflow:hidden;
}

.text-kesuyo {

display: block;

width:auto;

height:auto;

background: url(/image/kesuyo.jpg) no-repeat left center;

outline:none;

text-indent: 100%;

white-space: nowrap;

overflow:hidden;

}

最後に

text-indent:-9999pxじたいはGoogleにSEOスパムだと認識されてしまう可能性があると言われていますが、スポットでやる分にはスパム扱いにはなる可能性は低いと思いますが、やはりキーワードを画面上消して見えないようにして上位に表示させようとしている人は少なからずいると思うので、text-indent:-9999pxの多様だけは避けましょう！