Article今更だけど僕が使っているCSSで画像置換する方法を晒すよこの記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。テキストの画像置換なんですけど。人には人のやり方があるわけで、同じく僕には僕のやり方があります。先日東京の友人とお話する機会があり、サイト構築をする中で画像置換の話になって、自分のやり方を教えたら「そんなやり方が?!」と大層びっくりされたので、今更ながら紹介しようかと思い至りました。(僕も「そんなに驚くことですかい?!」とびっくりしてました。※このやり方が絶対に正しい!というわけではありません。生暖かい目でふわっと見ていただければ幸いです。実際の表示このテキストを置き換えるブロック要素の高さを0にして、画像の高さ分だけ上にpaddingをつけています。はみ出したテキストはoverflow:hidden;で隠してあげればはみ出したテキストが隠れます。コード数多いけど、これで完成です。リンク以外でもいけますが、リンクが一番需要があるんじゃね?ということでリンクを置き換えてみました。CSSスプライトいけるし、透過画像もDon’t恋Death。background-positonの値を変えるだけでロールオーバーもいけます。注意点としては以下の2点。・IEの互換モードではoverflowが効かない場合があるので、標準モードで作成している場合に限る。・line-heightを1.5くらいより上にしないとテキストが申し訳程度に見える場合がある。凡庸性がないですね(笑)完全自作ではなくてどっかで見たのを改良して作ったんだけど、ソースは忘れました\(^o^)/知ってるよ!って言われるかもしれないけどキニシナイ!!良ければ使ってやってください。結局overflowで隠しているので僕がやっていることと殆ど変わらないけど、パディングなしで高さを指定しているので柔軟性はありそう。z-indexで背景となる画像の下にテキストを潜り込ませるパターン。デザインとしてのspan要素の使い方をしているが、ちょっと無駄がある気もする。CSS3で画像置換はスマートでステキだと思いますが、JSライブラリで非対応ブラウザCSS3に対応させると他のところで不具合が出るのでちょっと使うのをためらってしまいます。個人的に、ロールオーバーごときでJavascript触るのは正直めんどくさい\(^o^)/僕が紹介するものに限らず、Google先生に聞けば色々教えてくれると思います。自分がいちばんしっくり来るものを使えばいいと思います。今はCSS3だけでもかなりスタイリングできるので、もしかしたら画像が不要な場合が多いかもしれませんけど...。Webサイト制作をする皆様のお力添え、参考になればいいなと。ここ間違ってるとかあったら教えて下さいお願いします。コメントは受け付けていません。