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

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

○秘

text-indentが効かない?!

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

2013年9月11日

このエントリーをはてなブックマークに追加
はてなブックマーク - text-indentが効かない?!
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
text-indentが効かない?!チーフコーダーのCoding Memo | Webcoding.jp

どうもチーフです。

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


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

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


「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型

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

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

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

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

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

カレンダー

2017年12月
« 1月    
 123
45678910
11121314151617
18192021222324
25262728293031

アーカイブ