2014.06.12
WEB

CSS　画像置換の種類とその方法

画像置換とは、HTMLでマークアップしたテキストを隠し、代わりにその箇所を背景画像へと置き換えるCSSのテクニックの１つです。

かなり古くから活用されており、実にさまざまな記述方法があります。

CSS Image Replacement museum

画像置換を使用する目的としては、JavaScriptを使用することなく、簡単にロールオーバーを実装できたり、単純に見た目をかっこよくするために標準フォントを隠し、画像で制作したものに置き換えたり、などがあります。

また、サイトの表示速度を上げる工夫として、CSSスプライトと併用した応用技もあります。

何かと活用することの多いテクニックですので、いくつか使いやすい記述方法を記していきたいと思います。

1 text-indent:-9999px;を使用した方法 (Phark Method)
2 text-indentとwhite-spaceとoverflowを使用した方法 (Scott Kellum Method)
3 paddingとoverflow:hidden;を使用した方法 (Leahy/Langridge)
4 その他・補足
5 まとめ

text-indent:-9999px;を使用した方法 (Phark Method)

ファークメソッドと呼ばれ、おそらく最も楽に実装でき、有名な方法かと思います。

text-indentは、文章先頭の字下げを指定するプロパティです。

本来はtext-indent: 1em;などを指定することで、行頭を1文字分、字下げさせ、文章の段落をあらわしたりしますが、
-9999pxや-999emと指定することで、テキストをブラウザ上で見えない位置にまで字下げさせます。


/*指定例*/
.ir {
    width: 150px;
    height: 60px;
    background: url("replacement.png") 0 0 no-repeat;

    /*-9999px指定は文字が左に字下げされますので、行揃えも左指定*/
    text-align: left;

    /*リンク要素に画像置換を行った場合、
    クリックするとアウトラインが9999px分表示されるブラウザが一部あります。
    そのための解決策。*/
    overflow: hidden;

    /*ファークメソッド*/
    text-indent: -9999px;
}

text-indentとwhite-spaceとoverflowを使用した方法 (Scott Kellum Method)

前項のtext-indent:-9999px;を指定する方法は、テキストを隠すために9999px分の無駄な領域をつくることになります。

そのパフォーマンス性を考慮し、リファクタリングされた記述方法がこのスコットケラムメソッドになります。


/*指定例*/
.ir {
    width: 150px;
    height: 60px;
    background: url("replacement.png") 0 0 no-repeat;
        
    /*スコットケラムメソッド*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

white-space:nowrap;は改行の指定です。nowrapと指定することで、テキストの改行を無しにしています。

改行を無しと指定した上で、画像を表示させたい領域から、テキスト全体(100%)をインデントさせ、はみ出た部分をoverflow:hidden;で隠しているということになります。

paddingとoverflow:hidden;を使用した方法 (Leahy/Langridge)

高さを0としていますが、paddingを指定し、背景画像の表示領域を確保している方法です。


/*指定例*/
.ir {
    display: block;
    width: 150px;
    background: url("replacement.png") 0 0 no-repeat;

    /*高さ0*/
    height: 0;

    /*指定するはずの高さ分領域確保*/
    padding-top: 60px;

    /*領域外へ押し出したテキストを隠す*/
    overflow: hidden;
}

その他・補足

画像置換のデメリットとして有名なのが、Googleの検索エンジンに隠しテキストや隠しリンクだと認識され、スパム扱いになる恐れがあるということです。

参考

ユーザーにとってわかりやすいものとして実装したものであり、Googleにとって不自然な部分がなければ問題はなさそうですが、少々不安にはなります。

他には、

HTML5ボイラープレートにも加えられていた「H5BP Image Replacement」も有名ですが、二年くらい前にプロジェクトには採用されていない。
ブラウザの指定がデフォルトのままだと、印刷した場合、背景画像は印刷されない。
ブラウザの指定を「CSSは有効、画像の表示は無効」の指定にしている場合、背景画像が表示されない。

2の項目で紹介したスコットケラムメソッドはIE7でバグがあるそうなんですが、ローカル環境、IEのドキュメントモードを変更した限りでは確認できませんでした。
参考 IE7 positive text-indent IR bug

また、背景画像の表示に関するアクセシビリティとスコットケラムメソッドのIE7のバグに対応している画像置換がこちらで紹介されています。

こちらIE6,7に対しては、CSSハックで対応。

IE8以上にはafter,before疑似要素がサポートされているので、NIRメソッドと合わせたものとなっています。


.ir {
    height: 60px;
    width: 150px;
    overflow: hidden;
    *text-indent: -9999px; /* for IE7/6 */
    *background: url(replacement.png) no-repeat 0 0; /* for IE7/6 */
}

.ir:before {
    content: url(replacement.png);
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

現在ではIE6,7を意識してコーディングすることは少なってきましたが、PCサイトの制作ではよくこちらの方法を活用させてもらっています。

また、背景画像が表示されない問題についてはimgタグを使用することでも、もちろん解決できます。