• WEB

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

  • のん
    のん デザインちーむ
  • このエントリーをはてなブックマークに追加
CSS 画像置換の種類とその方法

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

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

CSS Image Replacement museum

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

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

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

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タグを使用することでも、もちろん解決できます。

まとめ

SEOを考慮すると、PCサイトでは画像置換を多用する場面は少ないかもしれません。

しかし、スマートフォンサイトになるとCSSスプライトと合わせて活用する場面が断然多くなるでしょう。

その際はやはりスコットケラムメソッドが記述量などを考慮しても安定しているかのように思います。

今回は画像置換について紹介したのですが、imgタグでalt属性を指定することもとても重要です。
画像がテキストのみである場合は、WEBフォントで代用する手段もあります。

また、alt属性もHTML5になると仕様が変わりますので、一度確認してみてもいいかと思います。

HTML5:img要素のalt属性の仕様

今後も使いどころをわきまえて、便利に活用できればと思います。

このエントリーをはてなブックマークに追加

のんが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ