• はてなブックマーク
  • 暮らし
  • CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
  • Twitterでシェア
  • Facebookでシェア

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

暮らし カテゴリーの変更を依頼 記事元:loconet.web2.jp
適切な情報に変更
406users がブックマーク コメント 77

    記事へのコメント77件

    • 注目コメント
    • 新着コメント
    kitokitoki
    非表示化

    その他
    vanish_l2
    蔵がＯＫというならＯＫな手法って認識だなー＞テキスト飛ばし

    その他
    uenoantenna
    うーん

    その他
    sakuragaoka
    <span></span>の気持ち悪さを我慢するか、画像offでCSSがonの環境を取るか・・のトレードオフってことなのかな。。

    その他
    t32k
    - Tags: #CSS

    その他
    tsukkee
    やっぱり空のspanタグがどうにもだめな気がする

    その他
    gaochao
    「text-indent:-9999px;」や「display:none;」で悩んだ時にはこれ

    その他
    webmarksjp
    css

    その他
    lordkf
    でも、このサイトは「-9999px」を使っている。

    その他
    eclucifer

    その他
    miracle1998
    どっちがいいんだろぉ～？(>_<)

    その他
    Naoki1
    画像置換方法テクニック

    その他
    wims_Tea
    画像置換方法テクニック

    その他
    shinobine
    もう画像でaltのみにしろってことなのか…？

    その他
    suiii
    css 画像置換

    その他
    yoshiii
    「外枠のh5を画像のサイズにして、中身のテキスト部分の後ろに空のspanを埋め込み、それをblock要素にして背景画像を表示し、position: absoluteで外枠のh5の左上に合わせ、widthとheightを100%にして、略、かなりトリッキーな、」

    その他
    kurobuchi
    css表示で画像off時に出ないからか。かといって空spanも抵抗あるなぁ。

    その他
    irohiroki
    画像置換

    その他
    mrnoon
    「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥

    その他
    ludens-ken
    CSS Tips

    その他
    as365n2
    テキストのかわりに背景画像を見せる手法。CSS有効/画像非表示の場合、なにも出なくなってしまう。

    その他
    inopie
    [[CSS]display:noneやoff-leftの代わりになる手法

    その他
    rcorco
    なるほど・・・

    その他
    Luelue
    なるほど・・・

    その他
    mallowlabs
    ロゴを画像で置換する方法。賛否両論。

    その他
    minasera
    　やっぱ「-9999px」ってなんか嫌だよねえ。

    その他
    Trino-o-niku
    でゅはぁっ

    その他
    nshash
    コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。

    その他
    leva
    コメントで指摘されているとおり、img要素+補完CSSでの対処が無難ですね。

    その他
    yakonyan
    <span></span>はない…

    その他

    注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

    アプリのスクリーンショット
    いまの話題をアプリでチェック！
    • バナー広告なし
    • ミュート機能あり
    • ダークモード搭載
    アプリをダウンロード

    関連記事

    CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

    「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わ...

    ブックマークしたユーザー

    • gambol2015/11/26 gambol
    • haruharujane2012/09/12 haruharujane
    • kohsuke-shoegazer2012/08/30 kohsuke-shoegazer
    • kitokitoki2012/07/18 kitokitoki
    • sorausa11242012/05/01 sorausa1124
    • alice_r2012/03/19 alice_r
    • quiet-note2012/03/12 quiet-note
    • sevenstars0002012/03/03 sevenstars000
    • yzx2012/02/01 yzx
    • mokumokuzai2011/05/11 mokumokuzai
    • xxxxxeeeee2010/10/06 xxxxxeeeee
    • lll_nat_lll2010/08/10 lll_nat_lll
    • goodbabies2010/08/05 goodbabies
    • haphands2010/06/03 haphands
    • ar02010/05/24 ar0
    • rskmt3462010/05/17 rskmt346
    • guangda2010/02/26 guangda
    • kugutu42009/11/22 kugutu4
    すべてのユーザーの
    詳細を表示します

    同じサイトの新着

    同じサイトの新着をもっと読む

    いま人気の記事

    いま人気の記事をもっと読む

    いま人気の記事 - 暮らし

    いま人気の記事 - 暮らしをもっと読む

    新着記事 - 暮らし

    新着記事 - 暮らしをもっと読む

    同時期にブックマークされた記事

    いま人気の記事 - 企業メディア

    企業メディアをもっと読む

    はてなブックマーク

    公式Twitter

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2026 Hatena. All Rights Reserved.