list-styleプロパティ

list-styleプロパティに指定できる値

以降は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>

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。