【CSS】2行目以降だけを字下げ（インデント）する方法

■2025年10月：加筆修正を行いました。

先頭行にマークがある箇条書きの文章で2行目以降だけ字下げしてあるのをよく見かけますよね。これは「ぶら下げインデント」と呼ばれるものです。

例えば「注意事項」や「利用規約」など、リストマーク付きの箇条書きでこれを使うことが多いです。字下げすることで文章量が多くても読みやすくなります。

ではCSSで2行目以降を字下げする方法を見ていきましょう！

2行目以降を字下げするサンプル

コードはこちら

<ul>
  <li>●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。</li>
  <li>●字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。</li>
</ul>

li {
  /* デフォルトのリストのマークを無しにする */
  list-style-type: none;

  /* 字下げ */
  padding-left: 1em;
  text-indent: -1em;
}

2行目以降を字下げする仕組み

そもそもtext-indentとは？

ブロック内にあるテキストの前の空白（字下げ）を指定するものです。原稿用紙に文章を書くときに段落の最初は1文字分あけますよね。あれです。

では、まずは「2行目以降の字下げ」ではなく、text-indentの基本となる「段落の最初に1文字分あける」普通の字下げをおこなってみます。

こちらは何も指定していない状態。 ↓
（わかりやすいようにブロックを点線で囲んでいます）

ここに「text-indent: 1em」を指定するとこうなります。 ↓

li {
  text-indent: 1em;
}

段落の最初、1行目の前に1文字分（1em）の空白が出来ていますね。これが本来のシンプルなtext-indentの使い方です。

そしてこのスタイルの特徴を「1行目のみに効くスタイル」であると捉えてみます。ではここから、真逆とも思える「2行目以降のみの字下げ」を実現してみましょう！

①padding-leftで左側に余白を作る

まずはpadding-leftでブロック全体に対して左側に1文字分の余白を作成。文章全体を元の位置から右にずらすようなイメージですね。

li {
  padding-left: 1em;
}

②text-indentにマイナスの値を指定して1行目のみ左に戻す

次が最大のポイントです。text-indentに-1emというマイナスの値を指定します。これでマイナス方向、つまり左側に1文字分詰めるという結果になります。

「1em」を指定した時は「余白ができて文字が右側にずれる」結果になったのを、マイナスの値にすることで左側に詰めるという逆転の発想。1行目のみに影響するので結果として2行目以降のみの字下げが実現できるというわけです。

上の図解ではマイナスの値のときに1文字目がブロックから左にはみ出していますが、今回は最初にブロック全体にpadding-leftで余白をもうけているのでちょうど全体がブロック内におさまります。

これで2行目以降のラインが揃い、すっきり見やすくなりました！

li {
  padding-left: 1em;
  text-indent: -1em;
}

実務でよくあるケースと解決方法

マークとテキストの間に余白がある時はどうする？

サンプルでは1文字分（1em）字下げしましたが、マークをspanタグなどで囲んでマークとテキストの間に余白を取っているケースがあります。

たとえばマークとテキストの間に0.5emの余白がある場合は、字下げの指定が1emだとこんなふうにずれてしまいます。↓

<ul>
  <li><span>●</span>字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。</li>
  <li><span>●</span>字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。字下げのサンプルです。</li>
</ul>

li {
  padding-left: 1em;
  text-indent: -1em;
}

li span {
  margin-right: 0.5em;
}

マークとテキストの間の余白分も含めた値にする

これを解決するにはその余白分も含めて値を指定すればOKです。今回のケースだと余白が0.5emなので、1文字分に追加して「1.5em」にしてみましょう。
これで綺麗に揃いました！

li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

li span {
  margin-right: 0.5em;
}

1emと-1emどっちがどっちだっけ？と迷った時は

「padding-leftとtext-indentを使うのは覚えたけど、どっちが1emでどっちが-1emだっけ？」と迷ってしまった時は、paddingにはマイナスの値を指定できないことを思い出すといいかもしれません。

まとめ

このぶら下げインデントはサイト制作で本当によく使います。キャンペーンサイトでの「注意事項」や「応募規約」など、長い箇条書きを見やすくする上で欠かせないテクニックです。CSSを2行追加するだけでサクッと実現できるのがいいですね。