一貫性のあるリストのインデント

リストに最もよく行われるスタイル設定の変更のひとつに、インデントの幅の変更が挙げられます。つまり、リストアイテムがどれだけ右に寄せられるかということです。この記事は、リストアイテムのマーカーが見えるように、リストアイテムのインデントを理解するのに役立つでしょう。

なぜこのようなことが起こるのか、そしてさらに重要なのは、問題を完全に避けるにはどうすればよいのかを理解するには、リストの作成の詳細を検証する必要があります。

リストの作成

単独のリストアイテム

最初の、アイテムのリストに含まれない純粋なリストアイテムについて考えます。 HTML の <li> 要素を使用する場合、ブラウザーは display の値を list-item に設定します。 リストに含まれないリストアイテムにマーカー(別名「行頭記号」)が設定されるかどうかは、ブラウザーによって異なります。 list-style-type: none を使用して、この行頭記号を削除することができます。

css
li {
  border: 1px dashed red;
}
li:nth-of-type(n + 4) {
  list-style-type: none;
}

この点線で表された赤い境界線は、各リストアイテムのコンテンツエリアの外側の縁を表します。現時点では、リストアイテムにはパディングや境界線は存在しません。

リスト内に含まれたリストのアイテム

これらの要素を親要素で囲みます。この場合、順序なしリスト(すなわち、<ul>)で囲みます。 CSS ボックスモデルによると、リストアイテムのボックスは親要素のコンテンツエリア内に表示されなければなりません。

css
ul {
  border: 1px dashed blue;
}
li {
  border: 1px dashed red;
  list-style-type: none;
}

青い点線は、<ul> 要素のコンテンツ領域の境界線を示しています。 その親要素には、マージンとパディングの両方が設定されています。 ブラウザーは、順序なしリストに次の既定のスタイルを設定します。

css
ul {
  /* ユーザーエージェントスタイル */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

既定の行頭記号の位置

これでリストアイテムマーカーを元に戻します。これは順序なしリストなので、リストアイテムは list-style-type: disc; というブラウザースタイルを継承します。これは、<ul> 親から塗りつぶし円の「行頭記号」です。

css
li {
  border: 1px dashed red;
}
ul {
  border: 1px dotted blue;
}
ul:last-of-type {
  list-style-position: inside;
}

視覚的には、マーカーが <ul> のコンテンツ領域の外側にありますが、ここで重要なのはその点ではありません。重要なのは、マーカーが <ul> ではなく、<li> 要素の「主要ボックス」の外に置かれていることです。マーカーはリスト項目の付属品のようなもので、<li> のコンテンツ領域の外にぶら下がっていますが、<li> には所属しています。

このため、現代のすべてのブラウザーでは、 list-style-position の値が outside であることを前提に、<li> 要素に設定された境界の外側にマーカーが配置されます。これを inside に変更すると、マーカーは <li> のコンテンツの中に入り、あたかも <li> の一番最初に置かれたインラインボックスのようになります。

既定のインデント

前述のとおり、すべてのブラウザーで、<ul> 親要素にマージンとパディングの両方が提供されています。ユーザーエージェントの CSS は多少異なりますが、すべてに以下が含まれます。

css
ul,
ol {
  /* ユーザーエージェントスタイル */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}
ol {
  list-style-type: decimal;
}
li {
  display: list-item;
  text-align: match-parent;
}
::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

すべてのブラウザーは、既定で <ul> 要素の padding-inline-start を 40 ピクセルに設定しています。英語のような左書きの言語では、これは左パディングです。作者スタイルシート(つまりあなたのスタイルシート)で設定されたパディングが優先されます。

明示的に指定したい場合は、スタイルシートで次の設定を行い、 <main> セクションに含まれる文書内のメインコンテンツ領域のリストアイテムが適切にインデントされるように確保してください。

css
:where(main ol, main ul) {
  margin-inline-start: 0;
  padding-inline-start: 40px;
}

そして、 <li> 要素は常に <ul> または <ol> の中に入れるようにしてください。