【CSS】箇条書き(ol、ul)のリストマーク下まで下線を引きたい

ul、olで作るリストで、項目ごとにアンダーラインを引く時はborder-bottomを使って下線を引くことができます。ところが、その下線がリストマークの下まで届いてないことで悩んだことがあります。

これを、list-style-positionを使うことで解決できました。

CSSの仕組みから理解できるように、まとめています。

list-style-position

CSSのプロパティlist-style-positionは、リストマーカーの位置を指定するプロパティです。

outside
初期値。マーカーをリストボックスの外側に表示します。
inside
マーカーをリストボックスの内側に表示します。

outside と inside の違い

まずは、表示結果の違いを確認します。

ボックスの範囲が分かりやすいよう背景に色を付けています。

outside=指定なし(初期値)

<ul>
   <li>Wordは、ワープロソフトです。</li>
   <li>Excelは、表計算ソフトです。</li>
   <li>PowerPointは、プレゼンテーションソフトです。</li>
</ul>

ブラウザ表示

  • Wordは、ワープロソフトです。
  • Excelは、表計算ソフトです。
  • PowerPointは、プレゼンテーションソフトです。

inside を指定する

<ul>
   <li>Wordは、ワープロソフトです。</li>
   <li>Excelは、表計算ソフトです。</li>
   <li>PowerPointは、プレゼンテーションソフトです。</li>
</ul>
ul{
   list-style-position: inside;
}
  • Wordは、ワープロソフトです。
  • Excelは、表計算ソフトです。
  • PowerPointは、プレゼンテーションソフトです。

insideのほうが、左の余白が広いね…

もう少し詳しく…

2つの違いを図にしてみました。

outsideのほうは、liボックスの【外側】にリストマークが配置されています。

insideを指定すると、リストマークもliボックスの【内側】に収まります。

この違いが、アンダーラインの引かれる範囲に影響します。

以上のことから、リストマークの下まで下線を引く場合は、insideを指定します。

<ul class="sample1">
<li>Microsoft Word</li>
<li>Microsoft Excel</li>
<li>Microsoft PowePoint</li>
</ul>
.sample1{
list-style-position: inside;
}
.sample1 li{
border-bottom: 1px dashed #666;
}

ブラウザ表示

  • Microsoft Word
  • Microsoft Excel
  • Microsoft PowePoint

これで完成に見えますが左余白が広すぎますね…

左余白を調整する

ulかolでリストを作成すると、どちらも左側に内部余白ができます。

デベロッパーツールを見てみると、ulの初期設定でpadding-inline-start: 40pxが設定されていました。olでも同様に設定されています。

これを打ち消すには、

  • padding-leftで「0」を指定する。(物理プロパティ: 古い方法)
  • padding-inline-startで「0」を指定する。(論理プロパティ:新しい方法)

の、どちらかを指定します。

{padding-inline-start:0;} を指定

<ul class="sample2">
<li>Microsoft Word</li>
<li>Microsoft Excel</li>
<li>Microsoft PowePoint</li>
</ul>
.sample2{
list-style-position: inside;
padding-inline-start: 0; /* 追記 */
}

.sample2 li{
border-bottom: 1px dashed #666;
}

ブラウザ表示

  • Microsoft Word
  • Microsoft Excel
  • Microsoft PowePoint

{padding-left:0;} を指定

<ul class="sample3">
<li>Microsoft Word</li>
<li>Microsoft Excel</li>
<li>Microsoft PowePoint</li>
</ul>
.sample3{
list-style-position: inside;
padding-left: 0; /* 追記 */
}

.sample3 li{
border-bottom: 1px dashed #666;
}

ブラウザ表示

  • Microsoft Word
  • Microsoft Excel
  • Microsoft PowePoint

どちらかというと、進化するCSS解釈としてはpadding-inline-startを使うのが正しそうです。

その辺は、別件で考察が必要になりそうですが…。

とりあえず、

どっちを使っても表示結果は同じだッピョw

リストマーカーの位置を微調整

liタグにpadding-leftを指定してリストマーカーの位置を調整します。

<ul class="sample4">
<li>Microsoft Word</li>
<li>Microsoft Excel</li>
<li>Microsoft PowePoint</li>
</ul>
.sample4{
list-style-position: inside;
padding-inline-start: 0;
}

.sample4 li{
border-bottom: 1px dashed #666;
padding-left: 15px; /* 追記 */
}

ブラウザ表示

  • Microsoft Word
  • Microsoft Excel
  • Microsoft PowePoint

まとめ

ol、ulで作ったリストにborder-bottomを使って下線を引く際、リストマークの下までラインを引くには次のプロパティを追加指定します。

  • list-style-position: inside;
  • padding-inline-start: 0;

\HTMLとCSSの使い方を、目的引き、やりたいこと引きでまとめたリファレンス/
タイトルとURLをコピーしました