箇条書きの2行目はどこへ揃う？list-style-positionのinsideとoutsideを比べよう

箇条書きの文章が2行になると、2行目が印の下へ回り込むことも、文章の頭へ揃うこともあるよね。これは単にスペースを足して調整する話ではないんだ。

このページでは、箇条書きの行頭に付く印をマーカーと呼び、その置き場所をCSSで切り替える。ブラウザがあれば試せるよ。HTMLのulが番号なしのリスト、liがその一項目だと分かれば準備完了だよ。

outsideは項目の外側へ置く

ul {
  list-style-position: outside;
  padding-inline-start: 1.6em;
}

outsideでは、マーカーは項目の主な箱の外側に置かれる。作例のような普通の文章では、折り返した行の頭が、最初の行の文章の頭に揃うよ。標準の初期値もoutsideだよ。

ただし、外側の印が見えるための余白は必要になる。親に余白がなく、さらにoverflowで切り取っている場合、印が見えなくなることもある。印の位置と親の切り取りを分けて確認しよう。

insideは最初の行の中へ入れる

ul { list-style-position: inside; }

insideでは、マーカーを項目内の最初の行の一部として扱う。作例では最初の行に印が入り、その後で文章が続く。折り返した行は、印を含む行の開始位置へ戻るので、outsideとは頭の位置が違って見えるんだ。

同じ文章でも、項目内の先頭がブロック要素の場合などは、改行の仕方に別の条件が加わる。今回の作例はliの中へ文章を直接書いた場合に絞っているよ。

動かして、折り返しの位置を見る

1. outsideのまま、薄紫の枠内で2行目の頭を見る。
2. insideへ切り替え、1行目の印と2行目の頭の位置を比べる。
3. 幅を狭くして、行が増えても同じ違いがあるかを見る。
4. 「最初から試す」でoutsideと標準の幅へ戻す。

作例は印を手入力した文章ではなく、実際のul・liとブラウザのマーカーを使っている。設定値は同じでも、日本語の折り返す文字は画面幅やフォントによって変わるので、特定の文字で必ず改行されるとは考えないでね。

揃えるためにリストの意味を消さない

印を消して画像や「・」を並べる前に、文章がリストなのかを確認したい。関連する項目の集まりなら、HTMLのリスト構造を残したうえで見た目を調整しよう。順番に意味がある手順ならolを使う判断も別に必要だよ。

番号付きリストにもlist-style-positionは適用できるけれど、桁数や印の種類が変わると見える幅も変わる。実際の内容で、印が欠けないか、文字を拡大して読めるかを確かめよう。

編集部では2026年10月29日にMDNの仕様説明と照合し、スマホ幅・PC幅で設定変更とリセットを確認した。より基本の構造はHTMLのリスト、切り取りはoverflowの違いで読めるよ。