text-indent

text-indent は CSS のプロパティで、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。

試してみましょう

包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。

構文

/* <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: revert;
text-indent: unset;

値

<length>

<length> を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は <length> をご覧ください。

<percentage>

包含ブロックの幅の <percentage> 分だけ字下げされます。

each-line

強制的な改行の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし自動折り返しの次の行は字下げしません。

hanging

インデントされる行が逆になります。つまり、先頭行以外のすべての行を字下げします。

公式定義

初期値0
適用対象ブロックコンテナー
継承あり
パーセント値包含ブロックの幅に対する相対値
計算値指定されたパーセント値または絶対的な長さ、続けて指定された任意の数のキーワード
アニメーションの種類length または パーセント値, calc();

形式文法

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<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;
}

結果

最初の段落の字下げをスキップ

段落の字下げがある場合の一般的な組版では、最初の段落の字下げを省略します。The Chicago Manual of Style によると、「中間見出しに続くテキストの最初の行は、完全に左端から始めてもよいし、通常の段落の字下げで字下げしてもよい」とされています。

最初の段落とそれ以降の段落を別扱いにするには、次の例のように隣接兄弟結合子を使います。

HTML

<h2>Lorem ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus.
Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros
et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac
sapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui
interdum.</p>

<p>Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi.
In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper.
Donec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar
elementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in
eleifend ante convallis sit amet.</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce
tempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum
nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus
lorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam
velit.</p>

<p>Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac
dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero,
sed euismod ipsum ullamcorper sed.</p>

CSS

p {
    text-align: justify;
    margin: 1em 0 0 0;
}
p + p {
    text-indent: 2em;
    margin: 0;
}

結果

パーセント値の字下げ

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;
}

結果

仕様書

Specification
CSS Text Module Level 3
# text-indent-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報