text-indent

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

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

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

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

[CSSの記述]

.sampleA { text-indent:5em; }

[HTMLの記述]

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

[ブラウザ上の表示]

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

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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

CSSレイアウト実践講座カテゴリ