text-indent
text-indent は CSS のプロパティで、ブロック内のテキストの行の前に置く空白（字下げ）の幅を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
基本構文
CSS
p {
text-indent: 1em;
}
.hanging {
text-indent: -2em;
padding-left: 2em;
}ライブデモ
実務での使いどころ
-
段落の字下げ
日本語の文章で段落先頭に1文字分の字下げを適用し、伝統的な組版スタイルを再現します。
注意点
- 負の値でぶら下げインデントを作る場合、テキストがコンテナ外にはみ出さないよう padding-left を合わせて設定してください。
アクセシビリティ
- 過度なインデントはテキストの可読性を下げる可能性があるため、適切な値（通常1〜2em）を使用してください。