text-indent プロパティは、要素のテキストコンテンツの先頭行の初めにどのぐらいの水平スペースを挿入するかを指定します。

包含ブロック要素のボックスの左端(右から左のレイアウトの場合は右端)に対して水平スペースが挿入されます。

初期値0
適用対象ブロックコンテナ
継承継承する
相対値の基準包含ブロックの幅
メディアvisual
計算値指定されたパーセンテージ値または絶対的な長さ、続けて指定された任意の数のキーワード
Animation typelength または percentage, calc();
正規順序The length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.

構文

/* <length> 値 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> 値
   包含ブロックの幅に対する割合 */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

<length>
<length> を絶対値としてインデントが指定されます。負の値も許可されます。利用できる単位は <length> をご覧ください。
<percentage>
包含ブロックの幅の <percentage> がインデントされます。
each-line
強制的な改行の後の各行も、ブロックコンテナの先頭行と同様にインデントします。ただし自動折り返しの次の行はインデントしません。
hanging
インデントされる行が逆になります。つまり、先頭行以外のすべての行がインデントされます。

形式文法

<length-percentage> && hanging? && each-line?

where
<length-percentage> = <length> | <percentage>

単純なインデントの例

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  

CSS

p { 
  text-indent: 5em; 
  background: powderblue;
}

パーセント表記のインデントの例

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 

CSS

p { 
  text-indent: 30%; 
  background: plum;
}

仕様書

仕様書 策定状況 コメント
CSS Text Module Level 3
text-indent の定義
草案 hangingeach-line キーワードを追加。
CSS Transitions
text-indent の定義
草案 text-indent がアニメーション可能に。
CSS Level 2 (Revision 1)
text-indent の定義
勧告 display: inline-block と匿名ブロックボックスの場合の動作が明確に定義されるようになりました。
CSS Level 1
text-indent の定義
勧告  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 1.0 (1.7 or earlier) 1.0 3.0 3.5 1.0 (85)
hanging 未サポート[1] 未サポート 未サポート 未サポート 未サポート
each-line 未サポート[1] 未サポート 未サポート 未サポート 未サポート
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 (1.9.2) ? ? ? ?
hanging 未サポート 未サポート 未サポート 未サポート 未サポート
each-line 未サポート 未サポート 未サポート 未サポート 未サポート

[1] Gecko はまだこの機能を実装してません。バグ 784648 をご覧ください。

ドキュメントのタグと貢献者

このページの貢献者: Simplexible, Prinz_Rana, Sebastianz, coeurl, mitsuba-clover, dskmori
最終更新者: Simplexible,