ブログで箇条書きするときは、リストタグ(ulタグ・olタグ)を使うのが最適です。
実際にリストタグを使った箇条書きが、以下の通り。
- これは見本です。
- リストタグを使った箇条書きです。
- こんな形で表示されます。
これでも十分ですが、項目間に罫線を入れた方が見やすいと思いました。
そこで入れたのですが、先頭のマーク(点のこと)まで伸びない問題が出たのです。
当記事では、罫線を入れる方法、それと罫線をマーク下まで入れる方法を紹介します。
完成形
See the Pen
Untitled by Rino (@Rinosaurus)
on CodePen.
調整前はマーク下まで罫線が入っていないので、調整後のように直していきます。
使用するときは調整後の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 | ボーダーのトップ(上)だけに適用する |
こうすることで、罫線が重なりあうことが無くなり、綺麗に表示されます。
》テキストなどの周囲に線(ボーダー / 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;
}
これで完成形と一緒になりました!
使用するときは、クラス名が付いた完成形をご使用ください。
まとめ
- 「li:not(:first-child)」と「border-top」で罫線を引く
- 「list-style-position:inside;」でマーク下までボーダーを伸ばす
すでにリストタグの余白が調整されている場合、紹介した「padding・margin」の値ではズレることがあるので、ご注意ください。
Comment