text-indent

Home>CSS>プロパティリファレンス>text-indent

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

text-indentプロパティの役割

text-indentプロパティは、1行目を字下げします。

日本語では1行目を1文字分下げる、という文書作法があり、それに対応することができます。

text-indentプロパティに設定できる値

％ 適用したブロックレベル要素の横幅を100とした百分率。
単位 整数値とpx, em, exなどの単位で指定する。

整数値にはマイナスの値を指定することも可能です。

text-indentプロパティの使い方

<p style="text-indent:3em">この部分のテキストは一行目だけを3文字分インデントします。二行目からの文章はインデントされません。このインデントが効く範囲はブロック要素の範囲内です。</p>

この部分のテキストは一行目だけを3文字分インデントします。二行目からの文章はインデントされません。このインデントが効く範囲はブロック要素の範囲内です。

画像リンクをつくる

text-indentプロパティにマイナスの値を設定することで、文字をなくし、背景画像をbackground-imageプロパティで指定して、ボタン画像のように表現します。

<p><a href="http://www.iltt.info/" style="display:block;text-indent:-9999px; background-image:url(../../../data/img/global/sample.jpg); background-repeat:no-repeat;width:32px;height:32px;">It's a long way to the top</a></p>

It's a long way to the top

この方法は、リンクテキストを書いた要素を、displayプロパティによってブロック要素にしてから、画像の幅と高さを指定し、リンクテキストをtext-indentプロパティに-9999pxを指定することで、画面外に出します。
しかし、要素の存在自体が消えたわけではなく、テキストのみが移動しただけなので、元の位置に設定したリンクは消えません。

関連リンク

よく読まれている記事

UpDate:2010-10-18