リストスタイルショートハンドプロパティ

最終更新：2026-09-13

list-style リストスタイルショートハンドプロパティ

list-style は list-style-type、list-style-position、list-style-image のショートハンドで、リスト項目のマーカーに関するすべてを一度に設定します。デフォルトは disc outside none です。リストの見た目を制御する最も効率的な方法であり、リストスタイルの迅速なカスタマイズやリセットによく使われます。

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

📝 構文

list-style: <list-style-type> || <list-style-position> || <list-style-image>;

⚙️ 値

値	タイプ	説明
`<list-style-type> \|\| <list-style-position> \|\| <list-style-image>`	値	リストスタイルのショートハンド

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： list-style: none はナビゲーションバーなどでデフォルトのリストマーカーを削除するために一般的に使われます。

ヒント： ショートハンドで指定されなかった子プロパティはデフォルト値に戻るため、list-style: none は type と image の両方をクリアします。

❓ よくある質問

Qlist-style: none と display: block の違いは？

Alist-style: none は各項目の前のマーカーを削除するだけです。li はリスト項目のままで意味論は維持され、スクリーンリーダーもリストを認識します。display: block は要素をブロックレベルの描画に変更し、意味論や支援技術がリスト構造をどう理解するかに影響する可能性があります。リストの見た目をリセットするなら list-style: none で十分です。display を変える必要はありません。

Qlist-style ショートハンドの値の順序は重要ですか？

A厳密な順序はありません（ブラウザは値の種類で判別します）。ただし推奨される順序は type、position、image です（例：list-style: square inside none;）。指定されなかった子プロパティはデフォルト値にリセットされるため、list-style: none は type と image の両方をクリアします。

Qlist-style: none と padding-left: 0 の違いは？

Alist-style: none はマーカー記号だけを削除します。ブラウザのデフォルトの左インデント（約 40px のパディング）は残ります。リストを周囲のテキストとぴったり揃えるには、list-style: none; padding-left: 0; margin: 0; を組み合わせます。これが定番のリセット trio であり、横向きナビメニューはこの方法で点とインデントを削除します。

Qlist-style ショートハンドはどの子プロパティをリセットしますか？

A省略した子プロパティはデフォルトにリセットされます。type は disc、position は outside、image は none です。そのため、最初に list-style-image で画像を設定し、後で list-style: inside; と書くと画像がクリアされます。1 つの子プロパティだけを変更したい場合は、安全のため対応する個別プロパティを直接使用してください。