CSSで文字の上に画像を乗せて文字を隠す方法があります。
完全に文字は消えて画像が表示されるし、もし画像が表示されない場合は文字が表示される。
CSSの『position』を使えば簡単に出来ます。
勘の良い人なら気付いたかもしれませんね。
例として、300×100の画像を用意します。
sample.jpg
HTMLとCSSの記述は以下。
sample.html
<h2><span></span>Cascading Style Sheets</h2>sample.css
h2 {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
h2 span {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100px;
background: url(sample.jpg) no-repeat 0 0;
}h2に『position:relative』で幅（width）と高さ（height）を指定し、h2に対してspanの『position:absolute』のtop:0、left:0で位置決めをする。
これだけです。
rerative＝親
absolute＝子
と言う覚え方をすると、覚えやすいかも。
以前までは『text-indent:-9999px』等で文字を外に表示する方法が使われていましたが、最近はコレを使用すると検索エンジンとかで悪質サイトと見られるような噂が…。
上記のやり方ですと、もしサーバーとかの問題で画像が表示されなくても、文字だけは残るので一安心ってな所です。
その場合に備えて、h2に『font-size』等を付けておくと良いかもしれません。
後、『margin』、『padding』等は上記で省いています。
『position』は覚えると中々使えるので、最近は結構頻繁に使ってます。
只、高さ（height）だけは指定しておかないと、後に続く表示が変になってしまうので注意が必要です。
ちなみに、このサイトのサイドバーの各タイトルはこの方法で表示しています。
