ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

[CSS]ol,liの番号リストにカッコを付ける方法

February 14 2016

たまーに約款とかをサイトに載せてって時に原稿をもらうと
(1)ほにゃらら~~~~
(2)なんちゃら~~~~
みたいなやつに遭遇する時があります。

list-styeのプロパティにはイロハまであるというのにこのカッコ付というのがない。
こういうのを用意しといてくれても良さそうなもんなんだけども・・

しかし、beforeとafter使ってなんとか出来るのではないかと模索。

まずはhtml部分。

<ol class="parentheses">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ol>

そして、CSSはこれで。

ol.parentheses{
  padding:0 0 0 2em;
  margin:0;
}
 
ol.parentheses li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol.parentheses li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}

これで簡単に実現できます。
この中で見慣れないのがcounter-incrementというプロパティですが、
カウンタ名を定義すると繰り返しで出てくる場合にその数値を一つずつ進めてくれます。
カウンタ名の後に半角スペースを入れて整数値を入れるとその数だけカウンタが進みます。

今回はliタグに対してcntというカウンタ名を与えて、
beforeのcontentプロパティで前後にカッコを表示させているのです。

この方法だと第○位なんかもクラス名を指定するだけで実現出来るのでとても便利です。
が、例の如くIE7以下ではここに出てくる全ての物が非対応です。
でももうええんちゃうかな無視しても・・・・とは個人的な考え、です(笑)

| Posted in CSS | Comments (1)

One Comment

  1. Posted 2017年2月4日 at 4:10 PM |

    ありがとうございます。大変参考になりました。

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Feb 2017 March 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31