リストマーカーは、サイトデザインに応じて適切な形にカスタマイズすることで、サイト全体のデザインコンセプトを貫くことができます。

 

 

ここでは、CSSのみでできるデザインカスタマイズの方法を見ていきましょう。

CSS標準のリストマーカーを使用する

CSS標準のリストマーカーを利用するには、「list-style-type」を設定します。

 

設定する値の説明とサンプルは以下のページを参考にしてください。

 

CSS

 

文字列および記号をリストマーカーとして設定する

任意の文字列や記号をリストマーカーとして使用する時は、「content」に文字列を設定します。

 

以下に「>」をリストマーカーとして使う場合のサンプルを紹介します。

 

  • サンプル
  • サンプル
  • サンプル

 

HTML

 

CSS

 

CSSでつくる便利なリストマーカーサンプル

チェックマーク

  • サンプル
  • サンプル
  • サンプル

 

HTML

 

CSS

 

ひし形マーク

  • サンプル
  • サンプル
  • サンプル

 

HTML

 

CSS

 

円マーク

  • サンプル
  • サンプル
  • サンプル

 

HTML

 

CSS

 

 

おすすめの記事