番号付きリストをcssで作る

今回やりたいこと

番号付きのリストを作成します。単純にpタグの改行でリストっぽく見せることは可能ですが、スマホで表示した時など、文章が長文の場合数字の下にテキストが回り込んでしまって、「1.」「2.」「3.」という数字が強調されなくなって見づらくなります。

今回はscssで、これ一つで実現できるコードを記事に起こしておきます。

Pug

今回はhtmlではなくpugのコードになりますが、それが以下です。


ol.p-list-02
  li テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  li テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  li テキストテキストテキストテキストテキストテキストテキストテキストテキスト

Scssのコードは以下です。


.p-list {
  &-02 {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
    & > li {
      text-indent: -1.3em;
      padding-left: 1.3em;
      color: $color-black;
      &:before {
        counter-increment: item;
        content: counter(item) ".";
        /* 以下は自由に装飾... */
        padding-right: 0.5em;
      }
    }
  }
}

コピペするだけで簡単に使えると思うので、見栄えの良い番号付きリストをコーディングするときに是非試してみてください!

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2019/10/11 Scss / Sass

IE11の時に適用させるmedia query

2020/01/20 Scss / Sass

レスポンシブサイトを印刷すると崩れてしまう