list-style
list-styleプロパティは、リスト関係の指定を一括で行えるショートハンドプロパティです。
各値は順不同で、半角スペースなどの空白類文字で区切って書き、省略した値は初期値になります。
リストの場合、個別のリスト関係プロパティを使う必要性があまり無いため、大半がショートハンドで書くと思います。
- 対応ブラウザ
-
プロパティの解説
- 値
- [ <list-style-type> || <list-style-position> || <list-style-image> ]|inherit
- 初期値
- 個別のプロパティを参照してください
- 適用される要素
-
li要素、
display: list-item;
の要素 - 継承
- します
- パーセント値
- N/A
- メディア
- visual
リストスタイルはli要素に直接指定できますが、直接指定してしまうと、ol要素とul要素が入れ子になっている場合、継承や個別性の計算に問題が出てしまいます。
その為、ol要素やul要素などにリストスタイルを指定し継承させた方が効率よく記述する事ができます。
list-styleのサンプル
ul {
list-style: square;
}
<ul>
<li>リストスタイルのサンプルです。</li>
<li>リストスタイルのサンプルです。</li>
</ul>
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- リストスタイルのサンプルです。
- リストスタイルのサンプルです。