text-indent

CSSプロパティ「text-indent」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

text-indent

テキストのインデント(字下げ)を指定するプロパティ。

段落の最初にくる文字の位置を指定することができる。値にはマイナスの値も指定することができる。

数値で指定 px、pt、em等の単位で数値を指定。
%で指定 親ボックスに対する割合で指定する。この場合、親ボックスの幅により、指定した部分の幅が変動する。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { text-indent:5em; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

値に5emを指定した場合、段落の最初の部分に5文字分のインデントが取られる。テキストが長くなり複数行となった場合は2行目以降には適用されず、あくまで冒頭部分のみにインデントが適用される。

サンプル(B)

[CSSの記述]

.sampleB { text-indent:-20px; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

値に-20pxを指定した場合、段落の最初の部分が20px分左にインデントされる。text-indentの値にはマイナスの値も指定することができるが、スパム的な利用方法は認められない。