list-style-typeをつかって「いろは」順にリストを並べる

CSSのlist-style-typeを使うことによって、いろいろなスタイルでリストを並べることができる。

ブラウザーが対応していないケースが多いので、実用上は微妙だけど、

• いろは順
• 十干
• 十二支
• 漢数字

などがあって、実験してみると結構楽しい。
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

こんな感じでolタグにlist-style-typeを設定するだけで大丈夫。

<div>
  <p>十干</p>
  <ol style="list-style-type: cjk-heavenly-stem;">
    <li>地区センター駅</li>
    <li>公園駅</li>
    <li>井野駅</li>
    <li>女子大駅</li>
    <li>中学校駅</li>
    <li>地区センター駅</li>
    <li>公園駅</li>
    <li>井野駅</li>
    <li>女子大駅</li>
    <li>中学校駅</li>
    <li>地区センター駅</li>
    <li>公園駅</li>
    <li>井野駅</li>
    <li>女子大駅</li>
    <li>中学校駅</li>
  </ol>
</div>

https://codepen.io/iotas/pen/oNgaGpJ