list-style:リストマーカーに関するスタイルを一括で指定する

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

list-styleプロパティの説明

list-styleは、リストマーカーに関するスタイルを一括で指定します。リストマーカーは箇条書きの一覧として表示されるリスト項目の先頭に置かれる目印のことです。

マーカーの仕様は、リスト項目の内側に生成される::markerという疑似要素によって定義されています。既定値では、<li>要素を配置すると自動的に生成されます。

list-styleは、以下の機能を一括で制御するショートハンド・プロパティです。

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

list-styleに指定できる値

list-style-type
list-style-typeの値です。マーカーの種類を指定します。
list-style-image
list-style-imageの値です。マーカーに表示させる画像を指定します。
list-style-position
list-style-positionの値です。マーカーの位置を指定します。

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

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

CSS
/* list-style-type */
list-style: disc;
list-style: square;

/* list-style-image */
list-style: url('../images/marker.png');

/* list-style-position */
list-style: inside;
list-style: outside;

/* type | position */
list-style: circle inside;
list-style: decimal outside;

/* type | image | position */
list-style: disc url('images/marker.png') outside;

/* キーワード値 */
list-style: none;

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

list-styleの実例

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

マーカーの位置は、リスト項目のコンテンツ・エリアの内側に収めるか、リスト項目のコンテンツ・エリアの外側に出して表示するかの二種類から選択できます。細かい位置調整は、ボックスのmarginpaddingで行います。

表示確認
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;
}
#ls_1 ul {
	list-style: circle inside;
}
#ls_2 ul {
	list-style: decimal inside;
}
#ls_3 ul {
	list-style: disc url(../images/sample_list_marker.png) inside;
}
#ls_4 ul {
	list-style: circle outside;
}
#ls_5 ul {
	list-style: decimal outside;
}
#ls_6 ul {
	list-style: disc url(../images/sample_list_marker.png) outside;
}
HTML
<section class="samp_box">
	<div id="ls_1">
		<h2>circle inside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_2">
		<h2>decimal inside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_3">
		<h2>image inside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_4">
		<h2>circle outside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_5">
		<h2>decimal outside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
	<div id="ls_6">
		<h2>image outside</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</div>
</section>

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

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