HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

リスト スタイル タイプ

list-style-typeプロパティ

リストの右に表示されるアイコンを設定するためのプロパティです。

  • 初期値

    disc

  • 継承

    継承あり

  • 適用できる要素

    リストアイテム要素

次のような値を設定することができます。

  • disc – 黒丸(初期値)
  • circle – 黒縁の白丸
  • square – 四角
  • decimal – 数字
  • decimal-leading-zero – 二桁目に「0」を置いた数字
  • lower-roman – 小文字のローマ数字
  • upper-roman – 大文字のローマ数字
  • lower-greek – ギリシャ語
  • lower-latin – 小文字のラテン語(アルファベット)
  • upper-latin – 大文字のラテン語(アルファベット)
  • armenian – アルメニア語
  • geogian – ジョージア語
  • lower-alpha – 小文字のアルファベット
  • upper-alpha – 大文字のアルファベット
  • none – リストアイコンなし

パターン1

disc」を指定した例です。

CSSコード例

ul {
	list-style-type: disc;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン2

circle」を指定した例です。

CSSコード例

ul {
	list-style-type: circle;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン3

square」を指定した例です。

CSSコード例

ul {
	list-style-type: square;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン4

decimal」を指定した例です。

CSSコード例

ul {
	list-style-type: decimal;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン5

decimal-leading-zero」を指定した例です。

CSSコード例

ul {
	list-style-type: decimal-leading-zero;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン6

lower-roman」を指定した例です。

CSSコード例

ul {
	list-style-type: lower-roman;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン7

upper-roman」を指定した例です。

CSSコード例

ul {
	list-style-type: upper-roman;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン8

lower-greek」を指定した例です。

CSSコード例

ul {
	list-style-type: lower-greek;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン9

lower-latin」を指定した例です。

CSSコード例

ul {
	list-style-type: lower-latin;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン10

upper-latin」を指定した例です。

CSSコード例

ul {
	list-style-type: upper-latin;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン11

armenian」を指定した例です。

CSSコード例

ul {
	list-style-type: armenian;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン12

georgian」を指定した例です。

CSSコード例

ul {
	list-style-type: georgian;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン13

lower-alpha」を指定した例です。

CSSコード例

ul {
	list-style-type: lower-alpha;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン14

upper-alpha」を指定した例です。

CSSコード例

ul {
	list-style-type: upper-alpha;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

パターン15

none」を指定した例です。リストアイコンに画像を指定したい場合などに使用します。

CSSコード例

ul {
	list-style-type: none;
}

表示例:

  • リスト1
  • リスト2
  • リスト3

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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