CSS

The list-style property is a shorthand that lets you specify a list item’s marker shape, position, and image all at once.

list-style

はじめに

list-style 系のプロパティは、箇条書きに表示されるマーカー（丸・番号など）を思い通りにカスタマイズするための設定項目です。マーカーの形や色、配置位置、さらに画像を使った装飾までまとめてコントロールできるため、シンプルなリストはもちろん、ナビゲーションメニューのデザインやチェックリスト、多言語対応のユーザーインターフェイスなど、さまざまな場面で活躍します。

HTML で箇条書きを作るときは、まず <ul>（順序なしリスト）や <ol>（順序付きリスト）と、そこに含まれる <li>（リストアイテム）要素を用います。このときブラウザは、<ul> に対しては黒丸（disc）・白丸（circle）・四角（square）などのマーカーを、<ol> に対しては 1, 2, 3… といった数字や a, b, c… の英字、Ⅰ, Ⅱ, Ⅲ… のローマ数字などを、自動でマーカーとして表示してくれます。

ただし、この標準のマーカーだけではデザインの幅が限られるため、より柔軟で個性的な見た目を実現したい場合には、CSS の list-style 関連プロパティを使ってカスタマイズする必要があります。

関連プロパティとショートハンド

ショートハンド順序は自由ですが、慣例的に「type → position → image」の並びが読みやすいです。未指定のサブプロパティは初期値に戻ります。

/* ショートハンド例 */
ul.warning {
	list-style: square inside url(warning.svg);
}

複数の値を同時に指定しない場合は、省略も可能です。例えば、

ul.warning {
	list-style: square inside;
}

のように、list-style-typeとlist-style-positionだけを指定したり、

ol.warning {
		list-style: inside url(warning.svg);
}

のように、list-style-positionとlist-style-imageだけを指定したりすることもできます。

ショートハンドを使わずに個別に指定する場合は、

ul.warning {
	list-style-type: square;
	list-style-position: inside;
	list-style-image: url(warning.svg);
}

といった形になります。

list-style-type ― マーカー形状・番号体系

リストのマーカーとなる記号や数字の形式を指定するプロパティです。主な値は次のようなものがあります。

代表的なキーワード

順序なしリスト（<ul>）で使える主な値

• disc (黒い丸) - デフォルトでよく使われる
• circle (空洞の丸)
• square (四角)
• none (マーカーを表示しない)

順序付きリスト（<ol>）で使える主な値

• decimal (通常のアラビア数字、例: 1, 2, 3 ...)
• decimal-leading-zero (先頭ゼロ付きの数字、例: 01, 02, 03 ...)
• lower-alpha (小文字の英字、例: a, b, c ...)
• upper-alpha (大文字の英字、例: A, B, C ...)
• lower-roman (小文字のローマ数字、例: i, ii, iii ...)
• upper-roman (大文字のローマ数字、例: I, II, III ...)
• lower-greek (ギリシャ文字の小文字、例: α, β, γ ...)
• upper-greek (ギリシャ文字の大文字) — 非常に対応状況が限られるが存在
• lower-latin / upper-latin — 実質alphaと同様の場合も
• none (番号を表示しない)

下記の例では、リストアイテムが「I」「II」「III」という形式になります。

ol.custom-roman {
	list-style-type: upper-roman;
}

<ol class="custom-roman">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ol>

HTML5/CSS3以降では、独自のカウンタースタイル（@counter-style）を使うことも可能です。これは高度な話題なので後ほど触れます。

国際化番号体系

list-style-type は 40 以上の多言語体系を標準で持ちます。

例）japanese-formal・kannada・armenian・georgian など。

ol.ja {
	list-style-type: japanese-formal; /* 壱, 弐, 参… */
}

<ol class="ja">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ol>

list-style-position ― マーカー配置

マーカーがテキストの「外側に表示されるか」、あるいは「内側に表示されるか」を指定します。指定できる値は以下の2つです。

outside

デフォルト設定では、リストのマーカーはリスト項目のボックスの外側にある 左側の余白（マージン領域） に表示されます。

この配置により、マーカーは左マージン内に収まり、その右側に続く テキストの行頭がきれいにそろう 形になります。

これが、私たちがふだん目にする 標準的な箇条書きのレイアウト です。

.outside-example {
	list-style: square outside;
}

<ul class="outside-example">
	<li>item1-1<br>item1-2</li>
	<li>item2</li>
</ul>

inside

inside を指定すると、リストの マーカー（●や番号など）がリストアイテムのテキスト領域に含まれて表示 されます。

つまり マーカーと本文が同じインデント幅の中に収まり、2 行目以降がある場合は テキストがマーカーの真下から折り返される ため、outside とは違った段落の見え方になります。

このレイアウトは、チェックリストのチェックボックス風デザイン や、段落番号を本文内に食い込ませたいとき によく使われます。

.inside-example {
	list-style: square inside;
}

<ul class="inside-example">
	<li>item1-1<br>item1-2</li>
	<li>item2</li>
</ul>

list-style-image ― 画像マーカー

リストアイテムの先頭に画像を使いたい場合に指定するプロパティです。通常のマーカーの代わりに独自の画像を表示できます。

.custom-image {
	list-style-image: url(icon.svg);
}

もし画像を表示させたくない場合は、

list-style-image: none;

を指定します。ただし、画像が大きすぎる場合、マーカーとして綺麗に表示されない可能性があるため、適切にサイズを調整したアイコンを使うことが望ましいです。また、表示位置はlist-style-positionの影響も受けます。

高解像度対応

2x PNG や vector(SVG) を推奨。

フォールバック

画像が読めない場合、UA は list-style-type を参照。

Data URI

依存ファイルを減らしたい場合に便利。ただし可読性は犠牲。

::marker 擬似要素との比較

::marker はリスト項目のマーカー専用に用意された擬似要素で、CSS Lists Level 3 の一部として主要ブラウザで安定実装が進んでいます。これを使うと、通常のインライン要素と同じ感覚でマーカーに color・font-family・font-size などのスタイルを直接指定できます。さらに list-style-* プロパティと併用でき、同じプロパティを両方に書いた場合は 後から記述したほうが優先される 仕組みです。

.custom-marker li::marker {
	content: '👉';
	font-size: 1.2em;
}

<ol class="custom-marker">
	<li>item1-1<br>item1-2</li>
	<li>item2</li>
	<li>item3</li>
</ol>

• content で完全なカスタムマーカー
• 多行折り返しの位置ズレ問題が少ない
• 現状 IE・古い Edge は未対応

カウンタースタイル（@counter-style）での高度なカスタマイズ

CSSの@counter-style規則を使うと、独自の番号付けルールを定義できます。たとえば、和文数字「壱」「弐」「参」や、特定の文字列パターンなど、標準のlist-style-typeにない形式を作れます。ブラウザのサポートや利用場面が限られますが、カスタムリストの表現にこだわりたい場合に非常に強力です。

<ol class="japanese">
	<li>はじめに</li>
	<li>カウンタースタイルの概要</li>
	<li>実装例</li>
	<li>ブラウザサポート</li>
	<li>まとめ</li>
</ol>

@counter-style custom-japanese {
	system: fixed;
	symbols: "壱" "弐" "参" "四" "五";
	suffix: "、";
}

ol.japanese {
	list-style: custom-japanese;
}

上記のように定義したのち、list-style: custom-japanese;を指定すると、1番目に「壱」、2番目に「弐」...というようなマーカーで表示されます。
（実際の環境で正しく動くかはブラウザのサポート状況に依存するため、動作テストが必要です。）

ブラウザ互換性と注意点

• list-style-typeやlist-style-positionはほとんどのモダンブラウザで問題なくサポートされています。
• list-style-imageも同様に広くサポートされますが、リストアイテムの位置やサイズはブラウザごとに若干の差が出る可能性があります。
• @counter-styleなどの高度な機能は、比較的新しいブラウザでのみサポートされる場合があります。古いブラウザをターゲットに含む場合は、フォールバック（通常のlist-style-type）を用意すると良いでしょう。
• ::marker疑似要素もサポート状況を確認する必要があります。カスタマイズしたい場合、::beforeや::afterで代替実装するほうが互換性が高いこともあります。

まとめ

• list-style は、list-style-type・list-style-position・list-style-imageをまとめて指定できるショートハンドであり、個別指定も可能。
• list-style-type でマーカーの種類や数字の形式を指定。デフォルト以外にも多くのプリセット形式がある。
• list-style-position でマーカーの配置場所を「inside」か「outside」に設定し、インデントや折り返しの見た目を調整できる。
• list-style-image でマーカーの代わりに独自の画像を使用可能。アイコンのサイズや見栄えには注意。
• デフォルトのマーカーを消す場合は list-style: none; を使う。フレームワークやリセットCSSでもよく採用される。
• 独自のデザインを追求するなら ::before/::after や ::marker、さらには @counter-style を検討すると表現の幅が広がる。
• ただし、高度なカスタマイズはブラウザ対応状況やアクセシビリティへの配慮が必要。
• すべてのブラウザで同じように表示されるとは限らないため、実機での動作確認やフォールバックを意識する。

list-style関連プロパティは一見単純そうに見えますが、デザインやユーザビリティ、アクセシビリティなど多方面に影響があります。初心者の方はまずはlist-style-typeやlist-style-positionで基本的な見た目の調整を覚え、中級以上の方は疑似要素や@counter-styleなども取り入れることで、表現力を高めてみてください。

より柔軟なデザインを実現する際は、マーカーを消してから独自のアイコンやSVGを挿入する方法なども考えられます。使い方次第で、単なる箇条書きが読みやすく個性的なレイアウトへと変わります。