list-style-type:リスト項目の先頭に表示するマーカーの種類を指定する

初期値 disc
適用対象 リスト項目
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

list-style-typeプロパティの説明

list-style-typeは、リスト項目の先頭に表示するマーカーの種類を指定します。マーカーの種類は、あらかじめ用意されているキーワードや任意の文字で指定します。マーカーに画像を表示させる場合は、list-style-imageを使用して下さい。

マーカーを表示する位置はlist-style-positionで指定します。これらをまとめて指定する場合には、ショートハンド・プロパティのlist-styleを使用して下さい。

その他、CSSでリストをデザインするテクニックは、CSSリファレンスで詳しく解説しています。入れ子構造、開閉できる多段式のリスト、横並びのレイアウトの具体的なサンプルも参照できます。

list-style-typeに指定できる値

<custom-ident>
特定のスタイルを表すキーワード値、または @counter-styleが定義できます。キーワードは以下の項目で解説します。
symbols()
シンボルを定義する関数です。<custom-ident>よりも簡潔な無名のリストスタイルを作成できます。
<string>
特定の文字をリストマーカーとして使用します。
none
リストマーカーを表示しません。
disc
塗りつぶされた円です。これが初期値です。
circle
中抜きの円です。
square
塗りつぶされた四角形です。
decimal
1から始まる順序付きの数字です。
decimal-leading-zero
0から始まる順序付きの数字です。
cjk-decimal
から始まる順序付きの漢数字です。
lower-roman
小文字のiから始まる順序付きのローマ数字です。
upper-roman
大文字のIから始まる順序付きのローマ数字です。
lower-greek
小文字のαから始まる順序付きのギリシャ数字です。
lower-alpha, lower-latin
小文字のaから始まる順序付きのASCII文字です。
upper-alpha, upper-latin
大文字のAから始まる順序付きのASCII文字です。
arabic-indic
アラビア・インド数字です。
armenian
アルメニア語の数値表記です。
bengali
ベンガル語の数値表記です。
cambodian, khmer
カンボジア/クメール語の数値表記です。
cjk-earthly-branch
漢字の十二支を用いた表記です。
cjk-heavenly-stem
漢字の十干を用いた表記です。
cjk-heavenly-stem
漢字の十干を用いた表記です。
devanagari
インド文字のデーヴァナーガリーを用いた表記です。
devanagari
インド文字のデーヴァナーガリーを用いた表記です。
ethiopic-numeric
エチオピア語を用いた順序付きの表記です。
georgian
ジョージア語を用いた順序付きの表記です。
georgian
ジョージア語を用いた順序付きの表記です。
gujarati
グジャラート語を用いた順序付きの表記です。
gurmukhi
グルムキー語を用いた順序付きの表記です。
hebrew
ヘブライ語を用いた順序付きの表記です。
hiragana
ひらがなを用いた順序付きの表記です。
hiragana
ひらがなを用いた順序付きの表記です。
hiragana-iroha
ひらがなを用いたいろは順の表記です。
japanese-formal
日本語のフォーマルな文書で用いられる漢字の順序付きの表記です。
japanese-informal
日本語の一般的な文書で用いられる漢字の順序付きの表記です。
kannada
カンナダ語を用いた順序付きの表記です。
katakana
カタカナを用いた順序付きの表記です。
katakana-iroha
カタカナを用いたイロハ順の表記です。
korean-hangul-formal
韓国のフォーマルな文書で用いられる順序付きのハングル表記です。
korean-hanja-formal
韓国の公的な漢数字を用いた表記です。
korean-hanja-informal
韓国の一般的な漢数字を用いた表記です。
lao
ラオス語の数値表記です。
lower-armenian
アルメニア語の小文字の数値表記です。
upper-armenian
アルメニア語の大文字の数値表記です。
malayalam
マラヤーラム語の数値表記です。
mongolian
モンゴル語の数値表記です。
myanmar
ミャンマー語の数値表記です。
oriya
オリヤー語の数値表記です。
persian
ペルシャ語の数値表記です。
simp-chinese-formal
中国の公的な文書に見られる簡体数字を用いた表記です。
simp-chinese-informal
中国の一般的な文書に見られる簡体数字を用いた表記です。
tamil
タミル語の数値表記です。
telugu
テルグ語の数値表記です。
thai
タイ語の数値表記です。
tibetan
チベット語の数値表記です。
trad-chinese-formal
中国の公的な文書に見られる繁体数字を用いた表記です。
trad-chinese-informal
中国の一般的な文書に見られる繁体数字を用いた表記です。
disclosure-open
ディスクロージャー・ウィジェットが開いている状態を表す記号です。<details>で使用されます。
disclosure-closed
ディスクロージャー・ウィジェットが閉じている状態を表す記号です。<details>で使用されます。

list-styleの使い方とサンプル

list-styleプロパティの構文は以下の通りです。

CSS
/* 汎用的なキーワード値 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;

/* 言語ごとのキーワード値 */
list-style-type: hiragana;
list-style-type: japanese-informal;
list-style-type: katakana-iroha;

/* <string>値 */
list-style-type: '・';
list-style-type: "◆";

/* マーカーなし */
list-style-type: none;

/* グローバル値 */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: unset;

list-style-typeの実例

それでは実際にlist-style-typeプロパティの書き方を見ていきましょう。以下の例は、マーカーのスタイルを変更したリストを並べて比較したものです。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	display: grid;
 	grid: repeat(2, auto) / repeat(3, 1fr);
	gap: 1rem;
}
.samp_box > div {
	padding: .3rem;
	background: #fff;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
#lst_1 ul {
	list-style-type: disc;
}
#lst_2 ul {
	list-style-type: circle;
}
#lst_3 ul {
	list-style-type: square;
}
#lst_4 ul {
	list-style-type: decimal;
}
#lst_5 ul {
	list-style-type: upper-alpha;
}
#lst_6 ul {
	list-style-type: katakana-iroha;
}
HTML
<section class="samp_box">
	<div id="lst_1">
		<h2>disc</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="lst_2">
		<h2>circle</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="lst_3">
		<h2>square</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="lst_4">
		<h2>decimal</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="lst_5">
		<h2>upper-alpha</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="lst_6">
		<h2>katakana-iroha</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
</section>

list-style-typeに関連するCSSプロパティ

リスト(list)関連
list-style リストマーカーに関するスタイルを一括で指定する
list-style-image リスト項目のマーカーに画像を指定する
list-style-position リスト項目の先頭に表示するマーカーの位置を指定する
list-style-type リスト項目の先頭に表示するマーカーの種類を指定する