前回は、カスタムメニューを画像に置き換える方法の下準備まで書きました。

今日は、背景画像の表示のおさらいと、画像置き換えの基礎について書きたいと思います。苦手な方はぜひどうぞ。結論が知りたい方、もう少しおつきあい下さい。

では、いきますよ〜〜

背景画像の表示についておさらいしてみる

画像置き換えの考え方の基本となる背景画像の表示のしかたについて、おさらいしてみましょう。知ってるよって方は遠慮なく読み飛ばして下さいね。

背景画像を表示

.example{
      background-image: url(img/example.jpg);
}

背景画像に関しては「background-image」で設定します。背景にしたい画像を指定します。ここで注意するのは、

画像のurlはCSSファイルから見て、どの位置にあるか

という事です。どうしても背景画像が表示されない、と悩んでいたら、このパスが間違っていた、なんてことも良くあるので、うっかりしないように注意しましょう。

背景画像の繰り返し「background-repeat」

背景画像の繰り返しは「background-repeat」で設定します。横方向に繰り返す「repeat-x」、縦方向に繰り返す 「repeat-y 」、繰り返しをしない 「no-repeat」の3種類です。

.example{
     background-repeat : repeat-y;
}

などと書きますね。今回の画像置き換えの場合は、繰り返してしまっては困りますから、「no-repeat」です。

背景画像の位置を調節　「background-position」

今回はここがポイントです！後で使うので、良く整理しておきましょう。

背景画像の位置の調節は「background-position」で行います。left、 right、 center、 top、 bottom、などのキーワードを使ったり、%、pxなどの数字で細かく指定することもできます。

例えば、背景画像を左下を基準に置きたいときは、

.example{
     background-position: left bottom ;      
}

このようになりますね。

左から3px、上から10pxの位置を基準に置きたい場合は

.example{
     background-position: 3px 10px ;      
}

このように書きます。

まとめて表示

背景表示は「background」でまとめて表示することもできます。

.example{
      background: url(img/example.jpg) no-repeat left center ;
}

こんな感じですね。

画像置き換えの基本

画像に置き換える、というのは基本的には置き換えたい画像を背景画像として表示し、テキストは隠してしまいましょう、という事です。

<p>画像にしたいんだってば！</p>

という文章を画像に置き換えてみましょう。

置き換える画像を背景として表示させる

何も指定していないhtmlだけだと、こんな風に表示されますね。

これに背景を表示させます。計算しやすいように画像の位置の基準を左上にします。

p{
      background:url("sample-1.jpg") top left no-repeat;
}

見てみましょう。

おや？画像が一部分しか表示されませんね。これは「p」の背景として表示していますから、その範囲にしか画像が表示されないためです。

背景画像の表示範囲を広げる

表示したい画像の分、エリアを広げます。widthとheightを画像と同じ大きさにします。

p{
        width:250px;
	height:40px;
}

どうですか？いい感じですね。

テキストを見えなくする

画像が表示されたので、テキストは隠してしまいましょう。「text-indent」をマイナスの値にして画面のずっとずっと外まで飛ばしちゃいます。

p{
        text-indent:-9999px;
}

これで完成です。

まとめて書くと、

p{
	width:250px;
	height:40px;
	text-indent:-9999px;
	background:url("sample-1.jpg") top left no-repeat;
}

となります。

どうでしょうか。ここまではOKでしょうか。次回はこの画像をロールオーバーで切り替えてみます。

長くなっていますが、どうぞもう少しおつきあい下さい。

画像置き換えについて

画像置き換えにはいろいろな方法があります。これは一例です。また、この方法の是非についてもいろいろ議論があります。
興味のある方はぜひ調べてみて、ご自分のサイトにあった使い方をしてみて下さいね。。

よしりんさんからから、コメントで　「text-indent:-9999px　はGoogleはスパムの一種と見なす方向のようです。」というご指摘をいただきました。
「display:none」を使ったほうが良いでしょう、ということです。ありがとうございました。
また、この画像置き換えの問題は上にも少し触れましたが、様々な問題があり、議論が重ねられています。今回はテーマを直接いじらずにCSSのみで、分かりやすく、という思いもあって今方法を紹介しましたが、本当に様々な方法が編み出されています。
興味のある方は、ぜひ調べてみて、この方法のメリット、デメリットをご理解の上、ご自分のサイトに合った使い方をしていただけたらと思います。
ご指摘ありがとうございました。