読者です 読者をやめる 読者になる 読者になる

【CSS実験】 リストカスタマイズ

CSS

ol タグを使った順番付きリストの番号をカスタマイズしたいときのためのメモ。

f:id:kosumoro:20160814220941j:plain

https://cosmology233.github.io/sandbox/hatena/2016/08/11/

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./styles/style.css">
  <title>Practice CSS</title>
</head>
<body>
  <ol class="custom-list -iroha">
    <li>吾輩は猫である。</li>
    <li>名前はまだ無い。</li>
    <li>どこで生れたかとんと見当がつかぬ。</li>
    <li>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</li>
  </ol>
  
  <ol class="custom-list -number-with-bracket">
    <li>吾輩は猫である。</li>
    <li>名前はまだ無い。</li>
    <li>どこで生れたかとんと見当がつかぬ。</li>
    <li>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</li>
  </ol>
  
  <ol class="custom-list -sections">
    <li>吾輩は猫である。</li>
    <li>名前はまだ無い。</li>
    <li>どこで生れたかとんと見当がつかぬ。</li>
    <li>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
      <ol class="custom-list -sections">
        <li>吾輩はここで始めて人間というものを見た。</li>
        <li>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</li>
        <li>この書生というのは時々我々を捕つかまえて煮にて食うという話である。</li>
      </ol>
    </li>
  </ol>
</body>
</html>

styles/style.css

body {
  font-size: 16px;
  line-height: 1.5em;
}

.custom-list {
  padding-left: 40px;
  list-style: none;
}

.custom-list li {
  position: relative;
}

.custom-list > li::before {
  position: absolute;
  top: 0; left: -44px;
  width: 40px;
  text-align: right;
}

.custom-list.-iroha > li:nth-child(1)::before {
  content: "イ.";
}

.custom-list.-iroha > li:nth-child(2)::before {
  content: "ロ.";
}

.custom-list.-iroha > li:nth-child(3)::before {
  content: "ハ.";
}

.custom-list.-iroha > li:nth-child(4)::before {
  content: "ニ.";
}

.custom-list.-number-with-bracket {
  counter-reset: number;
}

.custom-list.-number-with-bracket > li::before {
  counter-increment: number;
  content: "(" counter(number) ")";
}

.custom-list.-sections {
  counter-reset: section;
}

.custom-list.-sections > li::before {
  counter-increment: section;
  content: counters(section, ".") ".";
}

list-style: none; でデフォルトの番号表示を消し、疑似要素で代替する。

li タグごとの番号は、ol要素で counter-reset: COUNTER_NAME; を行い、li要素で counter-increment: COUNTER_NAME; を行うことで計算される。計算された番号の表示は content: counter(COUNTER_NAME); で出来る。