画像置換法（IR[Image Replacement]法）まとめ

Fahrner Image Replacement (FIR)画像置き換え手法
Doug Bowman のサイト
display: none;
を使って、文字を表示しないようにする手法です。

欠点
display: none;
を使用すると、音声ブラウザでは無視されます。
CSS有効、画像非表示だと何も表示されません。
HTML文書に意味のない<span>タグが必要となります。

HTML文書

<h3 id="header"><span>Fahrner Image Replacement</span></h3>

CSSスタイルシート

#header {
  width: 155px;
  height: 55px;
  background-image: url(img/method.gif);
  background-repeat:no-repeat;
}
#header span {
  display: none;
}

Fahrner Image Replacement

Single-pixel <img> Replacement
透明GIFを使用する手法です。
これにより画像非表示の場合には画像のALT属性の値が表示されます。
また音声ブラウザにも対応しています。

欠点
画像非表示のためだけの画像が必要となります。
またこの場合でも意味のない<span>タグが必要となります。

HTML文書

<h3 id="header">
<img src="img/spacer.gif" alt="Single-pixel img Replacement" />
<span>Single-pixel img Replacement</span>
</h3>

CSSスタイルシート

#header {
  width: 155px;
  height: 55px;
  background-image: url(img/method.gif);
}
#header span {
  display: none;
}

Single-pixel img Replacement

Radu Method
マージン(margin)を使用する手法です。
画像領域の幅を大きくして、その分だけマージンでずらします。
(画面の外に文字がずれるように指定します。)
この手法はPhark Methodに似ていますので、IE5でも表示できます。
また音声ブラウザにも対応しています。

欠点
CSS有効、画像非表示だと何も表示されません。
リンク画像に使用すると大きなリンク領域となります。

HTML文書

<h3 id="header">Radu Method</h3>

CSSスタイルシート

#header {
  background: url(img/method.gif) no-repeat top right;
  width: 2155px;
  height: 55px;
  margin: 0 0 0 -2000px;
}

Radu Method

Leahy/Langridge Method
Seamus Leahy（シェイマス・リーヒー）とStuart Langridge（スチュアート・ラングリッジ）が考案した手法です。
高さを０にして、overflow: hiddenで文字を隠します。画像はpaddingで表示しています。

欠点
CSS有効、画像非表示だと何も表示されません。
IE5にはボックスモデルハック（box model hack）を使わないといけません。

HTML文書

<h3 id="header">Leahy/Langridge Method</h3>

CSSスタイルシート

#header {
  height: 0px !important;
  height /**/:55px;
  padding: 55px 0 0 0;
  overflow: hidden;
  background-image: url(img/method.gif);
  background-repeat: no-repeat;
  width: 155px;
}

Leahy/Langridge Method

Phark Method
リーヒー/ラングリッジ(Leahy/Langridge)を大いに簡素化して、Pharkのマイクランドル(Mike Rundle)はtext-indentにマイナスの値を指定してテキストを画面の外に配置する手法を考案しました。
アクセシビリティ問題を解決し、JAWS（音声ブラウザ）で認識できます。
欠点
CSS有効、画像非表示だと何も表示されません。
IE5では表示されません。

HTML文書

<h3 id="header">Revised Image Replacement</h3>

CSSスタイルシート

#header {
  text-indent: -100em;
  overflow: hidden;
  background: url(img/method.gif);
  width: 155px;
  height: 55px;
}

Phark Method

Phark Revisited
さらに、Safariのスクロールバー、およびIE5での欠点を解消する手法を考案しています。

欠点
CSS有効、画像非表示だと何も表示されません。

HTML文書

<h3 id="header">Phark Revisited</h3>

CSSスタイルシート

#header {
  text-indent: -5000px;
  background: url(img/method.gif);
  width: 155px;
  height: 55px;
}

Aタグにこの手法を使うと、Firefox1.5以降ではクリックしたときに左側に点線の枠が出ますがこれは文字が左に移動しているためで

a {
font-size:0;
}

を指定すると解消されます。
一部では

a {
outline: none;
}

としている人もいますが、これではタブキーで現在位置（フォーカスしている位置）が分からなくなり、アクセシビリティが悪くなる。
または次のようにする手法もありますが、MacIEでは使えません。

a {
/*¥*/
overflow: hidden;
/**/
}

Phark Revisited

Dwyer Method
レオン・ドワイアー(Leon Dwyer)はClassic FIRを応用した手法を考案しました。
全ての視覚ブラウザと音声ブラウザに対応しています。

欠点
CSS有効、画像非表示だと何も表示されません。
不要なSPANタグを必要とします。

HTML文書

<h3 id="header"><span>Dwyer Method</span></h3>

CSSスタイルシート

#header {
  width: 155px;
  height: 55px;
  background-image: url(img/method.gif);
}
#header span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

Dwyer Method

Gilder/Levin Method
トム・ギルダー（Tom Gilder）とレヴィン・アレクサンダー（Levin Alexander）はアクセシビリティ問題を修正して、イメージがオフにされてもテキストが現れる手法を提案しました。

欠点
不要なSPANタグを必要とします。
透過画像は下地の文字が現れて使えません。

この手法については下記リンクで説明しています。
SPANタグを使ってリンクにした場合、この手法の最大の欠点はMacIE5でリンクできないことです。
現在最良の画像置換法

 List-Style-Image Method
CSSで画像を配置する方法にはBackground-image以外に、List-Style-Imageがあり、これを使用した手法です。

display: list-itemを使用しているため、表示が崩れやすいという欠点はありますが、
この手法の最大のメリットは『印刷が出来る』ということです。
通常、Background-imageを使用すると、ブラウザの設定を変更しないと印刷は出来ませんが、この手法は背景画像ではないので標準の設定で印刷ができます。
mediaをprintにして、印刷用CSSとして指定するのがいいでしょう。

HTML文書

<h3 id="header">リストスタイル画像</h3>

CSSスタイルシート

#header {
  width: 0;
  height: 0;
  display: list-item;
  list-style-image: url(img/method.gif);
  list-style-position: inside;
  letter-spacing: -1000em;
  font-size:0px;
}

サンプル

今日のランキングは？

パソコンQ&A