2015/07/16  CSS 

olのリストで()括弧付の数字リストを作りたかったので、こちらの方法で対応してみました。
わざわざ毎回()を入れなくていいので便利です。

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

htmlで書くとこんな感じ。olリストにクラスを指定するだけで数字括弧を表示できるようになります。

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

CSSはこちらになります。

ol.list_parentheses{
  padding:0 0 0 2em;
  margin:0;
}

ol.list_parentheses li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol.list_parentheses li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}

括弧の種類

いろいろな括弧がありますのでご参考までにー

記号 英語 日本語
( ) parentheses, round brackets 丸括弧
[ ] brackets, square brackets 角括弧
{ } braces, curly brackets 波括弧
< > chevrons, angle brackets 山括弧
「 」 angles 鍵括弧
【 】 隅付き括弧