リストマーカー種類プロパティ

最終更新：2026-09-13

list-style-type リストマーカー種類プロパティ

list-style-type はリスト項目の前のマーカー（塗りつぶしの点、中空の丸、数字、ローマ数字など）を設定します。デフォルトは disc です。多くの定義済みマーカーやカスタム文字列に対応しており、リストの視覚的な見た目を制御する最も一般的に使われるプロパティです。

カテゴリ
初期値	disc
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS1
状態	標準

📝 構文

list-style-type: none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | <string>;

⚙️ 値

値	タイプ	説明
`disc \| circle \| square \| decimal \| none \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha`	キーワード	リストマーカーの種類

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
list-style-type	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： list-style-type: none はマーカーを完全に削除し、横向きナビメニューによく使われます。

注意： 一部のマーカー種類（georgian や armenian など）はブラウザ間で表示が異なる場合があります。

❓ よくある質問

Qdisc、circle、square の違いは？

Adisc は塗りつぶしの点（順不同リストのデフォルト）、circle は中空の丸、square は塗りつぶしの四角です。いずれも <ul> リストで使われ、ブラウザによる描画に若干の差があります。disc が最も一般的で、circle は軽い印象、square は強調したリストに向きます。現在のフォントに字形がない場合、ブラウザは disc にフォールバックします。

Q絵文字やアイコンでリストマーカーをカスタマイズするには？

A2 つの方法があります。文字列値を直接使う list-style-type: "→ ";（现代ブラウザー対応、絵文字も可）、またはより柔軟な方法：list-style: none と li::before で content: "✔" を挿入し、CSS で色・サイズ・間隔を制御します。後者は制御性とクロスブラウザの一貫性に優れるため推奨されます。

Q一般的な数字マーカーの値は？

Adecimal（1, 2, 3）、decimal-leading-zero（01, 02）、lower-roman/upper-roman、lower-alpha/upper-alpha、georgian、armenian などです。中国語プロジェクトでは decimal や lower-alpha が一般的で、目次には upper-roman がよく使われます。

Qlist-style-type: none の後もリストの意味論は残りますか？

Aはい。list-style-type: none は表示上のマーカーを削除するだけです。<li> の listitem 意味論は維持され、スクリーンリーダーもリスト構造を認識します。内容がもはやリストでなくなった場合にのみ別の要素に切り替えてください。ナビメニューのマーカーを削除しても、意味論を失うべきではありません。