【CSS】ulタグの●マークを表示しない方法

CSS NO IMAGE

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;}