CSSで注釈の2行目以降の頭をそろえる方法

​2026年11月9日​CSS​Playwright,日本語組版

「※」で始まる注釈が2行以上になると、2行目が「※」の下から始まり、本文の頭がずれて見えます。注釈の段落に padding-left: 1em; text-indent: -1em; を付けると、2行目以降が「※」のあとの本文の頭にそろいます。このような字下げを、ぶら下げインデントと呼びます。

padding-left と負の text-indent を組み合わせる

注釈の段落に、次の2行を指定します。

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

<p class="note">※送料は、お届け先の地域と荷物の大きさによって変わります。くわしくは、注文の確認画面に表示される金額をご覧ください。</p>

padding-left: 1em で段落の中身全体を1文字分右へ寄せ、text-indent: -1em で1行目だけを1文字分左へ戻します。text-indent は1行目の字下げの幅を決めるプロパティで、負の値も指定できます。1行目は「※」が左端に出て、2行目以降は1文字分下がった位置から始まります。

検証環境で、各行の書き出しの位置を測りました。

指定なしでは、2行目と3行目が「※」と同じ 0px から始まりました。2つの指定を付けると、2行目と3行目が 16px になり、1行目の本文の「送」と同じ位置にそろいました。

どちらか片方だけでは、そろいません。padding-left: 1em だけでは、「※」も含めて全部の行が 16px から始まり、全体が右へずれただけでした。text-indent: -1em だけでは、1行目の「※」が -16px になりました。2行目以降は 0px のままなので、本文の頭はそろいますが、「※」は要素の左端からはみ出します。

1em は、その要素の文字の大きさ1文字分です。検証環境のフォントでは、全角の「※」の幅は 16.0px で、ひらがなの「あ」と同じでした。半角の「*」は 7.5px で、1em（16px）より狭い幅です。

新しいブラウザーなら text-indent の hanging だけで書ける

text-indent には hanging というキーワードがあります。MDN の説明では、字下げする行を逆にして、1行目以外のすべての行を字下げする値です。

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

padding-left を書かなくても、上の表と画像のとおり、padding-left と負の値を組み合わせたときと同じ位置にそろいました。1行目は字下げせず、2行目以降を 1em 下げるので、「※」が要素の外に出ることもありません。

互換性データでの対応バージョンは次のとおりです。

古いブラウザーも含めて表示をそろえたいときは、padding-left と負の値の組み合わせを使います。text-indent そのものは Chrome 1、Firefox 1、Safari 1 から使えます。

br で区切った注釈は、2つ目の「※」まで下がる

1つの段落の中で、<br> で区切って注釈を2つ書くことがあります。

<p class="note">※送料は、お届け先の地域と荷物の大きさによって変わります。<br>※在庫が少ない商品は、注文の確定後に取り消しになることがあります。</p>

padding-left: 1em; text-indent: -1em; では、2つ目の「※」の行も 16px から始まりました。text-indent が効くのは段落の1行目だけで、<br> のあとの行は2行目以降と同じ扱いになるからです。text-indent: 1em hanging も同じ結果でした。

each-line を足すと、2つ目の「※」も 0px に出て、そのあとの行は 16px にそろいました。MDN では、each-line は <br> のような強制的な改行のあとの行も、1行目と同じように扱う値と説明されています。対応バージョンは hanging と同じでした（Chrome・Edge 146、Firefox 121、Safari 15）。

古いブラウザーも含めるなら、注釈を1つずつ別の <p> にするほうが確実です。そうすれば、どの注釈も段落の1行目から始まります。

中に入れたブロックにも負の字下げが引き継がれる

text-indent は、子要素に引き継がれるプロパティです（CSS の仕様で Inherited: yes）。注釈の要素の中に div を入れると、その div の1行目にも -1em が効きます。

<div class="note">
  ※送料は地域によって変わります。
  <div>くわしくは、注文の確認画面に表示される金額をご覧ください。お届け日は確認メールでお知らせします。</div>
</div>

検証環境では、中の div の1行目が、その div の左端から -16px、つまり「※」と同じ位置から始まりました。2行目以降は 0px です。「※」の行のあとに、記号のない注釈がもう1つ始まったように見えます。display: inline-block の span を入れたときも、span の中の1行目が -16px になりました。

中の div に text-indent: 0 を指定すると、1行目も 0px から始まり、全部の行が「※」のあとの本文の頭にそろいました。

.note > div {
  text-indent: 0;
}

「注1：」「注10：」のように見出しの幅が違うとき

「注1：」のような見出しを付ける注釈で、見出しの幅を em で決め打ちすると、数字の幅のぶんだけずれます。検証環境のフォントでは、「注1：」は 40.9px、「注10：」は 49.8px で、どちらも 1em（16px）の倍数になりません。半角の数字は全角の文字より幅が狭く、桁数でも幅が変わるからです。

padding-left: 3em; text-indent: -3em;（48px）でそろえると、次のようになりました。

「注1：」では1行目の本文が2行目より左から、「注10：」では右から始まり、どちらもそろいません。

見出しと本文を別の要素に分け、CSS Grid で並べると、見出しの列の幅をいちばん長い見出しに合わせられます。

<dl class="notes">
  <dt>注1：</dt>
  <dd>送料は、お届け先の地域と荷物の大きさによって変わります。くわしくは確認画面をご覧ください。</dd>
  <dt>注10：</dt>
  <dd>表示している価格は、すべて税込みです。セールの期間中は、割引後の価格を表示しています。</dd>
</dl>

.notes {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.notes dt,
.notes dd {
  margin: 0;
}

1列目を max-content にすると、列の幅は中身のいちばん広いもの、ここでは「注10：」の幅になります。検証環境では、どちらの注釈も、1行目から3行目まで 49.8px の位置から始まりました。本文の dd が独立した要素になるので、text-indent を使わずに、折り返した行がそのまま本文の頭にそろいます。

リストにして、記号を ::marker で出す

注釈がいくつも並ぶなら、ul にして、記号をリストのマーカーとして出す方法もあります。list-style-type には文字列を指定でき、その文字列がマーカーになります。

.note-list {
  list-style-type: "※";
  padding-left: 1em;
}

<ul class="note-list">
  <li>送料は、お届け先の地域と荷物の大きさによって変わります。くわしくは、注文の確認画面に表示される金額をご覧ください。</li>
  <li>在庫が少ない商品は、注文の確定後に取り消しになることがあります。</li>
</ul>

検証環境では、li の中の行は1行目から3行目まで、すべて li の左端（0px）から始まりました。「※」は li の外側、ul の padding-left の 16px の中に描かれ、画面の画素で見ると ul の左端から 2px〜13px の範囲にありました。本文に「※」の文字が入らないので、text-indent を使わなくても、折り返した行が本文の頭にそろいます。

文字列のマーカーの対応は、互換性データで Chrome・Edge 79、Firefox 39、Safari 14.1（iOS は 14.5）からです。