text-indent
Updated / Published
text-indentプロパティはブロックボックスを形成する要素に含まれるテキストの1行目のインデントを指定します。日本語の文章作法であればインデントは段落の最初に一文字分空ける字下げに用いられます。インデントの効果があるのは1行目（行頭）のみで、2行目以降は通常位置（インデントを指定しない場合の開始位置）からはじまります。インデントが行われた部分の背景は透明になります。
- 値
- 初期値
0- 適用対象
- ブロックボックスを形成する要素
- 継承
- する
- メディア
- visual
text-indentプロパティの値
text-indentプロパティに指定できる値はそれぞれ以下の意味を示します。
パーセンテージ値が基準値として参照する包含ブロックの横幅とは、祖先要素の中でもっとも近い祖先にあたる親要素のブロックボックスの内容領域のことを指します。たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。この包含ブロックの中で text-indentプロパティのパーセンテージ値は横幅を基準値として参照します。
負の値を指定することも可能です。負の値を指定した場合や、指定されたインデントの値がブロックボックスを形成する要素の幅の領域を超える場合、それはブロックボックスを形成する要素の内容領域からはみ出したものとして扱われます。はみ出した内容の表示方法は overflowプロパティでコントロールすることができます。
また、負の値に極端な数値（"-9999px" など）を指定することで、そのブロックボックスを形成する要素内のテキストをすべて画面の表示域から見えなくしてしまうことも可能ですが、text-indentプロパティは要素の位置自体を指定するものではないため、表示域から消えた内容は、"visibility : hidden ;" を指定した場合と同じように扱われ、その要素分のスペースは残り、レイアウトにも影響します。これを利用して、テキストを背景画像に置き換えつつ、リンクとして機能させるといったテクニックにも良く使われています。
text-indentプロパティの実装状況
- IE
- ◯
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯
- iOS
- ◯
- Android
- ◯
サンプル
p { text-indent : 2em ; width : 80% ; }
p span{ background-color : #ffe ; }