list-styleプロパティに指定できる値
| プロパティ | 内容 |
|---|---|
| list-style-imageプロパティ | リストのマーカーに画像を指定するプロパティです |
| list-style-typeプロパティ | リストのマーカーを変更するプロパティです |
| list-style-positionプロパティ | マーカーを表示する位置をリストの内側か外側に指定するプロパティです |
以降はlist-styleプロパティを使用したコード例とブラウザの表示例です。
使用例1
list-style-typeプロパティとlist-style-positionプロパティを一括指定した例です。
CSS コード例
.list1 {
list-style: lower-roman inside;
}HTML コード例
<ol class="list1">
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
</ol>
使用例2
list-style-typeプロパティとlist-style-positionプロパティを一括指定した例です。
CSS コード例
.list2 {
list-style: url(./images/icon_star.png) outside;
}HTML コード例
<ul class="list2">
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
<li>リストのスタイルを設定</li>
</ul>