よく文字をtext-indent：-9999pxで飛ばして、背景に画像を置く手法がありますが、CSS Sprite利用時はしかたないとしてそれ以外はIMGタグによるマークアップがスタンダードなんでしょうか。社内でレギュレーションを考える上で参考にしたいです。
Googleは、装飾文字ならWebフォントで表示する方法を推奨しているようです。どうしても画像で置き換えたいのなら、heightを0にして、padding-topに画像高さをピクセル指定し、あふれた文字をoverflow:hiddenする方法もありますよ。
既に回答されていますが、text-indent：-9999pxで飛ばすのは古いというかスパム扱いされる恐れがあるので、SEO的にもどうかと思われていますね。でも、そういう同業他社がまだいるのなら競合とししてはありがたいです。
テキスト情報を埋め込みたいという理由だけなら、CSSによる画像置換はやらない方がいいと思います。ただ、サイト全体で使用するパーツの場合は、imgタグを使わず、クラスを指定して表示する方が、記述が短くなり、サイト全体で定義されてるパーツなんだということがわかりやすかったりします。
<img src="img/btn_detail.png" alt="詳細へ" width="120" height="40"> ↓ .btnDetail { display:inline-block; width:120px; height:40px; background:url(../img/btn_detail.png) no-repeat; overflow:hidden; text-indent:-9999px; } <span class="btnDetail">詳細へ</span>
みんなの回答 3 件
Googleは、装飾文字ならWebフォントで表示する方法を推奨しているようです。どうしても画像で置き換えたいのなら、heightを0にして、padding-topに画像高さをピクセル指定し、あふれた文字をoverflow:hiddenする方法もありますよ。
text-indent-9999pxによる画像置換えと隠しテキストスパム(ペナルティ)について | SEOテンプレート比較
http://www.seotemplate.biz/blog/spam/9274/既に回答されていますが、text-indent：-9999pxで飛ばすのは古いというかスパム扱いされる恐れがあるので、SEO的にもどうかと思われていますね。でも、そういう同業他社がまだいるのなら競合とししてはありがたいです。
テキスト情報を埋め込みたいという理由だけなら、CSSによる画像置換はやらない方がいいと思います。ただ、サイト全体で使用するパーツの場合は、imgタグを使わず、クラスを指定して表示する方が、記述が短くなり、サイト全体で定義されてるパーツなんだということがわかりやすかったりします。
<img src="img/btn_detail.png" alt="詳細へ" width="120" height="40">
↓
.btnDetail {
display:inline-block;
width:120px;
height:40px;
background:url(../img/btn_detail.png) no-repeat;
overflow:hidden;
text-indent:-9999px;
}
<span class="btnDetail">詳細へ</span>
関連するトピックス