List style
リストのマーカー（箇条書き記号や番号）のスタイルをカスタマイズするプロパティです。list-style-typeでマーカーの種類、list-style-positionで位置、list-style-imageでカスタム画像を設定できます。デフォルトのdisc（●）や decimal（1,2,3）以外にも多数の組み込みスタイルが用意されています。
概要
リストのマーカー（箇条書き記号や番号）のスタイルをカスタマイズするプロパティです。list-style-typeでマーカーの種類、list-style-positionで位置、list-style-imageでカスタム画像を設定できます。デフォルトのdisc（●）や decimal（1,2,3）以外にも多数の組み込みスタイルが用意されています。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
ul {
list-style: square inside;
}
ol {
list-style-type: upper-roman;
}実務での使いどころ
-
リストマーカーのカスタマイズ
デザインに合わせてリストの箇条書き記号を変更し、番号付きリストにローマ数字やカタカナを使用します。
注意点
- list-style: noneでマーカーを非表示にした場合、Safariの一部バージョンではrole='list'のセマンティクスが失われるため、明示的にrole属性を追加してください。
アクセシビリティ
- リストのマーカーを非表示にする場合は、role='list'を明示してスクリーンリーダーでのリスト認識を維持してください。