HTML+CSS の li タグおよび counters の確認

ネストした ul li の確認

ul タグをネストすると、既定でネストレベル 4 以上は marker がすべて square になってしまう。これを変更するにはネストレベル毎に list-style-type を指定すればよいが、もしくは、以下のようにスタイルを書いておけばよい。

ul>li>ul>li>ul>li>ul { list-style-type: disc; }
ul>li>ul>li>ul>li>ul>li>ul { list-style-type: circle; }
ul>li>ul>li>ul>li>ul>li>ul>li>ul { list-style-type: square; }

とは言え、これでは同じ記号の再利用になってしまう。それを避けたいのであれば itemize クラスに属する以下の ul タグで LaTeX 風の記号付き箇条書きとした(:not(.content) は後段で必要)。但し、Chrome, Safari では未対応。

ul.itemize:not(.content) { list-style-type: '• '; }
ul.itemize:not(.content)>li>ul { list-style-type: '– '; }
ul.itemize:not(.content)>li>ul>li>ul { list-style-type: '* '; }
ul.itemize:not(.content)>li>ul>li>ul>li>ul { list-style-type: disc; }
ul.itemize:not(.content)>li>ul>li>ul>li>ul>li>ul { list-style-type: square; }
ul.itemize:not(.content)>li>ul>li>ul>li>ul>li>ul>li>ul { list-style-type: circle; }

以上の Chrome, Safari の対応状況が芳しくないので、before 擬似要素を用いた方法を確認する。結論からすると、こちらの方が融通が効く。

ul.itemize.content>li::before { content: '•'; }
ul.itemize.content>li>ul>li::before { content: '–'; }
ul.itemize.content>li>ul>li>ul>li::before { content: '*'; }
ul.itemize.content>li>ul>li>ul>li>ul>li::before { content: '･'; }
ul.itemize.content>li>ul>li>ul>li>ul>li>ul>li::before { content: '◼'; }
ul.itemize.content>li>ul>li>ul>li>ul>li>ul>li>ul>li::before { content: '◦'; }

ネストした ol li の確認

ol タグをネストすると、既定で marker がすべて decimal になってしまう。これを変更するにはネストレベル毎に list-style-type を指定すればよいが、もしくは、以下のようにスタイルを書いておけばよい。

ol>li>ol { list-style-type: lower-alpha; }
ol>li>ol>li>ol { list-style-type: lower-roman; }
ol>li>ol>li>ol>li>ol { list-style-type: upper-alpha; }
ol>li>ol>li>ol>li>ol>li>ol { list-style-type: upper-roman; }
ol>li>ol>li>ol>li>ol>li>ol>li>ol { list-style-type: lower-greek; }

これで LaTeX と LaTeX 風の番号付き箇条書きとなる。そして、enumerate クラスに属する以下の ol タグで上記と同様の番号付き箇条書きとした(:not(.content) は後段で必要)。

ol.enumerate:not(.content) { list-style-type: decimal; }
ol.enumerate:not(.content)>li>ol { list-style-type: lower-alpha; }
ol.enumerate:not(.content)>li>ol>li>ol { list-style-type: lower-roman; }
ol.enumerate:not(.content)>li>ol>li>ol>li>ol { list-style-type: upper-alpha; }
ol.enumerate:not(.content)>li>ol>li>ol>li>ol>li>ol { list-style-type: upper-roman; }
ol.enumerate:not(.content)>li>ol>li>ol>li>ol>li>ol>li>ol { list-style-type: lower-greek; }

以上の Chrome, Safari の対応状況で十分であるが、before 擬似要素を用いた方法を確認する。結論からすると、こちらの方が融通が効き、加えて、decimal-list, hiragana-iroha-list, etc. クラスのようにネストしたカウンタも実現可能である。

ol.enumerate.content, ol.enumerate.content ol { counter-reset: enumerate; }
ol.enumerate.content>li::before { counter-increment: enumerate; content: counter(enumerate, decimal) "."; }
ol.enumerate.content>li>ol>li::before { counter-increment: enumerate; content: counter(enumerate, lower-alpha) "."; }
ol.enumerate.content>li>ol>li>ol>li::before { counter-increment: enumerate; content: counter(enumerate, lower-roman) "."; }
ol.enumerate.content>li>ol>li>ol>li>ol>li::before { counter-increment: enumerate; content: counter(enumerate, upper-alpha) "."; }
ol.enumerate.content>li>ol>li>ol>li>ol>li>ol>li::before { counter-increment: enumerate; content: counter(enumerate, upper-roman) "."; }
ol.enumerate.content>li>ol>li>ol>li>ol>li>ol>li>ol>li::before { counter-increment: enumerate; content: counter(enumerate, lower-greek) "."; }

ol.decimal-list, ol.decimal-list ol { counter-reset: decimal-list; }
ol.decimal-list li::before { counter-increment: decimal-list; content: counters(decimal-list, ".") "."; }
ol.hiragana-iroha-list, ol.hiragana-iroha-list ol { counter-reset: hiragana-iroha-list; }
ol.hiragana-iroha-list li::before { counter-increment: hiragana-iroha-list; content: counters(hiragana-iroha-list, ".", hiragana-iroha) "､"; }