ブログ
リスト項目のマーカーのリセットと復元
リスト項目のマーカーを非表示にするには、CSSでlist-style-type
プロパティの値にnone
を指定します。このとき指定する要素がol
・ul
要素でもli
要素でも、表示結果は同じになります。
ol, ul {
list-style-type: none;
}
/* または */
li {
list-style-type: none;
}
ではどちらに指定しても良いかというと必ずしもそうではありません。list-style-type: none
をol
・ul
要素に指定すると、非表示にしたデフォルトのマーカーを「復元」するのが少し面倒なのです。とくにtype
属性を持ったol
要素でその違いが大きく影響します。
ol
要素のtype
属性を使う機会はあまり多くないかもしれません。しかし特定のリスト項目をその前後のテキストから参照したい場面で必要な属性です。例えばウェブサイトの利用規約やプライパシーポリシーで「以下の項目Bの……」といった形で条項に言及する場合がユースケースとして考えられます。
例として、いわゆるCSSリセットでol
のマーカーを非表示にした上で、記事本文ではデフォルトのマーカーを復元したい、というケースを考えてみましょう。まずlist-style-type
プロパティをol
要素に指定した場合。ol
要素のマーカーはデフォルトのアラビア数字のほか、type
属性によってラテンアルファベット大文字・小文字、ローマ数字の大文字・小文字の計5種が利用できます。しかしol
要素にlist-style-type: none
を指定するとこれらすべてのマーカーがリセットされるため、CSSでそれぞれ改めて定義し直す必要があります。
ol {
list-style-type: none;
}
.ArticleBody ol {
list-style-type: decimal;
}
.ArticleBody ol[type="a"] {
list-style-type: lower-alpha;
}
.ArticleBody ol[type="A"] {
list-style-type: upper-alpha;
}
.ArticleBody ol[type="i"] {
list-style-type: lower-roman;
}
.ArticleBody ol[type="I"] {
list-style-type: upper-roman;
}
一方list-style-type
プロパティをol
要素ではなくli
要素に指定した場合はどうでしょう。
li {
list-style-type: none;
}
.ArticleBody li {
list-style-type: inherit;
}
このようにinherit
を指定するだけで、すべてのtype
属性に応じたマーカーが復元できます。type
属性にもとづくマーカーのスタイルはli
要素ではなくol
要素が持っているので、li
のマーカーをリセットしても、親要素であるol
のスタイルを継承すればいいのです。
ul
要素の場合はどうでしょうか。ul
要素のデフォルトのマーカーは要素の入れ子に応じてdisc
→circle
→square
と変化します。list-style-type: none
をul
要素に対して指定するとこの振る舞いがリセットされるので、これを復元するには以下のように書くことになります。
ul {
list-style-type: none;
}
.ArticleBody ul {
list-style-type: disc;
}
.ArticleBody ul ul {
list-style-type: circle;
}
.ArticleBody ul ul ul {
list-style-type: square;
}
しかしol
要素と同じように、マーカーのリセットをul
要素ではなくli
要素に対して指定していれば、li
要素のlist-style-type
プロパティにinherit
を指定するだけでデフォルトのマーカーが復元できます。
というわけで、リスト項目のマーカーをリセットする場合、list-style-type
プロパティはol
・ul
要素ではなくli
要素に指定するのがおすすめです。