The list-style property in CSS is a shorthand that allows you to specify the markers (their shape, position, images, etc.) for list items in a single declaration, enabling flexible customization of the list’s appearance.
HTMLで箇条書きを作成する場合、通常は<ul>（順序なしリスト）や<ol>（順序付きリスト）、そしてそれらの子要素である<li>（リストアイテム）を使います。デフォルトのスタイルとして、<ul>では黒い丸（disc）や空洞の丸（circle）、四角（square）などが、<ol>では数字、英数字、ローマ数字などが自動的に付加されます。
しかし、デフォルトのスタイルだけでは表現に限界があります。より自由度の高い表現を行うために利用できるのが、CSSのlist-style関連プロパティです。list-styleは主に次の3つのプロパティの総称（またはショートハンド）です。
list-styleは上記3つのプロパティをまとめて指定することができるショートハンドです。書き方としては、
CSS
list-style: <list-style-type> <list-style-position> <list-style-image>;のような順番で指定します。複数の値を同時に指定しない場合は、省略も可能です。例えば、
CSS
ul.custom-bullet {
list-style: circle inside;
}のように、list-style-typeとlist-style-positionだけを指定したり、
CSS
ol.custom-image {
list-style: url('path/to/bullet.png') outside;
}のように、list-style-imageとlist-style-positionだけを指定したりすることもできます。
ショートハンドを使わずに個別に指定する場合は、
CSS
ul.custom {
list-style-type: disc;
list-style-position: outside;
list-style-image: none;
}といった形になります。
リストのマーカーとなる記号や数字の形式を指定するプロパティです。主な値は次のようなものがあります。
<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 (番号を表示しない)HTML5/CSS3以降では、独自のカウンタースタイル（@counter-style）を使うことも可能です。例えば、和文での一二三などを実装することもできますが、これは高度な話題なので後ほど触れます。
HTML
<ol class="custom-roman">
<li>はじめに</li>
<li>本論</li>
<li>結論</li>
</ol>CSS
.custom-roman {
list-style-type: upper-roman;
}上記の例では、リストアイテムが「I」「II」「III」という形式になります。
マーカーがテキストの「外側に表示されるか」、あるいは「内側に表示されるか」を指定します。指定できる値は以下の2つです。
HTML
<ul class="inside-example">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>CSS
.inside-example {
list-style-type: square;
list-style-position: inside;
}この場合、マーカーがテキストの内側に入り込み、文章と同じインデントで整列されます。改行されると、2行目以降も同じ位置から文章が始まり、マーカーが左に飛び出さないという特徴があります。
リストアイテムの先頭に画像を使いたい場合に指定するプロパティです。通常のマーカーの代わりに独自の画像を表示できます。
CSS
.custom-image {
list-style-image: url('path/to/icon.png');
}もし画像を表示させたくない場合は、
CSS
list-style-image: none;を指定します。ただし、画像が大きすぎる場合、マーカーとして綺麗に表示されない可能性があるため、適切にサイズを調整したアイコンを使うことが望ましいです。また、表示位置はlist-style-positionの影響も受けます。
まとめて指定するショートハンドを使うことで、コード量を減らしつつ可読性を高められます。
CSS
ul.custom-list {
list-style: square inside url('path/to/custom-bullet.png');
}上記のように一度に指定することもできますが、値の順序には注意しましょう。一般的には以下のような順序で指定します。
list-style-typelist-style-positionlist-style-imageただし、どの値を省略してもエラーにはなりません。未指定の項目は初期値を継承、または既定の値が使われます。
サイト全体でマーカーを表示したくない場合や、フレームワークによって初期化を行いたい場合に、リストのスタイルをリセットする方法があります。
CSS
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}list-style: none;marginやpaddingもブラウザ初期値が入っているため、リセットで0にしておくことが多いです。これにより、デフォルトのマーカーや余白がすべて消えるため、自由にレイアウトしやすくなります。ただし、アクセシビリティの観点では、箇条書きであることが視覚的に分かりにくくなる場合があるので、必要に応じて適切なマーカーや余白を再定義することが望ましいです。
メニューやナビゲーションなどで、リストを横並びにしたい場合があります。例えば、以下のようにliをインライン表示にすることが多いです。
CSS
.nav > li {
display: inline-block;
list-style: none; /* デフォルトマーカーが不要な場合 */
margin-right: 10px;
}この場合、list-style-type等の設定は基本的に機能しません。なぜなら、インラインブロック化されたliに対してマーカーは表示されないのが一般的だからです（ブラウザやレイアウトの仕組み次第で挙動が異なることもあります）。もしマーカーが必要なら、display: list-item;（ほとんど使われないが）を指定するか、疑似要素の::beforeなどを使ったカスタム実装を検討します。
::markerや::before）を使ったカスタムマーカーCSS3以降では、::marker疑似要素を使ってマーカーのスタイルをより詳細に制御することもできます。例えば色を変えたり、フォントを変更したりできます。ただし、すべてのブラウザで完全にサポートされているわけではありません。
あるいは、疑似要素の::beforeを使ってあたかもマーカーのように見せる方法もあります。
CSS
ul.custom-marker li {
list-style: none; /* 既存マーカーは非表示 */
position: relative;
padding-left: 1.5em; /* 擬似要素分の余白を確保 */
}
ul.custom-marker li::before {
content: "★"; /* 好きな記号を入れる */
color: gold;
position: absolute;
left: 0;
}このようにCSSだけでカスタム記号を挿入することで、独自のマーカーを実現できます。画像やフォントアイコン、SVGなども利用可能です。
@counter-style）での高度なカスタマイズCSSの@counter-style規則を使うと、独自の番号付けルールを定義できます。たとえば、和文数字「壱」「弐」「参」や、特定の文字列パターンなど、標準のlist-style-typeにない形式を作れます。ブラウザのサポートや利用場面が限られますが、カスタムリストの表現にこだわりたい場合に非常に強力です。
HTML
<ol class="japanese">
<li>はじめに</li>
<li>カウンタースタイルの概要</li>
<li>実装例</li>
<li>ブラウザサポート</li>
<li>まとめ</li>
</ol>CSS
@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を挿入する方法なども考えられます。使い方次第で、単なる箇条書きが読みやすく個性的なレイアウトへと変わります。