liタグのマーカー（点）の位置・サイズ・色などをCSSで変更する方法を解説します。
デフォルトのリストマークでは少し味気無いと感じていた方は自分なりにデザインを変更してみてください。
リストマークのデザインを変更する
リストマークを消す
まずはデフォルトのリストマークを見てみます。
|
1 2 3 4 5 |
<ul> <li>りんご</li> <li>みかん</li> <li>ぶどう</li> </ul> |
マーカーが黒い点になっていますが、これはliタグにlist-style-type: disc;が掛かっているからです。
これを無効化するにはCSSで以下を定義します。
|
1 2 3 |
li { list-style-type: none; } |
デフォルトのリストマークが消えました。
リストマークの色を変更する
リストマークを非表示にした後はオリジナルのリストマークを付けましょう。
CSSに以下を追加で定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
li::before { position: relative; top: -2px; left: -18px; display: inline-block; width: 6px; height: 6px; content: ''; border-radius: 100%; background: darkturquoise; } |
上記は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をまとめると以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
li { list-style-type: none; } li::before { position: relative; top: -2px; left: -18px; display: inline-block; width: 6px; height: 6px; content: ''; border-radius: 100%; background: darkturquoise; } |
色の付いた行のプロパティを調整してリストマークに好きなデザインを適用してみてください。