Home > CSS > CSSの画像置換についてコメントまとめ

CSSの画像置換についてコメントまとめ

  • 2007-03-20 (火) 1:32
  • CSS

以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。

・yakonyan:<span></span>はない…
・sac3937:前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。
・chaperatta:CSSの画像置換で、画像OFFのときに文字が消えない方法(だけど空タグを使うのがあまり納得できない??
・urajima:text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。
・makitani:んで空タグを推奨ってのは変でないかい?
・monochromebox:何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・rusica:「画像置換」は必須別に必須ではないと思う。それと空のspan要素はありえない。
・webmugi:<span></span>はやっぱり気持ちよくない

いろんな意見がありますが、やはり空のspanへの嫌悪感が強いみたいですね。確かに空のspanは文法的にも間違ってるし、気持ち悪いのは確かです。

・infoblog:”「CSS有効で画像は非表示」で見ている環境”の人もいるんだろうけど、希少なケースだと思われるので、正直切り捨てていいと思われる。画像置換はよく使っているので禁じ手になるとキツい。
・kits:「欠陥」を重大と捉えるかどうか。携帯端末に対してはmedia属性で振り分け可能では。

また、「CSS有効で画像は非表示」というのは携帯電話だけでなく回線の遅いモバイルPCなども考えられるので、携帯用のCSSのみでは対処しきれない場合もあるのでは、と思いますがどうなんでしょう。

・leva:コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。
・masakanou:普通にimg要素使いますが。
・retlet:Image Replacement について云々。使いたい場合は空span要素で画像を被せましょうという話。小規模サイトだと普通にimg要素使った方がメンテナンスしやすかったりするけどね。
・monochromebox:何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。
・kana-kana_ceo:もう、おとなしく、img と alt でいいんぢゃないの?
・inazuma2073:携帯用CSSを用意すればいいんじゃないかな。空のspan使うくらいならimgでいきたい

テキスト要素を「画像」として表示したいのであれば、imgタグを使えばいい。これは文法的にも何も間違ってはいないというか、これが本来の使い方です。これはもうほんとにおっしゃる通り。

画像置換を採用すべきかどうかは、その長所と短所をしっかり踏まえたうえで、慎重に検討されるべきです。コンテンツとして有意な画像、文字情報を含んでいる画像については、CSS側から表示を制御するよりも、img要素として(適切なalt属性値とともに)マークアップしたほうが、アクセシビリティ的には好ましいでしょう。(画像置換という手法 | Web標準Blog | ミツエーリンクス

それでも現状では画像置換を使用せざるを得ない場合もあるのではと思っています。SEO最優先だったり、短納期で素材が決まらず枠組みだけ先に作るみたいな場合とか(制作者サイドの泣き言ですかね…)。

とりあえず「text-indent:-9999px」や「dispay:none」はアクセシビリティに問題がある、Guilde/Lebin Methodは、空のspanがhtmlの文法的におかしい、など手法の問題点を十分把握しておかなければ、と思ってのエントリーではありました。

・hxxk :before擬似要素を用いる手法(拙著内にて解説)では、「CSS有効で画像は非表示」でも情報が伝えられます。IE様が対応していないという関係でまだまだ最適解ではないのですが。/もしくは素直にimg要素でマークアップ。

hxxkさんの「:before擬似要素」を使うという手法ですが、IEが対応してないんですよね。実際には以下のようなソースになるのかと。ソースはシンプルで済みますね。

h6:before {
content:url(ir_test.gif);
display:block;
}
h6{
width:150px;
height:50px;
overflow:hidden;
}
<h6>SITE TITLE</h6>
SITE TITLE

結局正解なのはimgを使えってことなのかもしれませんが、よりよい最適解があるのならば探していきたいですね。「実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips」はまだ未読ですが勉強のために読んでみようかなと思います。

実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips

実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips

posted with amazlet on 07.03.20

市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 910

Amazon.co.jp で詳細を見る

add to hatena hatena.comment (30) add to del.icio.us (17) add to livedoor.clip (10) add to Yahoo!Bookmark (1) Total: 58

Comments:3

通りすがり 07-05-15 (火) 1:45

>「実践Web Standards Design—Web標準の基本とCSSレイアウト&Tips」はまだ未読ですが勉強のために読んでみようかなと思います。

この本の中では、しっかり画像置換つかってるけどね。

みみ 08-02-05 (火) 15:24

こんにちは。いつも勉強させていただいてます!

あのう…画像置き換えにすると、css切った時の見え方が、文字だけの美しい構成にできたりしませんか?
切り取ったタイトル画像がタイトル部に切れっぱなしの状態でいたり、リンクのボーダーの入ったボタン画像がこちらも切れ切れの状態で縦一列に並んでいたり。
FireFoxでcssを切った時も確認するのですが、その時にぎゃあきたないよう〜!て、思いたくないのが本音です。

cssまったく使わない環境になる場合って、それほど考える必要はないでしょうか…。そこがいつも悩むところなんです。
画像offでcss onのときもちゃんと見えて、なおかつcss offの状態でも美しく見えるようにするには、そこまで考えて画像を作るしかないのかなぁ…。
管理人さんの方法も素敵なんですが、ぜひとも透過gifも使いたいし…何かいい方法、ないかなあって、いつもウェブ上を当て所なく彷徨っています。

ウェブの神様、迷える子羊に愛の手をT_T

ねんど 09-02-09 (月) 6:00

古い記事にコメント失礼いたします。

装飾したいという理由で、テキストを画像とすることが変な感じはしますね。
情報を装飾するという行為はCSSで行うべきなんじゃないかと。
img要素は、図版などに使うべきなんじゃないかなと思います。

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2007/03/css_1.html/trackback
Listed below are links to weblogs that reference
CSSの画像置換についてコメントまとめ from webデザイナーのナナメガキ
trackback from SEO対策セミナー・コンサルティング・塾 07-03-20 (火) 12:50

SEO対策セミナー・コンサルティング・塾

本物のSEO対策!3億2100万件中1位表示の実績!会員制SEOサポート塾が遂に開講!

Home > CSS > CSSの画像置換についてコメントまとめ

Search
Feeds
Meta

Return to page top