CSS ul li 間隔

CSS ul>li 間隔：リストアイテム間隔を精密に制御する7つの武器

リストアイテム間の余白調整に悩んでいませんか？ ul要素とli要素の間に適切な間 spacing を設けることは、リストを読みやすく、見た目を美しくするために非常に重要です。この記事では、CSSを用いてul>liの間隔を調整する7つの方法を分かりやすく解説し、コード例とともに紹介します。

1. line-height プロパティ

line-heightプロパティは、行の高さを指定するために使用されます。li要素の行の高さを調整することで、間接的にアイテム間のスペースを制御できます。


<ul>
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ul>


ul {
  list-style: none;
}
li {
  line-height: 2; /* 行の高さをフォントサイズの2倍に設定 */
}

margin-topまたはmargin-bottomプロパティを使用すると、li要素の上または下に外側の余白を追加できます。これにより、アイテム間のスペースを直接制御できます。


li {
  margin-bottom: 10px; /* 各li要素の下に10pxの外側の余白を追加 */
}

padding-topまたはpadding-bottomプロパティを使用すると、li要素の上または下に内側の余白を追加できます。これにより、アイテム間のスペースを間接的に制御できます。


li {
  padding-bottom: 15px; /* 各li要素の下に15pxの内側の余白を追加 */
}

li要素のborder-bottomプロパティを設定することで、罫線の幅を使用して間隔をシミュレートできます。


li {
  border-bottom: 1px solid #ccc; /* 各li要素の下に1pxの薄い灰色の罫線を設定 */
}

:first-childおよび:last-child擬似クラスセレクタを使用すると、最初と最後のli要素の間隔を個別に制御できます。たとえば、最初のli要素の上部または最後のli要素の下部の余白を削除できます。


li:first-child {
  margin-top: 0; /* 最初のli要素の上部余白を削除 */
}
li:last-child {
  margin-bottom: 0; /* 最後のli要素の下部余白を削除 */
}

隣接兄弟セレクタ（+）を使用すると、各li要素の後の兄弟要素に間隔を追加できます。これにより、最初のli要素を除くすべてのli要素の上に間隔を追加できます。


li + li {
  margin-top: 12px; /* 各li要素の後の兄弟要素に12pxの上部余白を追加 */
}

HTMLコードの空白文字や改行を削除したり保持したりすることで、li要素の間隔に影響を与えることができます。ただし、この方法は、フォントサイズや行の高さなど、他の要素の影響を受けやすいため、推奨されません。

この記事では、CSSを使用してul>liの間隔を調整する7つの方法を紹介しました。それぞれの方法にはメリットとデメリットがあります。状況に応じて最適な方法を選択し、美しく読みやすいリストを作成しましょう。