ブログ
リスト項目のマーカーのリセットと復元
リスト項目のマーカーを非表示にするには、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要素に指定するのがおすすめです。