パーツ番号 02-05-02 ・ CSSのみ

番号付き丸数字リスト

①②③のような装飾的な丸数字を使った番号リストです。手順や工程の紹介記事で順序を分かりやすく示せます。

staticcss

プレビュー

ソースコード

HTML

<ol class="d02-05-02-list">
          <li>企画の立案と目的の明確化</li>
          <li>構成案の作成とレビュー</li>
          <li>本文執筆と画像の準備</li>
          <li>公開前の最終確認</li>
        </ol>

CSS

.d02-05-02-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;counter-reset:d652c;font-size:14px;color:#333;}
        .d02-05-02-list li{position:relative;counter-increment:d652c;padding:5px 0 5px 32px;line-height:1.5;}
        .d02-05-02-list li::before{content:counter(d652c);position:absolute;left:0;top:4px;width:22px;height:22px;border:2px solid #1565c0;color:#1565c0;border-radius:50%;font-size:12px;font-weight:bold;line-height:18px;text-align:center;}

クラス名 .d02-05-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。