【CSS】リスト関連プロパティを基本から解説｜Webの基礎

記事内には広告が含まれます

2026年7月29日

はじめに

「箇条書きの先頭にある黒丸（マーカー）を消したい」「番号付きリストの数字をアルファベットに変えたい」「ナビゲーションメニューを作ろうとしたら、なぜか変な余白やマーカーが残ってしまう」という経験はありませんか？

これらはすべて、CSSのリスト関連プロパティを理解すれば解決できます。

前回の記事では、値の変化を扱うtransition・animationについて解説しました。
今回は、<ul> や <ol> のマーカー（先頭記号）を制御する list-style 関連のプロパティと、リストをリセットして実務でよく使うナビゲーションメニューなどに応用する方法まで、わかりやすく解説します。

リストとは？（ul・ol・liのおさらい）

CSSのリストプロパティを理解する前に、まずHTML側のリスト要素をおさらいしておきましょう。

要素	意味	マーカーの初期表示
`<ul>`	順序を問わないリスト（unordered list）	黒丸（`disc`）
`<ol>`	順序があるリスト（ordered list）	連番（`decimal`）
`<li>`	リストの各項目（list item）	–

<ul>
    <li>Excel VBA</li>
    <li>Power Query</li>
    <li>Webの基礎</li>
</ul>

<ol>
    <li>ファイルを開く</li>
    <li>マクロを実行する</li>
    <li>結果を確認する</li>
</ol>

これらの先頭に表示される黒丸や数字を「マーカー」と呼び、CSSの list-style 関連プロパティで種類・位置・画像を自由にカスタマイズできます。

list-style-type（マーカーの種類）

list-style-type は、マーカーとして表示する記号の種類を指定します。

主な指定値

値	説明
`disc`	黒丸（`ul` の初期値）
`circle`	白丸（中抜き）
`square`	黒四角
`decimal`	連番「1. 2. 3.」（`ol` の初期値）
`decimal-leading-zero`	連番「01. 02. 03.」
`lower-alpha`	英小文字「a. b. c.」
`upper-roman`	ローマ数字「I. II. III.」
`none`	マーカーを表示しない

書式

セレクタ {
    list-style-type: 値;
}

サンプル

ul.category-list {
    list-style-type: square;
}

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

マーカーを消したいだけであれば list-style-type: none; でも実現できますが、後述する list-style ショートハンドで list-style: none; とまとめて指定するほうが実務ではよく使われます。

list-style-position（マーカーの位置）

list-style-position は、マーカーを本文の内側に置くか外側に置くかを指定します。

主な指定値

値	説明
`outside`	マーカーを本文の外側に配置（初期値）
`inside`	マーカーを本文の内側に配置し、本文と一緒に折り返す

書式

セレクタ {
    list-style-position: 値;
}

サンプル

.notice-list {
    list-style-position: inside;
}

初期値の outside では、文章が2行以上に折り返したとき2行目以降がマーカーの位置まで戻らず、インデントされた状態で揃います。逆に inside にすると、2行目以降もマーカーの真下から始まり本文と同じ位置で折り返されるため、見た目の印象が変わります。デザインに応じて使い分けましょう。

list-style-image（画像マーカー）

list-style-image は、マーカーとして任意の画像を表示します。

書式

セレクタ {
    list-style-image: url("画像のパス");
}

サンプル

.check-list {
    list-style-image: url("/images/icon-check.png");
}

list-style-image は画像サイズの調整がしづらく、環境によって表示位置が微妙にずれることがあるため、実務では次に紹介する ::marker 疑似要素や、後述する list-style: none; ＋背景画像の組み合わせで代用するケースも多く見られます。

list-style（ショートハンド）

list-style は、これまで紹介した3つのプロパティをまとめて1行で指定できるショートハンドです。

書式

セレクタ {
    list-style: 種類 位置 画像;
}

サンプル

ul.square-list {
    list-style: square outside none;
}

マーカーを完全に消したい場合は、none のみを指定すれば十分です。

ul.reset-list {
    list-style: none;
}

list-style: none; を指定しても、ul・ol 要素が本来持っている padding-left（インデント分の余白）は消えません。マーカーごと余白も消したい場合は、padding: 0; もあわせて指定する必要があります。

::marker（マーカーを疑似要素として装飾する）

::marker は、リストのマーカー部分だけを疑似要素として直接装飾できる比較的新しいCSS機能です。マーカーの色やフォントサイズ、content によるテキスト差し替えまで可能です。

書式

セレクタ::marker {
    プロパティ: 値;
}

サンプル（マーカーの色だけを変える）

.important-list li::marker {
    color: #e74c3c;
}

サンプル（マーカーの中身を独自のテキストに差し替える）

.arrow-list li::marker {
    content: "→ ";
    color: #0077cc;
}

::marker で指定できるプロパティは color や content、font-* 系など一部に限られており、background や margin などは適用できない点に注意してください。

実務サンプル1（マーカーなしのナビゲーションメニュー）

<ul> は意味的に「リスト」として扱われるため、ナビゲーションメニューのマークアップにもよく使われます。list-style と padding をリセットして横並びのメニューに仕上げる定番パターンです。

HTML

<nav>
    <ul class="nav-menu">
        <li><a href="/">ホーム</a></li>
        <li><a href="/about/">サイトについて</a></li>
        <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
</nav>

CSS

.nav-menu {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
}

list-style: none; に加えて margin: 0; padding: 0; を指定することで、リスト特有の余白やマーカーを完全に取り除き、まっさらな状態から横並びメニューを組み立てられます。

実務サンプル2（チェックマーク付きの特徴リスト）

::marker の代わりに list-style: none; と ::before を組み合わせることで、画像を使わずに独自アイコン付きのリストを作れます。

HTML

<ul class="feature-list">
    <li>操作は簡単、専門知識は不要です</li>
    <li>無料でダウンロードできます</li>
    <li>Excel 2016以降で動作します</li>
</ul>

CSS

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-list li {
    position: relative;
    padding-left: 1.5em;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2ecc71;
    font-weight: bold;
}

list-style-image を使うより、::before で自由な位置・色・サイズのアイコンを表示できるため、実務ではこちらの方法が選ばれることが多くなっています。

よくある質問・トラブル対処

Q. list-style: none; を指定してもマーカーの分の余白が残る

→ ul・ol 要素には初期状態で padding-left（ブラウザによっては margin）が設定されています。list-style: none; はマーカーの表示だけを消すため、余白まで消したい場合は padding: 0;（必要に応じて margin: 0;）もあわせて指定してください。

Q. list-style-position: inside; にしたら2行目の位置が変わってしまった

→ inside は本文と一緒にマーカーも折り返す仕様のため、2行目以降が1行目の文字位置から始まります。1行目の位置と2行目以降の位置を揃えたい場合は、初期値の outside のまま、::before を使った実装に切り替えるのがおすすめです

Q. ::marker で背景色や余白を付けたい

→ ::marker に指定できるプロパティは color・content・font-* 系など限られており、background や margin は適用されません。装飾の自由度を上げたい場合は、実務サンプル2のように list-style: none; ＋ ::before の組み合わせを使いましょう。

Q. 番号付きリストの開始番号を1以外にしたい

→ CSSではなくHTML側の <ol start="5"> のように start 属性で指定します。CSSの list-style プロパティには開始番号を変更する機能はありません。