list-style-position：リスト項目の先頭に表示されるマーカーの位置を指定する

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

list-style-positionは、リスト項目の先頭に表示されるマーカーの位置を指定します。マーカーはリスト項目の内側に生成される::markerという疑似要素によって配置されます。

本プロパティは、この疑似要素を<li>のコンテンツ・エリアの内側に収めるか、外側に出すかの2種類から選択するものです。つまり、マーカーの細かい位置を調整するものではなく、リスト項目のマーカーをどのようなルールで配置するかの基準を示すものです。

list-style-positionの適用対象はリスト項目です。具体的には、displayプロパティにlist-itemの値を持つ要素で、既定値では<li>に当たります。ただし、本プロパティの値は継承するので、全てのリスト項目に対して指定する必要はなく、親要素の<oi>や<ul>へ指定すれば、全てのリスト項目に適用されます。

list-styleまたはlist-style-typeの値がnoneだった場合は、::markerが生成されなくなるため、このプロパティは意味を失います。

リスト・マーカーの位置調整が上手く行かない場合は、リスト自体が生成するボックスと、リスト項目が生成するボックス、そしてリスト・マーカーが所属している位置を分解して考えましょう。ボックスという言葉の意味が分からない方は、CSSのボックス・モデルの解説を参照して下さい。

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

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

outside

リスト項目の最初の要素として生成された::markerは、<li>のコンテンツ・エリアの外部に配置されます。この時、マーカーはリスト項目のパディング・ボックスおよびボーダー・ボックスの外側に所属します。

inside

リスト項目の最初の要素として生成された::markerは、<li>のコンテンツ・エリアの内部に配置されます。この時、マーカーはリスト項目のパディング・ボックスおよびボーダー・ボックスの内側に所属します。

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

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

/* キーワード値 */
list-style-position: outside;
list-style-position: inside;

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

list-style-positionの実例

それでは実際にlist-style-positionプロパティの書き方を見ていきましょう。以下の例は、マーカーの異なるリストを並べてlist-style-positionの値を変えた場合の比較です。マーカーの位置は上の段がoutside、下の段がinsideです。

.samp_box {
	display: grid;
 	grid-template: repeat(2, auto) / repeat(3, 1fr);
	gap: 1rem;
	padding: 1rem;
	background-color: #eee;
}
.samp_box > section {
	padding: .5rem;
	background-color: #fff;
}
section > h1 {
	margin: 0;
	font-size: 1rem;
}
.outside ul {
	list-style-position: outside;
}
.inside ul {
	list-style-position: inside;
}
#ls_1 ul {
	list-style-type: circle;
}
#ls_2 ul {
	list-style-type: decimal;
}
#ls_3 ul {
	list-style-image: url(../images/sample_list_marker.png);
}
#ls_4 ul {
	list-style-type: circle;
}
#ls_5 ul {
	list-style-type: decimal;
}
#ls_6 ul {
	list-style-image: url(../images/sample_list_marker.png);
}

<div class="samp_box">
	<section id="ls_1" class="outside">
		<h1>circle outside</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</section>
	<section id="ls_2" class="outside">
		<h1>decimal outside</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</section>
	<section id="ls_3" class="outside">
		<h1>image outside</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</section>
	<section id="ls_4" class="inside">
		<h1>circle inside</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</section>
	<section id="ls_5" class="inside">
		<h1>decimal inside</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</section>
	<section id="ls_6" class="inside">
		<h1>image inside</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</section>
</div>

リスト・マーカーの位置を確認する

リスト・マーカーの所在を分かりやすくするために、リストを構成する要素に色をつけてみましょう。上記のサンプルを応用して、リスト自体のボックスとリスト項目のボックスを可視化します。

ここでは、リスト自体のボックスに緑の背景色を指定し、リスト項目のボックスに青系統の背景色を指定しました。余白のプロパティは省略しているため、paddingおよびmarginは既定値が適用されています。

上記の通り、ボックスの構造を可視化すれば、リスト・マーカーの位置調整を行うために何をすべきかが見えてきます。ここで<ul>のパディングを0にすれば、outsideのリスト・マーカーは行の先頭からはみ出し、insideのリスト・マーカーは行の先頭に揃います。マーカーそのものが不要であれば、list-style-typeプロパティの値をnoneにしましょう。

リスト項目のマーカーがずれる問題

リスト項目の中にリンクなどの子要素を設置すると、マーカーがずれて表示されることがあります。これは、子要素のdisplayプロパティがblockだった場合に起こるもので、::markerのレンダリングが、ブロック要素の振舞いに衝突していることが原因です。

マーカーの描画に::markerを採用していないブラウザでは正常に表示されるため、ブラウザ側の不具合であると勘違いしたり、表示の崩れを見逃してしまうことがあります。

具体的な解決方法は、CSSでリストをデザインするための完全ガイドで解説しています。これらの仕様を理解することで、柔軟にリストを扱えるようになります。