Pickupニュース

CSSだけでlist-styleのマーカーの色を変更する方法
HTML & CSS

CSSだけでlist-styleのマーカーの色を変更する方法

<ul>タグ内のリストのマーカーをdiscにしていたのですが、テキストの色と同じだと強すぎて少し薄くしたいという要望がありました。そこで、HTMLマークアップは変更することなく、CSSだけでlist-styleのマーカーの色を変更する方法を紹介します。

標準のリストマーカー

何も手を加えていない状態での<ul><li>は下のようになります。

See the Pen Normal list-style by JaSTIN (@JaSTIN) on CodePen.24295

黒く大きなマーカーは主張が強い印象があります。

CSSだけでリストマーカーを変更

方法としては、まず<ul>タグのlist-styleを無効にして、<li>タグの:before疑似要素に対して、マーカーを設定しています。

See the Pen Change list-style by JaSTIN (@JaSTIN) on CodePen.


この方法なら、contentプロパティの中を変更すれば、下のようなスタイルも設定することが出来ます。

See the Pen Change list-style ♥ by JaSTIN (@JaSTIN) on CodePen.24295


最近は、絵文字の国際標準化も進んできているようですので、いずれはリストマーカーももっと華やかなスタイルに変更出来るようになるかもしれません。

この記事は以下サイトを参照しました。
Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then everything becomes red!

While I ONLY want to set the color of the square bullets. Is there an elegant wat to define only the color of the bullets in CSS without using any sprite images nor span tags?

HTMLを修正する場合

上の方法以外に、HTMLマークアップに手を加えてリストマーカーの色を変更することも出来ます。

See the Pen Change list-style by HTML by JaSTIN (@JaSTIN) on CodePen.24295

参照: リストマーカーに色を付ける方法|クロノドライブ

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.

記事ランキング