CSS の text-indent
プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。
構文
/* <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 の定義 |
草案 | hanging と each-line キーワードを追加。 |
CSS Transitions text-indent の定義 |
草案 | text-indent がアニメーション可能に。 |
CSS Level 2 (Revision 1) text-indent の定義 |
勧告 | display: inline-block と無名ブロックボックスの場合の動作が明確に定義されるようになりました。 |
CSS Level 1 text-indent の定義 |
勧告 | Initial definition. |
初期値 | 0 |
---|---|
適用対象 | ブロックコンテナー |
継承 | あり |
パーセンテージ | 包含ブロックの幅 |
計算値 | 指定されたパーセンテージ値または絶対的な長さ、続けて指定された任意の数のキーワード |
アニメーションの種類 | length または percentage, calc(); |
ブラウザーの対応
BCD tables only load in the browser