【CSS】ナンバリングのリストを入れ子で作成する方法

以下のように、ナンバリングのリストを入れ子で作成しているものを見たことがありますでしょうか?

See the Pen
by ゆーじろー (@yujiron)
on CodePen.

よくプライバシーポリシーやご利用規約などの説明を主にするページで使われています。

今回は、CSSでナンバリングのリストを入れ子で作成する方法について紹介します!

【CSS】ナンバリングのリストを入れ子で作成する方法

コピペして使うことが出来るので、是非参考にしてみてください。

※olタグにリセットCSSが指定されている前提で解説していきます。

HTML

olタグはordered listの略で順序のあるリストを実装する際に使われます。

入れ子にして階層を深くするために、liの中にもolを入れておきましょう!

CSS

まず親のolであるol-parentに対して、「counter-reset」を指定してカウンターをリセットします。

次に、子要素のliに対して、「counter-increment」を指定して、liが増える度に数字がナンバリングされるようにします。

numberの部分の名前は自由に決めてOK。

そして同じくliに「content: counter()」を指定することで、liタグが増えるたびに数字がナンバリングされてブラウザに表示されるようになります。

もしナンバリングされた数字の後ろや前後に何か表示したい場合は、「””」の間に値を書きましょう。

最後に、liの中に入っているolに対しても同じようにスタイリングしてあげればOKです。

まとめ

以上が、CSSでナンバリングのリストを入れ子で作成する方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事