CSSのリストコンポーネントを最適化する #CSS

ulやolタグはほとんどのWebサイトで使いますよね。リストのスタイルはひとつのサイトでも4~5種類くらいは作ることが多いと思います。例えば以下のように。

ulのlist-style-type: disc;をオリジナルの黒丸にする
olをネストごとに1や1.1のように表記を変えたい
※や注)のように注釈用の役物などをつけたい
※1のように順序をつけた注釈用のリストも欲しい

検索していてよく見つける実装方法としては、

text-indext: -1emとmargin-left: 1em;のようにしてインデントを取り、テキストを左揃えにする
padding-leftで余白をつけてpositionでリストスタイルを移動させる

といったパターンがあると思います。

ただし、この方法だと半角と全角が混ざると微妙に余白が指定しにくかったり、構造的にあまり汎用的とは言えないところがあります。

リストコンポーネントのベーススタイル

僕は以下のようなパターンをよく使っています。

.c-list {
  display: table;
  padding-left: 0;
  list-style-type: none;
}

.c-list > li {
  display: table-row;
  &:before,
  & > span:before {
    display: table-cell;
  }
}

::before擬似要素にリストスタイルを表示します。table-cellがリストスタイルの表示領域を確保してくれるので1emのように数値を指定する必要がありません。複数行になってもテキストの左側は揃います。

リスト要素を左寄せぴったりに配置するスタイルシートのテクニック | コリス

※本来であればliではなく.c-list__itemのようにしてもいいのですが、マークアップに制限のあるタグであることや、量産や運用がしやすいように要素セレクタに指定しています。

Modifier

OOCSSにおける構造は用意できたので、見た目にあたるスタイルをModifierとして指定していきます。

デモはCodepenにまとめています。

注釈リスト

米印で注釈であることを示します。単純に::beforeに※を指定するだけです。

.c-list--note > li:before {
  content: "※";
}

順序つき注釈リスト

注釈リストに順序をつけたい場合はcounter-incrementプロパティを指定します。リストスタイルとテキストの間に余白が欲しかったのでpadding-rightを指定しています（tableを使っているのでmarginは効きません）。

.c-list--noteOrder > li {
  counter-increment: noteOrder;
  &:target {
    background-color: lightgray;
  }
  &:before {
    content: "※" counter(noteOrder);
    padding-right: 0.25em;
  }
}

丸括弧つき順序リスト

丸括弧などで囲いたい場合はcontentプロパティ内に入れてあげるだけです。

.c-list--bracketOrder > li {
  counter-increment: bracketOrder;
  &:before {
    content: "(" counter(bracketOrder) ")";
    padding-right: 0.25em;
  }
}

入れ子対応順序リスト

入れ子に対応するにはcounters()関数を使います。

.c-list--order li {
  counter-increment: order;
  &:before {
    content: counters(order, ".");
    padding-right: 0.5em;
    text-align: right;
  }
  & ol {
    counter-reset: order;
    padding-left: 0;
    list-style-type: none;
  }
}

背景画像アイコンリスト

黒丸などの任意のアイコンを背景画像として表示させるパターンです。SVGで用意しておきます。※Codepenのデモには含まれていません。

.c-list--disc > li:before {
  content: "";
  background-image: url("/assets/img/icon_disc.svg");
  /* アイコンの大きさ */
  background-size: 1em;
  background-repeat: no-repeat;
  /* アイコンの大きさ + 余白 */
  width: 1.5em;
  height: 1em;
  /* アイコンの位置調整 */
  position: relative;
  top: 0.25em;
}

アイコンフォントでもいけますが、contentの内容（例えば"\EA01"など）をスクリーンリーダーが読んでしまうと余計な情報が入ってしまうので、liのテキストの前にspanを入れて、そこにアイコンフォントを表示させるようにするのがいいと思います。

.c-list--disc > li > span:before {
  content: "";
  background-image: url("/assets/img/icon_disc.svg");
  /* アイコンの大きさ */
  background-size: 1em;
  background-repeat: no-repeat;
  /* アイコンの大きさ + 余白 */
  width: 1.5em;
  height: 1em;
  /* アイコンの位置調整 */
  position: relative;
  top: -0.25em;
  vertical-align: middle;
}

<ul class="c-list c-list--disc">
  <li><span aria-hidden="true"></span>リスト</li>
</ul>