• ベストアンサー

cssのtext-indentでテキストを消すのは古い?

今日読んでいた雑誌に「以前は流行っていたが、最近はtext-indentでテキストを消して(画像を表示させて)いるサイトをあまり見かけなくなった」と書いてありました。 私は最近もこの方法を使っていたので、少し不安になりました。画像表示をoff、CSSをonにした場合に全く何も表示されなくなる・・・という事以外に何かデメリットがあれば教えてください。 また、実際に制作されている方はこの方法を使われているかをお聞きしたいです。 よろしくお願い致します。

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

  • ベストアンサー
noname#33956
noname#33956
回答No.3

text-indentで飛ばしても、大きいモニタではチラッと見えてしまう場合があります。21インチ以上や、15インチデュアル環境なんかではチラチラ見えてしまうことが…。最近大きいモニタやワイドサイズ、デュアルを使う方も増えているのもあるでしょうね。 また、floatをかけたbox内の要素にtext-indentを適用した場合、winIE5でテキストも背景もインデントされてしまうので、まったく画像が見えない状態になってしまうデメリットもあります。 あとはtext-indentはSEO的にアウトという噂も…あくまで噂ですが。

apple_bananana
質問者

お礼

回答ありがとうございます。お礼が大変遅くなってしまいすみません。 text-indentの文字を実際に見たことがないので、チラッと見えるなんて思ってもいませんでした(^_^.)確かに!と思いました。 winIE5でのご意見はぜひ今後の参考にします。 この方法をhxタグに使ったサイトは実際にひっかかっているので、今はまだseo的にもまだ大丈夫なのかなぁと思っています。 回答ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • key-child
  • ベストアンサー率54% (25/46)
回答No.2

下記ではダメなの? <img src="画像パス" alt="画像の代替文字"> デメリット ・画像on/CSSoffだと両方表示されて見づらい ・画像on/他CSS適用だと・・・ その技法のメリットが思い浮かばないのだが・・・

apple_bananana
質問者

お礼

回答ありがとうございます。お礼が大変遅くなってしまい、すみません。 altタグよりもhxタグの方がseo的に強いと聞いていたので、この方法を使っています。実際に比較したわけではないのですが・・・。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • taba
  • ベストアンサー率61% (349/567)
回答No.1

デメリットは分からないのですが、ブラウザによってどう描画されるか分からないという不安はありますよね。 想像ですが、普通にdisplay:none;すれば解決するので、使われなくなっているだけなんじゃないでしょうか。私も自分のサイトではそうしています。spanタグなどで余計に囲む必要が出てきますけど、表示させないというテクニックを使っている時点でイレギュラーなので、構わないかなと思っています。 「画像表示をoff、CSSをonにした場合に全く何も表示されなくなる」のは同じですけれど。

apple_bananana
質問者

お礼

回答ありがとうございます。 text-indentで、そのテキストと同じ内容の画像を背景に指定しておけば、ソースも綺麗だし、スパムにもならないだろうな・・・と思い、「これから主流になる!?」くらいに思っていたので、雑誌の内容は意外でした。 ブラウザごとの表示にも悩まされてばかりです(^_^.) 実際に使用されている方のご意見、参考になりました。ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • float と text-indent について

    floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK) 同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。 2つの疑問についてお願いいたします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- p { background-color: #99CC00;   text-indent: 2em;   font-size: 12px} img { float: right} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • text-indentが効かない。。。

    こんにちわ。みなさまのアドバイスにいつも助けられ感謝の毎日ですが、またしても困ってしまったのでご助言いただければ幸いです。 HTMLのヘッダー部に「お問い合わせ」や「アクセス」などの小さなナビゲーションを作り、CSSで以下のように定義しました。 .tnavi    {width: 285px; height: 31px; margin:0 0 0 60px; list-style: none; } .tnavi li  {float:left; margin-right:2px; text-indent:-9999px;} .tnavi li a {width:93px; height:31px; display:block;} 表示はgif画像を出すつもりなのですが、画像の上に思い切り「お問い合わせ」や「アクセス」とリンクテキストが表示されています。aタグ側にもとりあえず定義してみましたが変わりありません。 他に確認すべき項目ありますか?

    • ベストアンサー
    • HTML
  • text-indentとIE6との関係性

    <p><a href="#"><img scr="画像" /></a></p> 上記のようなタグ構造で、CSSで誤って p { text-indent: -9999px; } としたところ、画像が消えてしまいました。 ただFirefoxやsafariでは問題なくリンク画像として表示されました。 これはIE6のバグですか?

    • ベストアンサー
    • HTML
  • text-indentの画像置換とimgタグ

    CSSのtext-indent-9999pxの画像置換とimgタグについて質問です。 上記はどちらも画像を表示させると言うことに関しては、同じだと思うのですが 何が違うのでしょうか? CSSで画像表示させれば、何かが楽になるとかあるのでしょうか? よろしくお願い致します。

  • オンマウスで画像変更(CSS)

    リンク画像にカーソルを乗せると画像が変わる、というものをやりたいのです。 シンプルに記述できる分JavaScriptよりもCSSの方がいいのかなと思ったのですが、 CSSだとimgタグではなくbackgroundを入れ替える形になり、 そうするとaタグでテキストを使い、そのテキストを隠さなければいけません。 display:none;やtext-indent:-9999px;は使いたくないのですが、 他の方法はありますか? また、こういうオンマウスで画像変更ってJavaScriptとCSSどちらが主流なのでしょうか? よろしくお願いします。

    • 締切済み
    • CSS
  • IE7でのtext-indent:-9999px

    複数ブラウザ(Win:IE7,8、Firefox3~、Mac:Safari3~、Firefox3~)対応のコーディングをしています。 申込ページなどでinput type="button"のvalueに対して、CSS側でtext-indent:-9999pxを設定すると、 他のブラウザでは問題ないのですが、IE7だけ、inputごとページ外に移動してしまいます。 inputボタン自体には、いかのような記述をしています。 form p#bt-send input { border:none; text-indent:-9999px; cursor:pointer; width:217px; height:41px; background:url(ボタンイメージのパス) no-repeat center 0%; } テキストインデントを使わないやり方で、inputのvalueを見せないやり方はありますか? ちなみにボタンイメージには「送信」という文言になっており、value="送信"としていますが、 テキストインデントを使わないと、ボタンイメージの上にデバイスフォントが出てしまいます。

    • ベストアンサー
    • HTML
  • text-indentによる字下げはIE6で不具合あるので使えない?

    字下げをするときに、CSSでtext-indentを使った場合、IE6では印刷時に不具合があるようです。具体的には、ブロックが複数ページに跨った場合、次ページの最初の部分でブロックの途中なのに字下げが入ってしまいます。下のアドレスはそれに関する記事です。 http://members.at.infoseek.co.jp/cssbug/detail/winie/b084.html これを避ける方法を知っている方がいらっしゃいましたら教えてください。全角スペースで字下げをするしかないのでしょうか。

    • ベストアンサー
    • HTML
  • cssのプリントについて

    現在HPを制作しているのですが、画像を背景画像として表示しているのでプリント時に画像が表示されません。 検索をしてみたところ、 printのcssを別に作ることで解消されるということは分かったのですが、試してみても画像が表示されません。 参考にしているサイトは http://blog.loaferz.com/?eid=532897 このサイトです。 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> を<head>内に記述し、 print.cssの中身に @media print{ /*この中にCSSを記述*/ } となっているので /*この中にCSSを記述*/ ↑ここにcssをコピペしたのですが全く表示されません。 他のサイトも参考にしてみたのですが、printのcssを1から作るとなっていますが、それしか方法はないのでしょうか? みなさんはどういった方法でprintで背景画像を表示させていますか? よろしくお願いします。

    • ベストアンサー
    • CSS
  • cssで作成するロールオーバーイメージのdisplay:blockとt

    cssで作成するロールオーバーイメージのdisplay:blockとtext-indentについて。 web初心者です。cssで作るロールオーバーを勉強しています。 なんとなく理解でき、上手く表示されるのですが、いまいちわからない所があります。。。 まずなんでa要素をブロックにするのかということです。 もう一つが、text-indentなのになぜimg要素が画面外に飛ばせるのかということです。 よろしくお願いします。

  • <style type="text/css">タグについて

    <style type=”text/css”><!――body{background:#ffffff url(画像URL) fixed no―repeat 0% 0%;}--></style> タグをつかっているのですが、二つ以上の画像を使おうとすると画面に表示されなくなってしまいます。 そういった場合、二つ以上の画像を使用することは出来ないのでしょうか?