公開日:2021.07.28
更新日:2022.05.02
【いちばん簡単】liタグの点や数字だけ色を変更する(擬似要素::markerを使用)

liタグに付く、点や数字の部分だけ色を変える方法です。
ネット上の記事にはよく「デフォルトの点をlist-style: none;で消してbefore擬似要素で〜」と載っていますが、そちらより簡単にできてCSSの記述もずっと少ない方法の紹介です。
サンプル
番号なし(ul li)箇条書きリスト
- リスト1
- リスト2
- リスト3
番号あり(ol li)箇条書きリスト
- リスト1
- リスト2
- リスト3
::marker擬似要素を使う
liタグにデフォルトで付いている点や数字は::markerという擬似要素です。
実際に見てみましょう。下記は何もCSSを指定していないulのリストです。
- リスト要素
- リスト要素
こちらをデベロッパーツールで覗くと
こうなっています。
::markerという擬似要素がありました。これが黒点の正体です。
変更したい(CSSを当てたい)対象が見つかったわけですから、あとは簡単ですね。
例えばこのように記述します。
するとこのように、点が赤く変更できます。
- リスト1
- リスト2
- リスト3
対応ブラウザ
対応ブラウザはこちらを参照ください
Can I use
IEは非対応です。
サイト保守契約の便利ツール
この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥
Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。
決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。
当事務所で導入しているのがSquare(スクエア)。
導入は無料で、コストはクレジット決済手数料(3%台)のみ。
毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。
制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。
保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。
非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。
