liタグの黒丸の色だけを変えてみた
ul、liタグはweb制作業者であれば、よく利用するタグではないでしょうか?
親子関係になっているタグでもあるため、包括しやすく、写真を一覧で並べる場合等レイアウトにも重宝します。
無論liタグ本来の使い方は、箇条書きです。
そのため、デフォルトで黒丸が文頭に付随します。
ただ、しばしばwebデザイン上、黒丸だけ色を変えるということがあります。
そういった場合、::beforeでfont awesomeを指定し、:before部分の色を変えるということをしてきました。
これでおおよそＯＫなのですが、一つ欠点があります。
改行時に黒丸位置から文字が始まるという点です。
本来liタグは、改行しても黒丸の後から文字が始まります。それが::beforeを使うことでそうならなくなるのです。
なので、ほかに方法がないものか調べてみたところ、良い方法がありました。
忘備録として記録いたします。
::markerを使うと簡単に色を変えられます。
通常そのままだと黒丸だけ色を変えることはできません。
liタグの色を指定すると、文字列まで色が変わります。
そこで次のような記述をすると、黒丸の色を変えることができます。
1 2 3 4 5 | ul li::marker { color:#F00; } |
【疑問】こんな簡単にできるのになぜ今まで知らなかったのか？
いままで欲しかった指定方法がすでにあった。
そんな感じですが、なぜいままで気が付かなかったのでしょうか?
原因は::markerが導入された時期にあります。
なんと2021年ごろだそうです。
つい最近のことです。
私自身もこの業界でそこそこ実績ができている段階です。
そんなころに新規導入された指定方法だったのです。
なので、意外と知らない方が多い指定方法となっています。
【疑問】::markerは:markerと記述すると動作しないのはなぜ？
:beforeや:afterのように、：（コロン）が一つでも動くので、::markerも:markerと記述すれば動くだろうと思いました。ところがやってみると、動作しませんでした。
なぜ::markerだけ厳密にコロンが2つないと動作しないのか調べてみました。
:beforeや、:afterは::markerと同じ「疑似要素」です。
疑似要素とは指定したタグを部分的に装飾できるものとあります。
例えば疑似クラスである:hoverは、指定した部分の状態が対象となります。
:nth-childは、指定した位置が対象となります。
それに対し、疑似要素は特定部分だけが対象となります。
記述方法がものすごい似ているので、そもそもそんな区別があることも知りませんでしたが、厳密に分類すると、種類が違うということでした。
そして、疑似クラス（:hoverなど）は：（コロン）は一つ。
疑似要素（::markerなど）は：（コロン）は二つ。
そういうルールがあるようです。
ただ、ここでさらに疑問がわきます。
疑似要素である::beforeや::afterは：（コロン）が一つでも動作します。
疑似要素でも：（コロン）の指定数に違いがあるのはなぜなのでしょうか？
というわけでさらに調べてみました。
すると次のようなことがわかりました。
:beforeや:afterはcss1（1996年ごろ）から存在しており、css1は、疑似クラスと疑似要素の表記区別がなくどちらも：（コロン）１つで表記していました。
その名残で今も:beforeや:afterはコロン一つでも動作するとのことでした。
ちなみにcss2.1（2011年ごろ）で疑似クラスと疑似要素の厳密な区別がされるようになったとのことでした。そのため、2021年ごろに新規追加された::markerは、初めからコロンが2つないと動作しないのです。
古くからあった指定方法は互換性のために昔の記述が許されていますが、新しい指定方法は厳密に制限されているようです。
これからは、議事要素はコロンを2つ記述しようと思います。
今回は調べていて、とても勉強になりました。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
