【CSS】リストマークの位置・サイズ・色などのデザインを変更する方法

liタグのマーカー(点)の位置・サイズ・色などをCSSで変更する方法を解説します。

デフォルトのリストマークでは少し味気無いと感じていた方は自分なりにデザインを変更してみてください。

スポンサーリンク

リストマークのデザインを変更する

リストマークを消す

まずはデフォルトのリストマークを見てみます。

liタグのデフォルトリストマーク

マーカーが黒い点になっていますが、これはliタグにlist-style-type: disc;が掛かっているからです。

これを無効化するにはCSSで以下を定義します。

デフォルトのリストマークが消えました。

liタグのデフォルトリストマークを非表示

リストマークの色を変更する

リストマークを非表示にした後はオリジナルのリストマークを付けましょう。

CSSに以下を追加で定義します。

上記はCSSの疑似要素である::beforeを使ってオリジナルのリストマークを挿入しています。

色の付いたリストマークが表示されました。

リストマークの色を変更

マークの色を変更するにはCSSの14行目にあるbackground: darkturquoise;の部分をbackground: pink;など好きな色に変更してください。

リストマークのサイズを変更する

リストマークのサイズを変更するにはCSSの8~9行目のwidth: 6px;height: 6px;を変更します。

width: 8px;height: 8px;にすると次のようになります。

リストマークのサイズを変更

リストマークの位置を変更する

リストマークの位置を変更するにはCSSの3~4行目のtop: -2px;left: -18px;を変更します。

left: -8px;にすると次のようになります。

リストマークの位置を変更

まとめ

liタグのマークの色・サイズ・位置を変更する方法について解説しました。

リストのデザインを変更するCSSをまとめると以下のようになります。

色の付いた行のプロパティを調整してリストマークに好きなデザインを適用してみてください。

スポンサーリンク

フォローする