Home > CSS > CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない

  • 2007-03-08 (木) 2:32
  • CSS

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。

h5{
width:150px;
height:50px;
background:url('ir_test.gif') no-repeat;
text-indent:-9999px;
}

<h5>SITE TITLE</h5>

h5{
width:150px;
height:50px;
background:url('ir_test.gif') no-repeat;
}
h5 span{
display:none;
}

<h5><span>SITE TITLE</span></h5>

上記のようなCSSだと「CSS有効で画像は非表示」の環境で見ると、その箇所には何も表示されなくなってしまう。「CSS有効で画像は非表示」で見ている環境というと、携帯のフルブラウザやモバイルPCなどが考えられる。また「display:none;」としている場合だと、音声ブラウザはその箇所を飛ばしてしまう。他にもタブボタンでフォーカスできなかったり、アクセシビリティにかなり問題があるようだ。

さらに一部にはこれがスパムに当たるという説もあるが、これは確証はなく、断定は出来ない。

Googleに勤めているエンジニアが以前そのような手法について言及をし、ネット上で話題に上ったことは承知していますが（参考：昨年10月21日に公開された456 Berea Streetの記事「Google, SEO and using CSS to hide text」）、実態についてはその後明確にされていなかったように思います。

上記の記事のなかで、SEOスパムと判断される可能性があるとされているのは、非可視化されるテキストの内容が、それと置き換えられる画像に対し等価ではないと考えられる場合です。ですから、テキストと画像の双方にある情報が一致するよう制作する限りは、SEOスパムと判断される懸念は低いと思います。（画像置換とSEOスパム | Web標準Blog | ミツエーリンクス）

まあとにかく「CSS有効で画像は非表示」で何も見えないというのは確かにまずいので（このサイトも実は「text-indent:-9999px;」で画像置換してます）、対処法を調べてみると、こういうCSSなら「CSS有効で画像は非表示」でも問題なくテキスト部分が表示される事が判明。

h5 {
width:150px;
height:50px;
position:relative;
font-size:12px;
/*HideMacIE?\*/
overflow:hidden;
/**/
}
h5 span {
display:block;
width:100%;
height:100%;
background:url(img/logo.gif) no-repeat;
position:absolute;
top:0;
left:0;
}

<h5>SITE TITLE<span></span></h5>
SITE TITLE

外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position:absoluteで外枠のh5の左上に合わせ、widthとheightを100%にしてh5の要素を被ってしまうというかなりトリッキーなことやってますね。一応ほとんどのブラウザに対応。問題としては、MacのIEだけ文字を拡大すると画像からはみ出てしまうのと、背景が透明な画像は使えないことぐらいかと。後は空のspanが気持ち悪いってところが難点だが、アクセシビリティの問題は解決している。

これは実はGilder/Levin Methodという手法で、2004年あたりに発見された手法らしい。このサイトによると

  • Opera 5 and up (thanks Jay Meinhard)
  • IE 6/win
  • IE 5.5/win
  • IE 5/win
  • Mozilla Firebird
  • Mozilla 1.2
  • Konqueror 3.1.2
  • Safari
  • Camino
  • Omniweb
  • IE5.2/Mac OS X (thanks Philippe) (with hack)

とほとんどのブラウザで表示が確認されている。3年前なのでちょっと情報が古いですが…。

とまあ、いろいろ一筋縄では行かない「画像置換」だが、CSSのみで表示をコントロールできるのは捨てがたい大きな魅力なんすよね。(x)htmlを汎用性に扱えるし、大幅なデザインの変更もやりやすい。またプログラムが絡んでいるものは、出力する(x)html部分と見た目を決めるCSSが完全に分離していると、メンテナンスもしやすく効率的に運用できるので「画像置換」は必須だったりします。

結論としては「画像置換」を使うならばリスクを踏まえた上で、そのサイトの目的とターゲットやサイト環境に合わせて、使い所や手法を見極めるというのが現段階での正しいスタンスではないかと思う。

add to hatena hatena.comment (411) add to del.icio.us (141) add to livedoor.clip (60) add to Yahoo!Bookmark (0) Total: 612

Comments:15

？？？？ 07-03-11 (日) 14:14

トラックバックやコメントが書き込めないようですが、何故ですか？

test 07-03-11 (日) 14:34

なんか変なエラー画面が出ますね。

loconet 07-03-11 (日) 15:06

以前行ったコメントスパム用の設定がどうやらきちんと動いてなかったようです。大変申し訳ありませんでした。
ただいま設定を見直している所です。不快な思いをされた方には心よりお詫び申し上げます。

loconet 07-03-11 (日) 15:38

コメント設定をようやく変更しました。
一度確認画面を表示してからでないと投稿できませんが、コメントを受け付けられるようになりました。

toku 07-03-13 (火) 18:36

はてブのコメントみてますか？

loconet 07-03-18 (日) 2:40

> はてブのコメントみてますか？
あ、見ました。いろいろな意見があって参考になります。確かに空のspanは気持ち悪いです。これを使うぐらいなら、imgタグにした方がいいし、その方がweb標準的にも正しいとは思ってます。
ただ諸事情によりどうしても画像置換をせざるを得ない場合もあるとは思うのです。その時には、使用する手法のメリット・デメリットを踏まえた上で使わなくてはいけないと思います。text-indent:-9999pxやdisplay:noneはアクセシビリティに問題がある、Gilder/Levin Methodは空のspanが気持ち悪い、というのを知った上で運用や目的に沿った手法を使いましょうという感じですかね。うーむ。

あいたたたたたたた 07-04-10 (火) 0:31

>「CSS有効で画像は非表示」で見ている環境というと、携帯のフルブラウザやモバイルPCなどが考えられる。
……そういった環境で閲覧されるコンテンツはどんなだろうか、と考えましたか？
サイト（コンテンツ）の目的によりけりで設計を考えましょう。

いててて 07-04-12 (木) 8:05

>>サイト（コンテンツ）の目的によりけりで設計を考えましょう。

全く同感。

こんなこと書くんだったら、基本テーブルレイアウトのxoopsシステムについてどう思うのか書いてくださいよ。

んで、コメントに返事しないのは、なぜ？
返答しないのなら、トラックバックだけでよくないか？

loconet 07-04-22 (日) 23:33

>>サイト（コンテンツ）の目的によりけりで設計を考えましょう。

確かにサイトの目的に沿った設計は大事ですね。
また「CSS有効で画像は非表示」っていう環境で閲覧されるコンテンツは
「画像の閲覧を目的としないコンテンツ全て」ではないでしょうか。

>>んで、コメントに返事しないのは、なぜ？

すいません。諸事情によりブログのメンテナンスが出来なかったのでレスポンスが遅れてしまいました。

>>基本テーブルレイアウトのxoopsシステムについてどう思うのか書いてくださいよ。

XOOPSは触った事ないのでわかりませんが、出力されるHTMLはどうなのかと思います。XHTML 1.0なのにテーブルレイアウトなのはちょっと…。

確か安倍晋三のサイトが以前はXOOPSだったはずですが、今はploneというCMSに変わってるようですね。CMSもいろいろなものが出てるので調べてみると面白そうですね。貴重な意見をありがとうございます。

hama 07-07-16 (月) 4:25

ちょっと違ってるみたいですよ。
参照元のサイトの説明にはSPANは後になってますが、実際の例示では実はSPANが先なんです。

(ai) 07-08-24 (金) 6:35

空SPANなど無意味なHTML文書の必要ない手法もあります。
もちろんCSS有効、画像無効でも正しく使える手法です。
ほとんどのブラウザで使えるようです。

DKIR
http://kikky.net/pc/css_ir2.html

通りすがり 07-09-15 (土) 12:59

楽しめました。面白かったですよ♪

しかしえらく高飛車なコメントが多いっすね。
他人のBLOGに○○について書けなんてどんだけえらいんだ、お前って感じっすね(^^;

アホはスルーで、またいい日記書いてください。
ではでは。

ffra 07-09-15 (土) 22:45

大変参考になりました。ありがとうございました。

>>しかしえらく高飛車なコメントが多いっすね。
同意。
>>んで、コメントに返事しないのは、なぜ？
>>返答しないのなら、トラックバックだけでよくないか？
コメントとトラバは使い道がまったく別物なので代わりにはならないかと。

シマダ 07-11-12 (月) 15:22

通信障害や､ サーバの不具合等で画像が届かないこともあり得ますから､ ｢『CSS有効で画像は非表示』の環境で見ると｣ と言うよりも､ ｢画像が読み込まれなかったときに｣ と言うべきですね｡

匿名 07-12-02 (日) 0:45

＞参照元のサイトの説明にはSPANは後になってますが、実際の例示では実はSPANが先なんです。
あ、確かに。実際のソースはspanが先になってますね。あらら。

＞空SPANなど無意味なHTML文書の必要ない手法もあります。もちろんCSS有効、画像無効でも正しく使える手法です。ほとんどのブラウザで使えるようです。
＞DKIR
＞http://kikky.net/pc/css_ir2.html
おお、z-index:-1;ってところがミソですね。なるほど。いろいろな手法がある中でこれはかなり良さそうですね。

＞>>返答しないのなら、トラックバックだけでよくないか？
＞コメントとトラバは使い道がまったく別物なので代わりにはならないかと。
使い道は確かに違うでしょうね。あと、返答が遅いのは申し訳ないと思っています。夏以降ちょっと立て込んでいて余裕がなかったもので。ようやく落ち着いてきたので更新も再開しようかなと思ってます。

＞通信障害や､ サーバの不具合等で画像が届かないこともあり得ますから､ ｢『CSS有効で画像は非表示』の環境で見ると｣ と言うよりも､ ｢画像が読み込まれなかったときに｣ と言うべきですね｡
確かにそういったケースもあり得ますし、その方がわかりやすいかもしれないですね。「CSS有効で画像は非表示」という表現はいまいちだと思ってはいました。迷ったのですが、とりあえずエントリーはそのままにしておこうかと思います。

Comment Form
Remember personal info

Trackbacks:8

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2007/03/csstextindent99.html/trackback
Listed below are links to weblogs that reference
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない from webデザイナーのナナメガキ
trackback from Linuxのお勉強（CentOSとApache） 07-03-08 (木) 18:01

CSSでやってはいけないこと！画像置換は禁止？！

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない : webデザイナーのナナメガキ取り急ぎ…

trackback from GLog - Gray Scaleのブログ 07-03-08 (木) 19:29

Webデザイン：画像置換

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない
こんな手法があったのですね。しかも３年…

trackback from 国民宿舎はらぺこ 大浴場 07-03-08 (木) 22:09

heading に画像を使いたいならば素直に img タグを使おう

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない (webデザイナーのナナメガキ さま…

trackback from N-Brid　- WEBクリエイティブ Labo. 07-07-26 (木) 11:40

http://wp.n-brid.com/2007/07/26/21/

懸念事項のような問題点については、ホームページをビジュアルなものとして制作しながら、SEO対策を施すということをすると必ず出てくる問題点だ。
…

trackback from N-Brid　- WEBクリエイティブ Labo. 07-07-26 (木) 11:42

text-indent:-9999pxはSEOのスパムになるのかと対策について

懸念事項のような問題点については、ホームページをビジュアルなものとして制作しながら、SEO対策を施すということをすると必ず出てくる問題点だ。
…

pingback from FEデザイナーのいろいろ» Blog Archive » CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない 11-04-22 (金) 10:22

[…] CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない – webデザイナーのナナメガキ […]

pingback from 画像テキストとその周辺について考える | .mersy 13-04-11 (木) 9:42

[…] CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない : webデザイナーのナナメガキ CSSのtext-indent:-9999pxがスパム？？ : 米国に教わる魅力的ブログの作り方 This entry was po […]

pingback from ネガティブtext-indentのお話 | re:ver295 13-08-27 (火) 19:38

[…] コメントを書く 1年くらい前までwebデザインにおいて、デザインに使う画像関係はプロパティに背景画像として使って、文字はtext-indent: -10000pxとかやって、外に置いておいたと思うのです。ただし、ブラウザ上では10000pxの大きなボックスが見えないにしろ、描画されてしまうので、あまりよろしくないと。なおかつSEO的にもおいおいちょっと…という話も。まあ実際に使ってるサイトでも全然トップに来たりだとか、画像とテキストがアンマッチしてるのかとか、わざわざクローラがCSS覗いて画像出して、その画像解析してと果たしてそこまでしているのかも断定出来ないわけですが。 […]

Home > CSS > CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない

Recent Entries
Recent Comments
  • article marketing: I got what you mean,saved to fav, very nice site.
  • boekhoudprogramma mac os: i was just browsing along and came upon your weblog. just wantd to say excellent site and...
  • Jolynn Kloth: Hello my friend! I wish to say that this article is amazing, great written and include approximately...
  • ねんど: 古い記事にコメント失礼いたします。 装飾したいという理由で、テキストを画像とすることが変な感じは しますね。 情報を装飾するという行為はCSSで行うべきなんじゃない...
  • html初心者: 初めておじゃまします。 私も貴ブログで初めて知りました・・・ 勉強になりました！ タグ辞典って読んでるだけで結構おもしろいですよね♪
Recent Ping/Trackbacks
  • 某氏の猫空: ブログをきれいに表示するためにフォントを指定する　【CSS,font-family】
  • re:ver295: ネガティブtext-indentのお話
  • inoue web site: WEBのフォントファミリー
  • .mersy: 画像テキストとその周辺について考える
  • Themes! -WordPress-: OS環境で使えるフォントが違う事で文字組版 ‘タイポグラフィ’があまりに変わるので困る。
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top