• ベストアンサー
  • すぐに回答を!

<h1>表示テキストを0emとした場合の処理について

  • 質問No.4514528
  • 閲覧数170
  • ありがとう数0
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 26% (8/30)

初歩的な事で申し訳ありませんがご教授下さい。

見出しをテキストではなく画像として、なおかつ背景画像として処理をしたく、表示される結果に困っております。
特に意味は無いのですが、どうせ見出しに画像を使用するなら背景画像として<h1></h1>に変換し、何かSEO的にも良いかと勝手に判断しているのですが…
そこで、以下のような例を挙げさせて頂きます。

例)
<div id="sample">
<a href="hoge.html"><h1>あいうえお</h1></a>
<p>あいうえおの説明?</p>
</div>

div#sample h1{
display: block;
margin: 0;
padding: 0;
width: 340px;
height: 150px;
background-image: url(./img/sample.jpg);
background-repeat: no-repeat;
font-size: 0em;
color: #fff;
}

上記の場合FireFoxではそのまま背景画像が表示され、<h1></h1>内に入力したテキストも目には付きませんが、IEでの表示に限って約1ピクセル程の大きさでテキストが表示されてしまいます。

そこで皆さんにお伺いしたいのはIEでこの小さなテキスト表示を回避する方法はないかとお伺いをした次第です。
他のサイトでも同じことを行っているのですが上記のような現象は無く、今回に限って表示されてしまいます。
※表示はIE7での確認です。

解る方が居ましたら是非ご教授下さい。宜しくお願いします。

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー
operaは使われたことはありますか?
最小フォントサイズというのをユーザーが指定できるようになっていて、どんな指定をしてもそれ以上は小さくはできません。

よくtext-indent:-9999px;は聞きますが、font-size:0;はスパムと判断される可能性がかなり高くなるのでむしろやめたほうがいいと思います。
それと背景画像での表示はかなり状況を熟知していないと利用は控えるべきだと思います。
携帯等への対応を見越してというのならありえる話ですが、おそらく今の質問者さんのスキルから察するに素直にimgを使ってalt属性を使用される方がよいと思います。
補足コメント
ishibo_062

お礼率 26% (8/30)

operaはブラウザ確認のみに使用しており、通常の私的使用にはFireFoxがメインです。
また、アドバイスを頂いた通りtext-indent:;でうまく対処が出来ました。
font-size:0;に関してスパムと判断されると言うのは良く耳にしますが、今後は出来る限り利用を控えたいと思います。

今回は本当にありがとう御座いました。
投稿日時:2008/11/28 21:04
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ