CSSで2行目以降を1文字下げる方法｜text-indentとhangingの書き方

文章の先頭に「・」や「※」などの記号を置いたとき、2行目以降の先頭を1文字下げて揃えたい場面があります。いわゆる「ぶら下げインデント」です。

結論から書くと、書き方は2つあります。どのブラウザでも確実に動くのは padding-left と負の text-indent を組み合わせる方法、1行で済むのは text-indent: 1em hanging です。

まずは指定なしの例です。2行目の先頭が記号の下に潜り込んでしまっています。

次が text-indent を使った例です。文章の先頭がきれいに揃います。

この記事では、2つの書き方と、それぞれをどう選ぶかを解説します。

2行目以降を1文字下げる書き方は2つ

結論：従来からある2行の書き方と、CSS Text Level 4 で追加された hanging キーワードを使う1行の書き方があります。

▼2つの書き方の比較

	padding-left ＋ 負の text-indent	text-indent: 1em hanging
記述量	2行	1行
対応ブラウザ	すべて	Chrome 146 / Safari 16.6 / Firefox 122 以降
下げ幅の指定	2か所を同じ値にする必要がある	1か所だけ
向いている場面	古い環境も対象にするサイト	対応ブラウザだけでよい新規サイト

hanging キーワードは2026年3月に Chrome 146 が対応したことで、主要ブラウザがひととおり揃いました。とはいえ古い端末が残る案件もあるので、確実に動かすなら従来の書き方を選んでください。

padding-leftと負のtext-indentで下げる

結論：padding-left で全行に1文字分の余白を作り、text-indent に -1em を指定して1行目だけ左へ戻します。この2行で完成です。

<p class="hanging">※ここに長い注釈が入ります。折り返したとき、2行目以降の先頭が1行目の本文の位置に揃います。</p>

.hanging {
	padding-left: 1em;
	text-indent: -1em;
}

仕組みは次のとおりです。

2つの値は必ず同じにしてください。padding-left: 1em に対して text-indent: -2em のようにずらすと、1行目だけが飛び出します。

コピペで動く完成形はこちらです。

hangingキーワードなら1行で書ける

結論：text-indent に hanging キーワードを添えると、「1行目以外を下げる」という指定になります。padding-left は不要です。

.hanging {
	text-indent: 1em hanging;
}

hanging は「インデントする行を反転させる」キーワードです。通常の text-indent は1行目だけを動かしますが、hanging を付けると1行目以外のすべての行が動きます。値を負にする必要も、余白を別途作る必要もありません。

下げ幅を変えたいときも1か所を直すだけです。text-indent: 2em hanging にすれば2文字分下がります。従来の書き方だと2か所を直す必要があったので、直し忘れによるズレが起きません。

対応状況は次のとおりです。

未対応のブラウザでは hanging の付いた宣言そのものが無視されるため、インデントがまったくかからない見た目になります。段階的に対応させたい場合は、従来の書き方を先に書いてから上書きしてください。

.hanging {
	/* 未対応ブラウザ向け */
	padding-left: 1em;
	text-indent: -1em;
}

@supports (text-indent: 1em hanging) {
	.hanging {
		padding-left: 0;
		text-indent: 1em hanging;
	}
}

emという単位について

結論：em は、その要素に適用されているフォントサイズを1とする単位です。1em と書けば「1文字分」になります。

フォントサイズが16pxの要素で 1em は16px、20pxの要素なら20pxです。文字サイズが変わってもインデント幅が自動で追従するので、この用途では px より em が向いています。

ただし日本語と英数字が混ざると、見た目の1文字分とはずれます。em はフォントサイズを基準にした値であって、実際の文字の横幅ではありません。「※」のような全角記号なら 1em でほぼ合いますが、「1.」のような半角の数字とピリオドだと余りが出ます。その場合は 1.5em や 2em に調整してください。

リスト要素で組む方法もある

結論：箇条書きとして意味を持たせたいなら、<ul> と <li> で組んだうえで list-style-position: outside を使う方法もあります。CSSを書かなくても既定でぶら下がります。

<ul class="notes">
	<li>ここに長い注釈が入ります。折り返しても先頭が揃います。</li>
	<li>2つ目の項目です。</li>
</ul>

.notes {
	/* 既定値。マーカーを本文の外に置く＝ぶら下げになる */
	list-style-position: outside;
	padding-left: 1.2em;
}

text-indent を使う方法との違いは次のとおりです。

記号が「※」「注」のように箇条書きではない場合は、text-indent を使うほうが適切です。

うまく下がらないときに確認すること

結論：インデントが効かない原因は、たいてい対象要素の指定間違いか、display の値です。

▼よくあるつまずき

症状	原因と対処
まったく効かない	display: inline の要素には text-indent が効かない。block か inline-block にする
1行目だけ大きく飛び出す	padding-left と text-indent の値が揃っていない
下げ幅が記号とずれる	半角記号を使っている。1em ではなく 1.5em などに調整する
hangingを書いたが無視される	ブラウザが未対応。@supports で従来の書き方を残す

text-indent は継承されるプロパティです。親要素に指定すると子要素にも伝わるので、意図しない場所が下がっているときは親をたどって確認してください。

CSSの書き方をまとめて学び直したいとき

結論：ぶら下げインデントのように、同じ見た目を作る方法が複数あるのがCSSです。新旧どちらも知っておくと、案件の対象ブラウザに応じて選べます。

CSSは進化が速い一方で、対応ブラウザの都合があるため最新のものだけを使えばよいわけではありません。この記事の hanging も、対応が揃うまでに実装から数年かかっています。

最新の情報やテクニックまで解説されている学習本はWebコーディングにオススメの学習本にまとめました。基礎から通しで固めたい場合はこちらをどうぞ。

CSSを1から書かずに済ませたい場合は、CSSでオススメのフレームワークと実装例も参考になります。BootstrapとTailwindの使い分けをまとめています。

テキスト周りのCSSでは、CSSでテキストを改行する方法・改行しない方法もよく一緒に使います。折り返しの制御とインデントは組み合わせて指定する場面が多いので、あわせて確認してみてください。