display: list-item
任意の要素にリストアイテムのような表示を与えるdisplay値です。list-style関連プロパティが適用可能になり、マーカー（::marker擬似要素）が表示されます。非リスト要素にリスト的な外観を付与したい場合に使用しますが、セマンティクスの観点からは実際の<li>要素の使用が推奨されます。
概要
任意の要素にリストアイテムのような表示を与えるdisplay値です。list-style関連プロパティが適用可能になり、マーカー（::marker擬似要素）が表示されます。非リスト要素にリスト的な外観を付与したい場合に使用しますが、セマンティクスの観点からは実際の<li>要素の使用が推奨されます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.custom-item {
display: list-item;
list-style-type: disc;
margin-left: 1.5em;
}実務での使いどころ
-
非リスト要素へのマーカー付与
CMSから出力されるdiv要素にリストマーカーを表示し、箇条書きスタイルを適用します。
注意点
- display: list-itemはセマンティクスを変更しないため、スクリーンリーダーはリストとして認識しません。適切なARIAロールの使用を検討してください。
アクセシビリティ
- 視覚的にリストに見せる場合でも、可能な限りセマンティックなul/ol要素を使用してスクリーンリーダーの認識を確保してください。