CSS3: text-indent プロパティ - テキストの1行目のインデント

■ 概要

項  目説  明
記述形式 セレクタ {text-indent: }
値 の形式 数値(長さ,%) [ hanging || each-line
初 期 値 0
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 ブロック・コンテナ
継  承 する

■ 解説

text-indentプロパティ は,テキスト1行目の インデント(字下げ)の指定をします。

指定できるインデント幅の値は,pxemex などの単位をつけた数値と,親要素の幅を基準にした割合で表した % をつけた数値です。

CSS3 では,さらに,ぶら下がりインデントpaddingプロパティ による指定を使用しないでも可能となります。

説  明
数 値 インデント幅の値を数値で指定します。 単位は下表を参照。
hanging ぶら下がりインデントを指定します。
この場合,通常とは逆のインデントとなり,開始行を除いてそれ以外の行がインデントされます。
each-line ブロック・コンテナの最初の行だけではなく,強制改行後の次の行はすべてインデントされます。 ただし,自動改行の場合はインデントされません。

なお,paddingプロパティ による指定と一緒に用いると,値:hanging を使用しないでも,ぶら下がりインデントも指定することが可能です。 (使用例 参照)

数値によるインデント幅の指定は,次のような単位を付けて可能です。

単位説  明
px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを1とする単位です。 
ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
親要素の widthプロパティ の値を基準にして割合を%値で指定します。

■ 使用例( text-indent プロパティの利用)

HTMLソース
HTML
<body> ~ </body>
<div style="text-indent: 1em;">
  1文字インデントです。1文字インデントです。1文字インデントです。
  1文字インデントです。1文字インデントです。1文字インデントです。
  1文字インデントです。1文字インデントです。1文字インデントです。
</div>
<br>
<div style="text-indent: 3ex;">
  3ex-indent: abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr
  stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr 
  stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr 
  stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. 
</div>
<br>
<div style="padding-left: 1.2em; text-indent: -1.2em;">
  ★ ぶら下がりインデントです。ぶら下がりインデントです。ぶら下がり
  インデントです。ぶら下がりインデントです。ぶら下がりインデントです。
  ぶら下がりインデントです。ぶら下がりインデントです。
 <br>(ほとんどのブラウザーで正しく表示できます。)
</div>
<br>
<div style="text-indent: 1.2em hanging;">
  ★ ぶら下がりインデントです。ぶら下がりインデントです。ぶら下がり
  インデントです。ぶら下がりインデントです。ぶら下がりインデントです。
  ぶら下がりインデントです。ぶら下がりインデントです。
 <br>(対応ブラウザーでのみ正しく表示できます。)
</div>

ブラウザー 表示例
1文字インデントです。1文字インデントです。1文字インデントです。 1文字インデントです。1文字インデントです。1文字インデントです。 1文字インデントです。1文字インデントです。1文字インデントです。

3ex-indent: abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr stuv wxyz. abcdef ghijkl mnopqr stuv wxyz.

★ ぶら下がりインデントです。ぶら下がりインデントです。ぶら下がり インデントです。ぶら下がりインデントです。ぶら下がりインデントです。 ぶら下がりインデントです。ぶら下がりインデントです。  
(ほとんどのブラウザーで正しく表示できます。)

★ ぶら下がりインデントです。ぶら下がりインデントです。ぶら下がり インデントです。ぶら下がりインデントです。ぶら下がりインデントです。 ぶら下がりインデントです。ぶら下がりインデントです。  
(対応ブラウザーでのみ正しく表示できます。)

■ 備考

【参考ページ】