HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

リスト スタイル

list-styleプロパティ

list-styleプロパティはリストのマーカーに関するlist-style-imageプロパティlist-style-typeプロパティlist-style-positionプロパティを一括で指定するプロパティです。

  • 初期値

    各プロパティの初期値に準ずる

  • 継承

    継承あり

  • 適用できる要素

    リストアイテム要素

目次

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>