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

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

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

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

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

ol.png

こんな感じで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

ツイッターでシェア
みんなに共有、忘れないようにメモ

iotas𓆡創作支援アプリ運営中𓅬

創作支援ツールとかを作ってます。(Python) https://www.world-type.com 歴史成分多め。

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

コメント