低価格・高品質・最速のHTMLコーディングはクロノドライブへ

text-indentが効かない?

とある案件で text-indet: -9999px で背景を表示させるテクニックを使用したところ、text-indent が効かない現象が起こったため、発生条件・原因・対処法をまとめます。

※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。 ユーザに見えている画像の文字と全く関係のないテキストをtext-indentで非表示にすることはスパムに当たる可能性が強いので行わないようにしましょう。

発生条件

text-indet が指定されている親要素に text-align: right が指定されていると発生します。
恐らくtext-alignが効くブラウザすべてで発生するものと思います。
◆サンプル

原因

text-align: right で右揃えにしているため、text-indet: -9999px で左側に飛ばしても右側のテキスト尻がくるという単純なものでバグでも何でもありません…。

対処法

text-indent: -9999px と一緒に text-align: left; を指定しておくことで対処できます。

———-

初めは、IE6で確認しため「またIE6のバグか・・・」と頭を抱えましたが、原因は自分のミスでしたorz
しかしながら、意外と見落としやすいミスではないでしょうか・・・!

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ