【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に指定しないとサイズを調整できないので注意です。