Go to information

text-indent

text-indentプロパティはブロック要素に含まれるテキストの1行目のインデントを指定します。インデントとは日本語の文章作法における段落の最初を一文字分空ける字下げのことです。インデントの効果があるのは1行目(行頭)のみで、2行目以降は通常位置(インデントを指定しない場合の開始位置)からはじまります。インデントが行われた部分の背景は透明になります。

初期値
0
適用対象
ブロック要素
継承
する
メディア
visual

text-indentプロパティに指定できる値はそれぞれ以下の意味を示します。

<長さ>
"em", "px" などの単位識別子を伴う数値で指定
<パーセンテージ>
包含ブロックの横幅を基準とするパーセンテージ値(%)による割合で指定

パーセンテージ値が基準値として参照する包含ブロックの横幅とは、祖先要素の中でもっとも近い祖先にあたる親要素のブロックボックスの内容領域のことを指します。たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。この包含ブロックの中で text-indentプロパティのパーセンテージ値は横幅を基準値として参照します。

負の値を指定することも可能です。負の値を指定した場合や、指定されたインデントの値がブロック要素の幅の領域を超える場合、それはブロック要素の内容領域からはみ出したものとして扱われます。はみ出した内容の表示方法は overflowプロパティでコントロールすることができます。また、負の値に極端な数値("-9999px" など)を指定することで、そのブロック要素内のテキストをすべて画面の表示域から見えなくしてしまうことも可能です。ただし、text-indentプロパティは要素の位置自体を指定するものではないため、表示域から消えた内容は、"visibility : hidden ;" を指定した場合と同じように扱われ、その要素分のスペースは残り、レイアウトにも影響します。これを利用して、テキストを背景画像に置き換えつつ、リンクとして機能させるといったテクニックにも良く使われています。

text-indentプロパティの実装状況

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5

サンプル

記述例
p { text-indent : 1em ; width : 80% ; }
表示例
現在位置
  1. W3G
  2. CSS
  3. テキスト
  4. text-indent
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T17:40:23+09:00
更新
2008-12-29T04:30:40+09:00
URI
http://w3g.jp/css/text/text-indent
検索

直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!