意外と知られていない? 画像置換のテクニックHTML + CSS

このあいだ iPhone アプリに今までいくら使ったのか調べたら、3万くらい使ってたことに気付いてちょっと反省しているハシモトです。（App Store Expense Monitor で調べられます）
今日は画像置換について書いてみたいと思います。

画像置換とは

画像置換とはCSSのテクニックのうちの一つで、HTMLでマークアップしたテキストをCSSでテキストを隠し、画像に置き換えて表示させる手法のことを言います。
この手法はalt属性が必要でない画像を使用するとき、つまり完全にデザイン目的だけで画像を使用するときに使われたりします。

メリット

1. 文書構造とデザインをHTML・CSSで分離でき、CSSだけで見た目のコントロールができる
2. altのテキストを検索対象に含めない検索エンジンに対してSEO的に効果があるかもしれない
3. background-positionプロパティを応用して、ロールオーバー画像をJavaScriptなしでも再現できる（CSS Sprite）

などが挙げられます。
3番目は弊社の運営する「塾講師ナビ」やその他の媒体でも活用していたりします。

デメリット

1. テキストの内容と画像の情報が等価でない場合、SEOスパムと判定される可能性がある
2. ブラウザの初期設定だと背景画像は印刷されない、CSSがオンで画像がオフの閲覧環境だと何も表示されない
3. 画像置換の方法によっては、音声ブラウザで読み上げられなくなる

などが挙げられます。
メリットだけでなくこういったデメリットもあるのを認知した上で使用します。

画像置換の手法

1. FIR（ファーナー式）。空のspan要素に display: none; を指定してテキストを消す方法。
2. Phark方式。text-indent: -5000px; などマイナスの値を指定して画面の外にテキストを飛ばす方法。

などがよく見られる手法ですが、今回ご紹介するのは

LIR（リーフィー/ラングリッジ式）

と呼ばれる height: 0; と overflow: hidden; をうまく使った手法です。

サンプル

HTML

‹h1 id="sample"›‹a href="hogehoge"›サイブリッジラボ‹/a›‹/h1›

CSS

#sample {
	width: 120px;
	height: 30px; /* 置き換える画像の高さ */
	overflow: hidden;
	background-image: url("/img/common/hogehoge.gif") no-repeat;
}
#sample a {
	display: block;
	width: 120px; /* 置き換える画像の幅 */
	height: 0;
	padding-top: 30px; /* 置き換える画像の高さ */
}

まず height で高さを 0 にしてテキストを隠した後、
padding-top で画像の高さ分を空けて、背景の画像を表示させるというアプローチになってます。
Mac や iPhone でおなじみの Apple のサイトだとこの手法を使って画像置換をしていますね。

画像置換の今後について

HTML5 が普及してくると、img要素のalt属性に関しての仕様がちょっと複雑なことになったり、（参考：HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。｜CSS HappyLife）
CSS3 が普及して、ウェブフォント（@font-face）が多くのブラウザで使えるようになってきても、
日本語に関してはライセンスの問題であったりファイルの容量などで、しばらくはこれからも画像置換のテクニックが用いられていくんじゃないかなぁと思っています。
英語圏に関しては Typekit など盛り上がっていって面白いことになりそうですね。

そんなこんなで画像置換のお話についてでした。