リストマーカーは、サイトデザインに応じて適切な形にカスタマイズすることで、サイト全体のデザインコンセプトを貫くことができます。
ここでは、CSSのみでできるデザインカスタマイズの方法を見ていきましょう。
CSS標準のリストマーカーを使用する
CSS標準のリストマーカーを利用するには、「list-style-type」を設定します。
設定する値の説明とサンプルは以下のページを参考にしてください。
CSS
文字列および記号をリストマーカーとして設定する
任意の文字列や記号をリストマーカーとして使用する時は、「content」に文字列を設定します。
以下に「＞」をリストマーカーとして使う場合のサンプルを紹介します。
- サンプル
- サンプル
- サンプル
HTML
CSS
CSSでつくる便利なリストマーカーサンプル
チェックマーク
- サンプル
- サンプル
- サンプル
HTML
CSS
ひし形マーク
- サンプル
- サンプル
- サンプル
HTML
CSS
円マーク
- サンプル
- サンプル
- サンプル
HTML
CSS
