【CSS】リストの改行位置を楽に揃える

概要

リスト内のテキストが長い場合、改行位置がずれてしまうことがあります。これを簡単に解決する方法をご紹介します。

リストの改行位置を揃えるCSS

ul {
  margin-left: 20px; // もしくは padding-left: 20px;
  list-style-type: disc;
  list-style-position: outside;
}

<li>ではなく<ul>にスタイルを適用するのがポイント。

解説：list-style-positionと改行位置について

list-style-positionはリスト項目に対するマーカーの位置を指定するプロパティで、初期値はoutsideです。

• outsideの場合：改行位置は揃いますが、マーカーが左側にはみ出します。
• insideの場合：マーカーははみ出しませんが、改行位置がずれます。

そのため、list-style-position: outside;のまま、<ul>の左余白でマーカーの位置を調整するのが1番楽だと考えています。