WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

月別アーカイブ: 9月 2013

○秘

text-indentが効かない?!

カテゴリ:コーディングTips

2013年9月11日

どうもチーフです。

最近は新入社員の教育に力を入れており、
更新が滞っておりました。


新入社員の教育をしていると、コーディングを始めたばかりの頃につまづいていた箇所を思い返すものです。

今回はそんな、初心者がはまりがちな穴の一角をご紹介。


「text-indentが効かない?!」
text-indentといえば、文章の段落の1行目のインデント幅を
指定する際に用いるcssプロパティの1つです。

そんなtext-indentを用いたテクニックの1つ
「text-indent: -9999px;」
を使って、テキストを飛ばして画像を置換する方法ですが、これには思わぬ穴が。


「text-indent: -9999px;」を指定している親要素に「text-align: right;」が指定されている場合、テキストが飛んでいってくれないんですね。

いくら飛んでいこうとしても親の「右に寄りなさい!」という命令には逆らえないわけです。親のいうことは絶対。


実際にtext-indentを指定しているのは子要素ですが、
親要素が原因というと、少し気づきにくいところでした。

ということで、「text-indent: -9999px」が効かないときは、まずは親要素を確認してみてください。

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2013年9月
« 7月   10月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アーカイブ