運営者情報はこちら

リストタグ(ul・ol)のマーク下までborderを伸ばす方法

当サイトはアフィリエイト広告を利用しています。
共通カスタマイズ

ブログで箇条書きするときは、リストタグ(ulタグ・olタグ)を使うのが最適です。
実際にリストタグを使った箇条書きが、以下の通り。

  • これは見本です。
  • リストタグを使った箇条書きです。
  • こんな形で表示されます。

これでも十分ですが、項目間に罫線を入れた方が見やすいと思いました。
そこで入れたのですが、先頭のマーク(点のこと)まで伸びない問題が出たのです。

当記事では、罫線を入れる方法、それと罫線をマーク下まで入れる方法を紹介します。

一部のリンクには広告が含まれています。

完成形

See the Pen
Untitled
by Rino (@Rinosaurus)
on CodePen.

調整前はマーク下まで罫線が入っていないので、調整後のように直していきます。

Memo

使用するときは調整後のCSSをご利用ください。

完成までのプロセス

テキスト
  • STEP 1
    罫線を表示させる

    「:not(:first-child)」と「border-top」で罫線を表示させる。
  • STEP 2
    罫線をマーク下まで伸ばす

    「list-style-position」でマーク下まで罫線を伸ばす。

罫線を表示させる

罫線を表示させる方法は簡単で「border」を使います。

		li {
			border: 1px solid #000;
		}
	

ただ、これだと項目の周囲に線が引かれる他、罫線が重なりあう部分が太く見えてしまいます。
そのため、上記は止めて以下のように改良しました。

		li:not(:first-child) {
			border-top: 1px solid #000;
		}
	
改良した部分
:not(:first-child) 連続する要素の「最初以外」を対象とする
bordet-top ボーダーのトップ(上)だけに適用する

項目の2番目から「上部に罫線を入れる」という指示に変更しました!

こうすることで、罫線が重なりあうことが無くなり、綺麗に表示されます。

》テキストなどの周囲に線(ボーダー / border)を引く方法を解説

要素の下まで伸ばす

ボーダーを付けることで、罫線が表示されました!
しかし、このままだと先頭のマーク(点のこと)まで罫線が伸びていません。

これを解決するため、CSSを以下に追加しました。

		/* Before */
		li:not(:first-child) {
			border-top: 1px solid #000;
		}
	
		/* After */
		.list-flame li {
			list-style-position: inside;
		}
		li:not(:first-child) {
			border-top: 1px solid #000;
		}
	

liタグに「list-style-position:inside;」を追記して、マーク下までボーダーを伸ばせました!
ただ、マークが左隅に寄りすぎているので、以下のように改良します。

		.list-flame {
			margin-left: -2em;
		}
		.list-flame li {
			list-style-position: inside;
			padding-left: 1em;
		}
		.list-flame li:not(:first-child) {
			border-top: 1px solid #000;
		}
	

これで完成形と一緒になりました!

Memo

使用するときは、クラス名が付いた完成形をご使用ください。

まとめ

まとめ
  • 「li:not(:first-child)」と「border-top」で罫線を引く
  • 「list-style-position:inside;」でマーク下までボーダーを伸ばす

すでにリストタグの余白が調整されている場合、紹介した「padding・margin」の値ではズレることがあるので、ご注意ください。

Comment

タイトルとURLをコピーしました