ulタグのリストを作る際、先頭の“・”のマークがいらない時にマークを消す方法のメモ。&任意のマークを表示する方法メモ。
list-styleもしくはlist-style-typeで指定できる。
マークを消すCSSコード
マークなし type:none
- サンプル1
- サンプル2
- サンプル3
ul {list-style:none;}
マークを消して任意のマークをつけるCSSコードサンプル
“before“を使って指定します。
マークを☆に。
- サンプル1
- サンプル2
- サンプル3
ul {list-style:none;} li:before {content:"☆";}
星マークをredに。
色も指定できます。
- サンプル1
- サンプル2
- サンプル3
ul {list-style:none;} li:before {content:"☆"; color:red;}
偶数番目の星をredに。奇数番目の星をblueに。
nth-child()も使って指定できます。
- サンプル1
- サンプル2
- サンプル3
ul {list-style:none;} li:nth-child(odd):before {content:"☆"; color:red;} li:nth-child(even):before {content:"☆"; color:blue;}
その他のlist-style-typeの指定CSSコード
タイプ:disc
- サンプル1
- サンプル2
- サンプル3
ul{ list-style: disc;}
タイプ:circle
- サンプル1
- サンプル2
- サンプル3
ul{ list-style: circle;}
タイプ:square
- サンプル1
- サンプル2
- サンプル3
ul{ list-style: square;}
タイプ:decimal
- サンプル1
- サンプル2
- サンプル3
ul{ list-style: decimal;}
タイプ:cjk-ideographic
- サンプル1
- サンプル2
- サンプル3
ul{ list-style: cjk-ideographic;}
マークの位置
- サンプル1
- サンプル2
- サンプル3
ul{ list-style-position: inside;}
- サンプル1
- サンプル2
- サンプル3
ul{ list-style-position: outside;}