この記事の要点

リスト関連プロパティは <ul> / <ol> / <li> のマーカー（行頭記号）を制御する list-style-type: 行頭の記号や数字の種類（disc / decimal / none など） list-style-image: 画像をマーカーに使う list-style-position: マーカーをテキストの外側 outsideか内側 insideに置くか ショートハンドの list-style で 3 つを 1 行で指定可 モダンには ::marker 疑似要素や counter() でより自由にカスタムできる

リスト関連プロパティとは

HTML の <ul>（順序なしリスト）・<ol>（順序ありリスト）・<li>（リスト項目）に対して、CSS でマーカー（行頭の点や番号）の見た目を変えるためのプロパティ群です。デザインに合わせて非表示にしたり、画像や独自カウンタに置き換えたりします。

主なプロパティ

プロパティ	役割	主な値
list-style-type	マーカーの種類	disc / circle / square / decimal / lower-roman / none
list-style-image	画像マーカー	url(...) / none
list-style-position	マーカーの位置	outside（既定） / inside
list-style	3 つのショートハンド	disc inside url(...) 等

list-style-type の代表値

値	見え方	用途
disc	● 黒丸	<ul> の既定
circle	○ 白丸	ネストした第 2 階層に
square	■ 黒四角	ネストした第 3 階層に
decimal	1, 2, 3, ...	<ol> の既定
decimal-leading-zero	01, 02, ...	桁揃え
lower-roman / upper-roman	i, ii, iii / I, II, III	章番号
lower-alpha / upper-alpha	a, b, c / A, B, C	選択肢
katakana / hiragana / cjk-ideographic	カナ / ひらがな / 漢数字	日本語特化
none	マーカー非表示	ナビ・カードリストなど

list-style ショートハンド

ul {
  list-style: disc inside;
}

ol.legal {
  list-style: lower-roman outside;
}

ul.custom {
  list-style: square url("/img/bullet.svg") outside;
}

/* マーカーを消したい */
nav ul { list-style: none; padding-left: 0; }

位置: outside と inside

値	挙動	典型用途
outside	マーカーはテキスト領域の外。複数行の折り返しは綺麗に揃う	記事本文の番号付き手順
inside	マーカーがテキストの内側。1 行目から左端に揃う	限られた幅、コンパクトな表示

::marker 疑似要素

モダン CSS では ::marker でマーカーの色やフォント、装飾を直接いじれます。

ol li::marker {
  color: #1976d2;
  font-weight: bold;
}

/* マーカー自体を絵文字に */
ul.steps li::marker { content: "✅ "; }

counter() による独自番号

章番号を「Chapter 1」のように装飾したいときは counter-reset と counter-increment、::before で組み立てます。

ol.chapters {
  list-style: none;
  counter-reset: chap;
  padding-left: 0;
}

ol.chapters li {
  counter-increment: chap;
}

ol.chapters li::before {
  content: "Chapter " counter(chap) ". ";
  color: #c62828;
  font-weight: bold;
}

ナビゲーション用の「マーカー消し」

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1em;
}

ヘッダーやサイドバーのメニューはマーカー非表示 + パディング 0がほぼ定型です。

よくある落とし穴

症状	原因 / 対処
list-style: none にしてもマーカーが残る	padding-left が効いて見えるだけ。padding-left: 0 も併用
画像マーカーが大きすぎる	list-style-image はサイズ制御不可。::marker + content: url() でサイズ調整
番号が予期せずリセットされる	新しい <ol> ごとに番号が初期化。継続したいときは start 属性
マーカーの色を変えたい	li::marker { color: ... }

定義リスト（dl / dt / dd）の装飾

用語の説明には <ul> / <ol> ではなく <dl> を使います。デフォルトでマーカーは付きませんが、CSS でインデントや色装飾を加えると読みやすくなります。

dl {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: .5em 1em;
}
dt {
  font-weight: bold;
  color: #1976d2;
}
dd {
  margin: 0;
}

ol の start / reversed 属性

HTML 側にも番号制御の属性があります。CSS だけでなくこちらも活用しましょう。

<!-- 番号を 10 から始める -->
<ol start="10">
  <li>項目A</li>
  <li>項目B</li>
</ol>

<!-- 大きい数字から降順 -->
<ol reversed>
  <li>1 位</li>
  <li>2 位</li>
  <li>3 位</li>
</ol>

関連

• その他のCSSプロパティ — 親カテゴリ
• list-style-type / list-style-image / list-style-position
• ::marker / counter() / counter-reset / counter-increment
• <ul> / <ol> / <li> / <dl>