Houn

Web制作

公開日:2021.07.28

更新日:2022.05.02

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

liタグに付く、点や数字の部分だけ色を変える方法です。

ネット上の記事にはよく「デフォルトの点をlist-style: none;で消してbefore擬似要素で〜」と載っていますが、そちらより簡単にできてCSSの記述もずっと少ない方法の紹介です。

サンプル

番号なし(ul li)箇条書きリスト

  • リスト1
  • リスト2
  • リスト3

番号あり(ol li)箇条書きリスト

  1. リスト1
  2. リスト2
  3. リスト3

::marker擬似要素を使う

liタグにデフォルトで付いている点や数字は::markerという擬似要素です。

実際に見てみましょう。下記は何もCSSを指定していないulのリストです。

  • リスト要素
  • リスト要素

こちらをデベロッパーツールで覗くと

ulリストの構造

こうなっています。

::markerという擬似要素がありました。これが黒点の正体です。

変更したい(CSSを当てたい)対象が見つかったわけですから、あとは簡単ですね。

例えばこのように記述します。

するとこのように、点が赤く変更できます。

  • リスト1
  • リスト2
  • リスト3

対応ブラウザ

対応ブラウザはこちらを参照ください
Can I use
IEは非対応です。

サイト保守契約の便利ツール

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥

Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。

決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。

当事務所で導入しているのがSquare(スクエア)

導入は無料で、コストはクレジット決済手数料(3%台)のみ。

毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。

制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。

非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。

無料でSquareに登録してみる