【CSS】箇条書きのリストマークを変更する方法

「箇条書きにする際に、HTMLのul / ol , liタグを使う」
「順番の関係ない箇条書き（順不同リスト）はul（Unordered List）」
「ulタグは箇条書きのほか［ナビゲーションメニュー］［スライドショー］などでも使用する」
「手順などで使用する順序付きリストはol（Ordered List）」

などの基本的なところは覚えているのですが、なぜか自信がなくなっていつも調べてしまうのが
「リスト項目要素のマーカーを設定するCSSのプロパティlist-style-typeは、ul・liどちらのタグに指定するのか」
という内容です。

そう…今回は自分のためのメモです。

list-style-typeは ul / ol タグに対して指定する

マーカーを消す、変える場合は ul タグ、ol タグに指定します。
指定できるリストマークは、以下の通り

マーカーや数字を消す

ul { list-style-type: none; }
ol { list-style-type: none; }

• リストの例です
• リストの例です
• リストの例です

ついでにマーカーの指定についても紹介。

ul：disc（黒ポチ）

ul { list-style-type: disc; }

• リストの例です
• リストの例です
• リストの例です

以下、コード例は省略。

ul：circle（白ポチ）

• リストの例です
• リストの例です
• リストの例です

ul：scuare（四角）

• リストの例です
• リストの例です
• リストの例です

ol：decimal（アラビア数字）

1. リストの例です
2. リストの例です
3. リストの例です

geogianと指定する方法もあります

1. リストの例です
2. リストの例です
3. リストの例です

<ul style="list-style-type:decimal">
  <li>リストの例です</li>
  <li>リストの例です</li>
  <li>リストの例です</li>
</ul>

<ol style="list-style-type:circle">
　　<li>リストの例です</li>
　　<li>リストの例です</li>
　　<li>リストの例です</li>
</ol>

ol：decimal-leading-zero（ゼロから始まる数字）

1. リストの例です
2. リストの例です
3. リストの例です

ol：lower-roman（小文字ローマ数字）

1. リストの例です
2. リストの例です
3. リストの例です

ol：upper-roman（大文字ローマ数字）

1. リストの例です
2. リストの例です
3. リストの例です

ol：lower-latin（小文字アルファベット）

1. リストの例です
2. リストの例です
3. リストの例です

ol：upper-latin（大文字アルファベット）

1. リストの例です
2. リストの例です
3. リストの例です

ol：lower-greek（小文字ギリシャ文字）

1. リストの例です
2. リストの例です
3. リストの例です

ちなみに、upper-greekと指定すると何故かアラビア数字になります

1. リストの例です
2. リストの例です
3. リストの例です

ol：cjk-ideographic（漢数字）

1. リストの例です
2. リストの例です
3. リストの例です

trad-chinese-informalと指定する方法もあります

1. リストの例です
2. リストの例です
3. リストの例です

ol：hiragana（平仮名 あいうえお）

1. リストの例です
2. リストの例です
3. リストの例です

ol：katakana（片仮名 アイウエオ）

1. リストの例です
2. リストの例です
3. リストの例です

ol：hiragana-iroha（平仮名 いろはにほへと）

1. リストの例です
2. リストの例です
3. リストの例です

ol：katakana-iroha（片仮名 イロハニホヘト）

1. リストの例です
2. リストの例です
3. リストの例です

ol：kannada（カンナダ語）

南インドで使用されている（らしい）カンナダ語です

1. リストの例です
2. リストの例です
3. リストの例です

ほかにも数多くの指定がありますが、以下省略します。