ちょっとディープな生物の世界

【CSS】タイトルなどのテキストを画像に置換する方法「text-indent: 100%; white-space: nowrap; overflow: hidden; 」【メモ】

テキストを画像で置換する

よくサイトのHTMLを見てみると、タイトルが<a>属性でテキストがあるにも拘わらず、表示されずに背景画像(ロゴ画像)だけが表示されている例を見ます。

これは、次のCSSで実装することができます。

a{
text-indent: 100%; 
/*一文字の始めを要素からはみ出させる*/
white-space: nowrap; 
/*文字は折り返さない*/
overflow: hidden; 
/*はみ出た文字は隠す*/
}
a{
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 
}

では次のようなHTMLとCSSを書いてみたいと思います。ちなみにa要素は、display:blockに指定しないとサイズを調整できないので注意です。

See the Pen テキストを画像に置換する by バイオハックch (@synd1090) on CodePen.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です