text-indent

インデントを設定する

Last update: 2008-08-28

text-indent は、ブロックレベル要素内の最初の１文字のインデント量を設定するプロパティ。DTP やワードプロセッサアプリケーションなどでは「字下げ」といわれる処理と同様の結果を得る。
このパラグラフには text-indent: 1em; と記述しているので、最初の文字が１文字分インデントされているはずだ。

文章量が多いドキュメントでは、インデントを設けることで行頭が判別しやすくなる。しかし、少ない文章量で次々とパラグラフが現れるような場合は使用しない方が良い結果を生む。といったように、必ずしも使わなければいけないといったルールがあるわけではないので、使用するかどうかは制作者の判断で決めることになる。
インデント量だが、日本語の場合は全角スペース１文字が通常の設定値だが、2文字分を取ったりするケースもある。対して、欧文の場合は数文字分とっているのが一般的だ。しかし、インデント量はフォントの種類やサイズによって異なるので、指定単位には em のような相対単位を使うことが望ましいと思う。
インデントに興味のある方は、フォントを上手く使いこなした参考になりそうなウェブサイトを探すかタイポグラフィ関連の書籍を読んでみると良い。

長さ
px, em, などの相対的な単位か mm や in などの絶対単位を、数字と一緒に指定する
パーセント
要素ブロックの幅に対しての割合
inherit
親要素の値を継承する

レンダリングサンプル

下のパラグラフはインデントを設定しているが、その数値はそれぞれのフォントに合わせて設定した。

This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents should render this indentation as blank space.W3C CSS2

This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents should render this indentation as blank space.W3C CSS2

インデント値

表示拡大率がユーザ環境によって異なるので、単位には相対単位、それも em が無難だと思う。
数値にはマイナスを設定することも可能だ。この場合、ブロック要素から追い出された部分は表示されなくなる。これを利用して極端に大きなサイズを意図的に設定することで、テキストを追い出し背景画像のみを表示する、diplay: hiden の代わりに使う、マイナス数値を設定したレイアウトを行なう方法を紹介しているサイトを見かけると思う。
この方法、背景画像を表示しない設定にしているユーザ環境では意味の分からない表示となってしまうので、褒められた方法ではないと思っている。

▲ Return to Top