- ベストアンサー
cssでの画像置換の正しいやり方
現在cssの勉強をしています。 簡単そうなページを組みなおしたりしながら覚えているのですが、毎回画像置換の方法になやみます。何も考えなければ、text-indent:-9999;などでやってしまうのですが、色々なサイトで問題視されているようにあまり好きではありません。かといって、アンカータグの中身を何もかかずにdisplay:block;とするのもへんな感じがしますし…空spanも…って思います。なんだか気持ち悪いですし、構文的にも正しいといえないと思います。そもそもSEOスパムになるのかとか、そういう部分は置いといて、これが一番しっくりくる！ってやり方ありましたら教えていただけますでしょうか？ 「これが正式な方法です」っていうのはないと思いますが、少しでも問題点の少ない書き方を知りたいです。よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
結論としては今のところcssでロールオーバーには完全対応できていないのでjavascriptを使う方が無難ということになるように思います。 画像置換を使う理由は大抵css spriteを利用したい時だと思いますが、これはかなり大規模なサイトでないとやる意味ないので。googleみたいにSEOなんて無視して負荷を下げたい時に使うテクニックですよ。 ですが、どうしてもやりたいのであればie6以上で対応可能なlist-item-imageを利用した画像置換がオススメです。 spanをhtmlに追加する必要が出てくることもありますが、空にはなりません。 全部の確認はできていませんが、スクリーンリーダー等にもいくつかは対応していたはずです。 将来的にはoperaが実装しているようにcontentで置換できるようになるかもしれません。alt属性の代替みたいなのもcssで指定できるとかならないとか。 あと追記ですが、a要素内のimg要素のalt属性はちゃんとキャッシュされますよ。この場合のSEOは大抵yahoo!対策だと思いますが、アンカー外のalt属性も一応キャッシュされているようです。ただし、基本的に文章と同じくらい優先度が低くなるため、あまり重要視されていないのでしょう。
その他の回答 (5)
- MAXXXX
- ベストアンサー率0% (0/1)
ずばりこれでしょう。 <html> <head> <title></title> <style type="text/css"> <!-- a { display:block; width:100px; height:50px; } a:link { background:url(http://k.yimg.jp/images/top/sp/logo.gif); } a:hover { background:url(http://www.goo.ne.jp/img2/logo/gh_logo2.gif); } --> </style> </head> <body> <a href="#"></a> </body> </html>
お礼
回答ありがとうございます。 実際僕もtext-indentの他にこのやり方も使うことあるのですが、a要素の中身が空っぽというのがどうも気になってしまうのです。 どうもありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
IE以外ではこんな感じ？ <style> a img.hide{ display:none; } a:hover img{ display:none; } a:hover img.hide{ display:inline; } </style> <a href="#"> <img src="1.jpg"><img src="2.jpg" class="hide"> </a> あとはIEに例外処理をいれればいいでしょう
お礼
回答ありがとうございます。 このやり方知りませんでした。シンプルなので、個人的に好みではあります。参考にさせていただきます。
- nori_007
- ベストアンサー率35% (369/1048)
質問は友人にしているのではありません。 何も知らない人に、質問するのですから、状況を説明し、何をしたいのか具体的に書いて頂かなければ良い回答は得られないと思います。 何となく質問の意図は分かりますが、まだ判りません。 想像を働かすと、画像でボタンを作成したが、画像だけだとスタイルシートが有効で無い場合、何も表示されない。スタイルシートが有効で無い場合は、テキストを表示させたい。 今までは、text-indent:-9999; を利用していたが、これで良いのかと言う疑問を感じている。他に、良い方法は無いか？ と言う内容でしょうか。 上記の質問に関して、自分ならボタンは枠だけにして、「リンク」等の表記はテキストにします。テキストじゃダメなんですか？ 後は、visibility: hidden; 等はどうでしょうか、もし SEO を意識するのでば text-indent:-9999; と同じかも知れません。
お礼
回答ありがとうございます。 しかし解決には至りませんでした。
- yambejp
- ベストアンサー率51% (3827/7415)
具体的になにをなさりたいか書かないと明後日な回答になる可能性が高いです。 補足してください
補足
中途半端な質問で申し訳ありませんでした。今回、画像のリンクボタンを作って:hoverしたときに画像が変化する、いわゆるロールオーバーをするときのhtml＆cssの書き方を教えていただきたく質問させていただきました。 よろしくお願いします。
- nori_007
- ベストアンサー率35% (369/1048)
>毎回画像置換の方法になやみます。何も考えなければ、text-indent:-9999;などでやってしまうのですが 基本、画像置換をしなければならないデザインに問題が有りませんか？ もし、全て画像で有れば、そのまま画像を配置すればよいだけでは？ なぜ、画像をわざわざ置換するのでしょうか、質問の意図が伝わっていないと思います。 >、アンカータグの中身を何もかかずにdisplay:block;とするのもへんな感じがしますし…空spanも…って思います。 この意味も分かりません。
補足
説明不足ですみません。ロールオーバーの事で悩んでいます。重要なことを書いていなかったようで申し訳ありませんでした。 display:block;や空spanもロールオーバーをするためのものです。 たとえば、width:100px; height:50px;の画像が一枚あったとして、ちょうど半分上が最初に表示されている画像。ちょうど半分下が、hoverしたときに変化する。こんな場合のhtml＆cssの書き方を教えていただければと思います。
お礼
回答ありがとうございます。 詳しく解説していただきどうもありがとうございます。cssだと完全に対応することは無理なんですね。IE6を切り捨てることはちょっとできませんが、list-item-imageに関して調べてみたいと思います 色々ととても参考になりました。ありがとうございます。