display: list-item
list-item キーワードは、要素に list-style プロパティで指定された内容 (例えば見出し記号) を含む ::marker 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS プロパティ | ||||||
list-item.legend-support `<凡例>` でサポートされています | 71 | 79 | 64 | | 71 | |
基本構文
CSS
.custom-item {
display: list-item;
list-style-type: disc;
margin-left: 1.5em;
}ライブデモ
実務での使いどころ
-
非リスト要素へのマーカー付与
CMSから出力されるdiv要素にリストマーカーを表示し、箇条書きスタイルを適用します。
注意点
- display: list-itemはセマンティクスを変更しないため、スクリーンリーダーはリストとして認識しません。適切なARIAロールの使用を検討してください。
アクセシビリティ
- 視覚的にリストに見せる場合でも、可能な限りセマンティックなul/ol要素を使用してスクリーンリーダーの認識を確保してください。