リストの先頭に付く「・」や「1.」といった記号・番号は、CSS の list-style 系プロパティで自由に変えられます。丸を四角にしたり、数字をアルファベットにしたり、いっそマーカーを消してしまったりと、見た目のバリエーションは意外と豊富です。この記事では list-style-type / list-style-position / list-style-image と、それらをまとめて書く一括指定 list-style の使い方を、初心者〜中級者向けに整理します。マーカーの色やフォントを変えたいときに登場する ::marker 疑似要素との住み分けにも触れます。
目次
マーカーの正体と list-style の役割
<ul> や <ol> でリストを作ると、各項目の頭に自動で「・」や連番が表示されます。この記号・番号のことをマーカーと呼びます。マーカーはブラウザが標準スタイルとして付けているもので、その見た目をコントロールするのが list-style 系のプロパティです。<ul> や <ol> はどんな種類のリストかという意味づけ（マークアップ）を担い、マーカーをどう見せるかは CSS の役割、と分けて考えると整理しやすいでしょう。
関連するプロパティは list-style-type（記号・番号の種類）、list-style-position（マーカーを置く位置）、list-style-image（マーカーを画像にする）の3つで、これらを一括で書けるのが list-style です。多くの場面では list-style-type だけ知っていれば足りますが、まずは種類の変更から見ていきます。
list-style-type で記号や番号を変える
list-style-type はマーカーの種類を指定するプロパティです。順序なしリスト（<ul>）でよく使う記号系と、順序付きリスト（<ol>）で使う番号系があり、代表的な値は次のとおりです。
| 値 | マーカーの見た目 |
|---|---|
disc | 塗りつぶしの丸（<ul> の初期値） |
circle | 白抜きの丸 |
square | 四角 |
decimal | 1, 2, 3 …（<ol> の初期値） |
decimal-leading-zero | 01, 02, 03 …（2桁ゼロ埋め） |
lower-alpha | a, b, c …（英小文字） |
upper-alpha | A, B, C …（英大文字） |
lower-roman | i, ii, iii …（ローマ数字・小文字） |
upper-roman | I, II, III …（ローマ数字・大文字） |
none | マーカーを表示しない |
書き方はシンプルで、対象のリストにプロパティを1行足すだけです。
/* 順序なしリストのマーカーを四角にする */
ul.box {
list-style-type: square;
}
/* 順序付きリストを英小文字にする */
ol.alpha {
list-style-type: lower-alpha;
}
disc や circle のような記号系を <ol> に、逆に decimal のような番号系を <ul> に指定することもできます。マーカーの見た目はあくまで CSS 側の話なので、要素の種類とは独立して切り替えられます。実際に各値がどう表示されるかを並べたのが次のデモです。
<h3>list-style-type の種類</h3>
<p class="label">disc（初期値）</p>
<ul class="disc">
<li>りんご</li>
<li>みかん</li>
</ul>
<p class="label">circle</p>
<ul class="circle">
<li>りんご</li>
<li>みかん</li>
</ul>
<p class="label">square</p>
<ul class="square">
<li>りんご</li>
<li>みかん</li>
</ul>
<p class="label">decimal（数字）</p>
<ol class="decimal">
<li>りんご</li>
<li>みかん</li>
</ol>
<p class="label">lower-alpha（英小文字）</p>
<ol class="alpha">
<li>りんご</li>
<li>みかん</li>
</ol>
<p class="label">lower-roman（ローマ数字）</p>
<ol class="roman">
<li>りんご</li>
<li>みかん</li>
</ol>body {
font-family: sans-serif;
padding: 12px;
color: #333;
}
h3 {
margin-top: 0;
}
.label {
margin: 16px 0 4px;
font-size: 13px;
color: #666;
}
ul,
ol {
margin: 0;
}
.disc { list-style-type: disc; }
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.decimal { list-style-type: decimal; }
.alpha { list-style-type: lower-alpha; }
.roman { list-style-type: lower-roman; }なお circle は「白抜きの丸」で、disc（塗りつぶしの丸）とは別物です。名前が紛らわしいので、迷ったら「circle＝輪郭だけ」と覚えておくと混乱しません。
マーカーの位置を変える list-style-position
list-style-position は、マーカーをテキストの枠に対してどこに置くかを決めるプロパティです。値は outside と inside の2つで、初期値は outside です。
outside はマーカーをテキスト枠の外側（左）に置きます。項目のテキストが複数行に折り返しても、2行目以降はマーカーの右に揃うため、文章の頭が縦にきれいに並びます。一方 inside はマーカーをテキスト枠の内側に含めるため、折り返した2行目はマーカーの真下まで回り込みます。マーカーごと text-align: center で中央寄せしたいときなどは inside が便利ですが、通常の箇条書きでは outside のほうが読みやすいことが多いです。
次のデモで、同じテキストが outside と inside でどう折り返すかを比べてみてください。あわせて、後述する list-style: none でマーカーを消した状態も並べています。
<h3>outside と inside、そしてマーカー非表示</h3>
<p class="label">list-style-position: outside（初期値）</p>
<ul class="outside">
<li>マーカーはテキスト枠の外側に置かれます。行が折り返しても文章の頭は揃います。長めの文章で確認してみましょう。</li>
<li>2行目の項目です。</li>
</ul>
<p class="label">list-style-position: inside</p>
<ul class="inside">
<li>マーカーがテキスト枠の内側に入ります。折り返すとマーカーの下に文字が回り込みます。長めの文章で確認してみましょう。</li>
<li>2行目の項目です。</li>
</ul>
<p class="label">list-style: none（マーカー非表示）</p>
<ul class="none">
<li>マーカーが消えます。</li>
<li>2行目の項目です。</li>
</ul>body {
font-family: sans-serif;
padding: 12px;
color: #333;
}
h3 {
margin-top: 0;
}
.label {
margin: 16px 0 4px;
font-size: 13px;
color: #666;
}
ul {
margin: 0;
width: 260px;
background: #f4f7fb;
border: 1px solid #d8e0ea;
padding-top: 8px;
padding-bottom: 8px;
}
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }
.none {
list-style: none;
padding-left: 0;
}list-style-image と一括指定
list-style-image を使うと、マーカーを任意の画像に置き換えられます。url() で画像を指定するほか、none で画像を使わない指定に戻せます。
ul.check {
/* マーカーを画像に置き換える */
list-style-image: url("check.svg");
}
ただし list-style-image は画像サイズや位置の微調整がしにくいため、実務ではマーカーを none で消したうえで、::before や後述の ::marker に content でアイコンを付ける方法もよく使われます。用途が単純なら list-style-image、細かく制御したいなら疑似要素、と選び分けるとよいでしょう。
ここまでの3つのプロパティは、一括指定の list-style でまとめて書けます。値は「type / image / position」を空白区切りで並べますが、順番は自由で、省いた値は初期値になります。
/* 種類・位置をまとめて指定 */
ul.menu {
list-style: square inside;
}
/* 画像マーカーを内側に置く */
ul.check {
list-style: inside url("check.svg");
}
一括指定は指定しなかった項目を初期値にリセットする点に注意してください。たとえば list-style: square; と書くと、list-style-position と list-style-image は初期値（outside と none）に戻ります。以前に別の場所で list-style-image を指定していた場合、一括指定で意図せず画像が消えることがあります。
マーカーを消す list-style: none
ナビゲーションメニューやカード一覧など、リストとしてマークアップしつつマーカーは見せたくない場面はよくあります。その場合は list-style: none（または list-style-type: none）でマーカーを非表示にします。
ul.nav {
list-style: none; /* マーカーを消す */
margin: 0;
padding-left: 0; /* 左の余白も詰める */
}
ここでポイントになるのが padding-left です。ブラウザは <ul> / <ol> にマーカーを表示するためのスペースとして、左側に padding（環境により margin）を確保しています。list-style: none でマーカーを消しても、この余白は残るため、左端に謎の空白ができたように見えます。マーカーを消したうえで左詰めにしたいときは、padding-left: 0（必要なら margin: 0 も）を合わせて指定してください。マーカーが消えているのに項目が右にずれている、という場合はこの余白が原因です。
色やフォントを変えたいときは ::marker
「マーカーの色だけ赤にしたい」「番号を太字にしたい」といった要望は、list-style-type では実現できません。list-style-type が担うのはマーカーの内容（記号・番号の種類）であり、色やフォントサイズといった見た目のスタイルは ::marker 疑似要素で指定します。役割がきれいに分かれていると考えると分かりやすいです。
ol.point {
list-style-type: decimal; /* 番号の「種類」はこちら */
}
ol.point li::marker {
color: #e2564d; /* 番号の色 */
font-weight: bold; /* 太さ */
}
::marker で指定できるプロパティは color、font 系、content などに限られていて、余白や背景などは指定できません。あくまでマーカーそのものの文字スタイルを変えるもの、と押さえておきましょう。
マーカーの中身を文字列に置き換えたいときは、list-style-type に文字列を渡す書き方も使えます。たとえば list-style-type: "→ "; とすると、各項目の頭が矢印になります。content を使った疑似要素より手軽で、任意の絵文字や記号も指定できます。
ul.arrow {
list-style-type: "\2192 "; /* 矢印（→）を文字列マーカーに */
}
ol の番号を制御する start と reversed
番号の見た目は CSS で変えられますが、「何番から始めるか」「昇順か降順か」は HTML 側の属性で指定します。<ol> の start 属性は開始番号を、reversed 属性は番号を逆順（大きい数から小さい数へ）にします。list-style-type と組み合わせれば、途中から続く番号付きリストや、ランキング形式の降順リストも作れます。
<!-- 5 から始まる番号付きリスト --> <ol start="5"> <li>5番目の項目</li> <li>6番目の項目</li> </ol> <!-- 3, 2, 1 と逆順に振る --> <ol reversed> <li>一番目</li> <li>二番目</li> <li>三番目</li> </ol>
まとめ
リストのマーカーは list-style-type で種類（disc / square / decimal / lower-alpha など）を変え、list-style-position で outside か inside の位置を選び、list-style-image で画像に置き換えられます。これらは list-style でまとめて書け、指定しなかった値は初期値に戻る点だけ意識しておきましょう。マーカーを消したいときは list-style: none に padding-left: 0 を添えるのが定番です。そして色やフォントは ::marker、記号・番号の内容は list-style-type という住み分けを覚えておけば、たいていのリスト装飾は自在にコントロールできます。