今更だけど僕が使っているCSSで画像置換する方法を晒すよ

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それを承知のかたはどうぞこの記事をお楽しみください。

テキストの画像置換なんですけど。
人には人のやり方があるわけで、同じく僕には僕のやり方があります。

先日東京の友人とお話する機会があり、サイト構築をする中で画像置換の話になって、自分のやり方を教えたら「そんなやり方が?!」と大層びっくりされたので、今更ながら紹介しようかと思い至りました。
(僕も「そんなに驚くことですかい?!」とびっくりしてました。)

僕の使っているピュアCSSで画像置換する方法

※このやり方が絶対に正しい!というわけではありません。生暖かい目でふわっと見ていただければ幸いです。

シンプルなリンクテキストを幅200px/高さ50pxの画像に置き換える

HTML

<a href="リンクURL" class="imageBlock">このテキストを置き換える</a>

CSS

a.imageBlock {
     display: block;
     line-height: 1.5;
     width: 200px;
     height: 0;
     padding-top: 50px;
     background: transparent url("画像パス") 0 0 no-repeat;
     overflow: hidden;
}

a.imageBlock:hover {
     background-position: 0 -50px;
}

使用する画像

実際の表示

このテキストを置き換える

ブロック要素の高さを0にして、画像の高さ分だけ上にpaddingをつけています。
はみ出したテキストはoverflow:hidden;で隠してあげればはみ出したテキストが隠れます。
ちょっとコード数多いけど、これで完成です。

リンク以外でもいけますが、リンクが一番需要があるんじゃね?ということでリンクを置き換えてみました。

CSSスプライトいけるし、透過画像もDon’t恋Death。
background-positonの値を変えるだけでロールオーバーもいけます。

注意点としては以下の2点。
・IEの互換モードではoverflowが効かない場合があるので、標準モードで作成している場合に限る。
・line-heightを1.5くらいより上にしないとテキストが申し訳程度に見える場合がある。

凡庸性がないですね(笑)

完全自作ではなくてどっかで見たのを改良して作ったんだけど、ソースは忘れました\(^o^)/
知ってるよ!って言われるかもしれないけどキニシナイ!!

良ければ使ってやってください。

他にも使われていると思われる画像置換

【負の遺産】
text-indent: -9999px;を使った置換

:: まあ、言うまでもなく。-9999px大嫌い!

【text-indent: 100%;を使っているやつ】


画像置換「-9999px」のパフォーマンスを改善した新しいテクニック|by コリス (元ネタ:REPLACING THE -9999PX HACK (NEW IMAGE REPLACEMENT))

:: 結局overflowで隠しているので僕がやっていることと殆ど変わらないけど、パディングなしで高さを指定しているので柔軟性はありそう。

【z-indexを使ったやつ】
これで決まり?な画像置換 – DKIR|by CSS EBLOG

:: z-indexで背景となる画像の下にテキストを潜り込ませるパターン。デザインとしてのspan要素の使い方をしているが、ちょっと無駄がある気もする。

【CSS3で置換】
CSS3を使った新しい画像置換の方法|by Web Design KOJIKA17

:: CSS3で画像置換はスマートでステキだと思いますが、JSライブラリで非対応ブラウザCSS3に対応させると他のところで不具合が出るのでちょっと使うのをためらってしまいます。

【javascriptを使った置換】
JavaScript & jQueryによる画像置換いろいろ ライブラリ紹介から自作まで|by GanoWeb

:: 個人的に、ロールオーバーごときでJavascript触るのは正直めんどくさい\(^o^)/

僕が紹介するものに限らず、Google先生に聞けば色々教えてくれると思います。
なので自分がいちばんしっくり来るものを使えばいいと思います。
今はCSS3だけでもかなりスタイリングできるので、もしかしたら画像が不要な場合が多いかもしれませんけど…。

少しでもWebサイト制作をする皆様のお力添え、参考になればいいなと。

ここ間違ってるとかあったら教えて下さいお願いします。