HiGash.Net ホームページへ戻る

Home [Blog] » 僕がCSSによる “画像置換” を使わなくなった3つの理由

僕がCSSによる “画像置換” を使わなくなった3つの理由

僕がCSSによる “画像置換” を使わなくなった3つの理由

今更聞き飽きた感のある方も多いであろうネタですが、Webデザインの仕事をするうちに思い直した “画像置換” に関する僕個人の見解。

まず、 画像置換(Image Replacement) とはそもそも何かというと、その名の通り、CSSのbackgroundプロパティを使って、テキストを画像に置き換えてしまおうというもの。広く普及しているCSSの基本テクニックと言えるでしょう。

当サイトもページ上部のグローバルナビなどでこの手法を用いていて、以下のようなHTMLとCSSで画像置換を行っています。

グローバルナビの表示サンプル

HTML


<div id="global_navi_example">
  <ul>
    <li><a href="#" id="gn_home">Home</a></li>
    <li><a href="#" id="gn_about">About</a></li>
    <li><a href="#" id="gn_archive">Archive</a></li>
    <li><a href="#" id="gn_portfolio">Portfolio</a></li>
    <li><a href="#" id="gn_contact">Contact</a></li>
  </ul>
</div><!--/global_navi_example-->

CSS


#global_navi_example {
height:43px; margin:1em auto; width:455px;
}

#global_navi_example ul {
list-style:none; margin:0; padding:0;
}

#global_navi_example ul li {
display:inline; margin:0; padding:0;
}

#global_navi_example ul li a {
background:url(global_navi.jpg); display:block;
float:left; height:43px; text-indent:-9999px;
}

#global_navi_example ul li a#gn_home {
width:79px;
}

#global_navi_example ul li a#gn_home:hover {
background-position:left -43px;
}

#global_navi_example ul li a#gn_about {
background-position:-79px top; width:81px;
}

#global_navi_example ul li a#gn_about:hover {
background-position:-79px -43px; 
}

#global_navi_example ul li a#gn_archive {
background-position:-160px top; width:96px;
}

#global_navi_example ul li a#gn_archive:hover {
background-position:-160px -43px; 
}

#global_navi_example ul li a#gn_portfolio {
background-position:-256px top; width:99px;
}

#global_navi_example ul li a#gn_portfolio:hover {
background-position:-256px -43px; 
}

#global_navi_example ul li a#gn_contact {
background-position:-355px top; width:100px;
}

#global_navi_example ul li a#gn_contact:hover {
background-position:-355px -43px; 
}

CSSで各リストの<a>タグに対して text-indent:-9999px; と指定しているのがポイントです。これで、本来テキストが載る部分からテキストをページの外に(-9999px)追い出しています。テキストが追い出されて空白になった領域に背景画像だけを表示しているわけです。
テキストを隠すためにtext-indentプロパティではなく、display:none;を使うなど様々な方法がありますが、このエントリーの目的は画像置換の手法を解説することではないので詳細は省きます。

画像置換を用いる最大のメリットは、 正しいマークアップで美しいデザインを実現すること にあります。確かにCSSで画像を表示することで、HTMLは上記のようにシンプルなマークアップが可能になります。

シンプルなマークアップは、HTMLが 文書構造を定めるためのマークアップ言語 であるという基本原則に適っています。シンプルで余分な要素がないぶん、検索エンジンがHTMLの伝えたい内容を正しく解釈してくれるであろうと考えられ、SEO効果も期待できます。もちろんHTMLのメンテナンスもしやすい(CSSは少し大変だけど)。

さらに画像置換のメリットとして、画像のロールオーバー効果をCSSのみで実現できることがあげられます。上記のグローバルナビもCSSで背景画像の表示位置を上下にズラすことで、マウスオーバー時の効果を演出しています。

ブラウザのデフォルト設定では背景画像が印刷されないという問題

さて、以上のように画像置換を行うメリットはあるのですが・・・ここからようやく本題。
そうした画像置換のメリットを理解していてもなお、僕は最近自分が制作するWebサイトでは極力画像置換は使わないようにしています。画像置換に積極的でなくなった一番の理由は、 ブラウザのデフォルト設定では背景画像が印刷されない からです。

Webデザインの仕事をしていると、想像以上にクライアントには「Webページを印刷したい」というニーズがあることに気づきます。
そもそもWebページ制作段階で、文章などの校正作業は印刷して行うクライアントが多いです。また、小さな企業の場合、Webページを印刷して会社案内のように配っていたりすることもあります。そうした目的を考えれば、「Webページをきれいに印刷したい」というニーズは我々としても理解することができます。

ところが、Webブラウザの印刷機能は得てして貧弱です。なかなか画面表示通りには印刷してくれません。しかも画像置換を用いた場合、問題はさらにややこしくなります。
それは、多くのユーザーが利用するInternet Explorerが、デフォルトで背景画像を印刷しない設定になっていることに起因します。つまり、デフォルト状態のIEで背景画像による画像置換を多用したWebページを印刷した場合、背景画像の部分は全く印刷されない のです。

もちろん背景画像を印刷する設定にすればよいわけすが、「ツール(T)」→「インターネットオプション(O)」→「詳細設定」という手順で背景画像を印刷するよう設定するなんてことは、PCリテラシーの低いユーザーに対して安易に求められる要求ではない気がします。
また、PCリテラシーが決して低くないユーザーであったとしても、ページ上のメインイメージやヘッドラインが「背景画像」として表示されている というのはなかなか理解しにくいのではないでしょうか。常識的に考えれば、何かモノの背景に表示されているから「背景画像」なわけだから。

CSSはエフェクトまで表現する言語なのか

僕が画像置換を辞めた2つめの理由。それは 画像のロールオーバー効果を実現するのはCSSの役割なのか疑問に感じる から。

CSSによる画像のロールオーバー効果は確かに大変便利。background-positionプロパティで画像の表示位置を制御することで、マウスオーバー時とマウスアウト時をまとめて1枚の背景画像にすることもできます(こうした手法は “CSSスプライト” と呼ばれています)。

だけれども最近思うのは、画像のロールオーバーのような少し凝ったエフェクト(視覚効果)についてまでCSSで実現するのが理に適っているのだろうか、ということ。少なくともCSSスプライトのようにaとa:hoverでbackground-positionを切り替えて実現するロールオーバーというのは正攻法では無い気がします。

よりリッチなエフェクトを可能にする便利なJavaScriptライブラリが多数あるのだから、少し凝ったことをしたいなら普通にJavaScriptを使えばいいのでは?と思うのです。ページの文書構造はHTMLで、静的な見た目はCSSで、動的なエフェクトはJavaScriptで、というのが最近の僕の考え方。

隠しリンクは検索エンジンスパムである

僕が画像置換を辞めた3つめの理由。それは、画像置換によってページ上から隠してしまったテキストが<a>タグ内にある場合、検索エンジンはこれを「隠しリンク」と考えないだろうか、ということ。

Googleの ウェブマスター向けガイドライン には、「品質に関するガイドライン – 具体的なガイドライン」として、「隠しテキストや隠しリンクを使用しない。」とあります。
さらに 「隠しテキストと隠しリンク」 のページを詳しく見ると、隠しテキスト・隠しリンクの例として「CSSを使用してテキストを隠す」や「CSSを使用して、高さが1ピクセル程度の非常に小さいハイパーリンクが作成されている」などが挙げられています。

検索エンジンにとってペナルティの対象となるのは、あくまでも偽装目的(実際に見えている情報とテキストの情報が異なる)で隠しテキスト・隠しリンクを使用した場合であって、デザインのための画像置換がすなわち検索エンジンスパムかというと、実際はそういうわけではありません。
現にこのサイトでも画像置換を多用していますが、検索エンジンの検索結果から弾かれるようなことはありません。

ただし、画像置換のためにCSSで過度な指定(text-indent:-9999px;とfont-size:1px;を同時に記述するなど)を行った場合に検索エンジンスパムと判断される場合がある ようです。以前、僕が制作に携わったWebサイトにおいて、Googleウェブマスターツールで一度だけGoogleの品質に関するガイドラインに違反しているという警告を受けた経験があるのですが、そのサイトは画像置換を多用したものでした。

画像置換を積極的に使う目的がSEOであるならば、それは逆に検索エンジンスパムと紙一重の戦術であることは頭にいれておかねばならないと思います。

というわけで、僕は個人的には今後しばらく画像置換はなるべく用いずにWebサイトを作っていこうと考えています。もちろん、時と場合に応じて画像置換がベストな選択肢である場合は使っていきますが。
ちなみに、このサイトはそう思う前に作ったので画像置換を多用しています・・・。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

5 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. 「画像置換」って便利だけどデメリットも
    そもそも「画像置換」という方法を始めて知りましたが、結構いいですね。でも、それにはデメリットもあるようで・・・。 「画像置換」とは CSSのbackgroundプロパティを使って、テキス…

  2. 匿名 より:

    面白かったです!また、遊びに来ますね。

  3. [...] く前のエントリーなんだけど、今でも何気にアクセスが多いのが 僕がCSSによる “画像置換” を使わなくなった3つの理由 というエントリー。当ブログへのアクセスが一気に増えるきっか [...]

  4. CSSの基礎/IllustratorCS4【講義17日目】

    ※今日は欠席したので、紺碧七さんに教えてもらいまとめました。

    ◆text-indent:行頭(1行目)の字下げ(インデント、indentation)の設定

    ※画像置換(Image Replacement)をするときに使用して…

  5. [...] 僕がCSSによる “画像置換” を使わなくなった3つの理由 もちろん背景画像を印刷する設定にすればよいわけすが、「ツール(T)」→「インターネットオプション(O)」→「詳細設定」という [...]

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20080907/image_replace.html/trackback/

Preview

トラックバック
http://higash.net/20080907/image_replace.html/trackback/

Page Top