タイトル: リスト関連のプロパティ
SEOタイトル: CSS リスト関連プロパティ 完全ガイド（list-style / マーカー / 画像 / 内側外側 / カスタムカウンタ）
| この記事の要点 |
|
リスト関連プロパティとは
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>