CSS list-styleの使い方｜リストの点を消す・マーカーの色を変える

list-style は、箇条書き（ul・ol）の先頭に付く点や番号＝マーカーの「種類・位置・画像」をまとめて指定するプロパティです。点を消すなら list-style: none;、色を変えるなら li::marker { color: 色; } と書きます。

この記事では、list-style-type の値を実際の表示結果つきの一覧にし、「点を消したのに左の余白が残る」「点がはみ出す」「flex にしたら点が消えた」といった症状を、数値を測りながら直していきます。マーカーの色・サイズ・文字を変える3つの方法（::marker、::before、@counter-style）の比較と、::marker で使えるプロパティの表も載せました。出力はすべて Chromium 141（Playwright 経由）で確かめたもので、Firefox と Safari では動かしていません。

list-styleの早見表

list-styleの基本：3つのプロパティと初期値

list-style は、次の3つをまとめて書ける一括指定（ショートハンド）です。

ブラウザが最初から当てているスタイルも確認しておきます。Chromium 141 で測った値です。

ここで大事なのは2点です。マーカーは li の display: list-item によって出ていること、そして左の空きは ul・ol の padding-left: 40px（マーカーを置くための場所）であることです。後半の「症状別の直し方」は、ほぼこの2点で説明できます。

list-style は継承されるプロパティなので、ul・ol に書けば中の li に伝わります。li に直接書いても構いません。

list-style-typeの値と表示結果の一覧

<ol> に4つの項目を入れ、各値を指定したときに Chromium 141 がマーカーとして出した文字列です（アクセシビリティツリーの ListMarker から取得）。

記号のマーカー（ul 向け）

番号のマーカー（ol 向け）

日本語・漢字のマーカー

数字やアルファベットは「.」、日本語系は「、」が後ろに付きます。この区切り文字を変えたい場合は、後述の @counter-style を使います。

ul に decimal を指定して番号を出すことも、ol に disc を指定して点にすることもできます。ただし、順番に意味があるなら ol、ないなら ul という HTML の使い分けは、見た目とは別に守っておくと、読み上げソフトなどにも正しく伝わります。

複数の記号を交互に出す symbols() について

list-style-type: symbols(cyclic "◆" "◇") という書き方も仕様にありますが、Chromium 141 では CSS.supports が false を返し、指定は反映されませんでした（初期値の表示のまま）。同じことは @counter-style で書けるので、そちらを使うのが確実です。

一括指定 list-style の書き順

list-style に書く3つの値は、どの順番で書いても構いません。省略した値は初期値に戻ります。 一般には「type → position → image」の順で書かれることが多く、その順にそろえると読みやすくなります。

Chromium 141 で一括指定を解釈させた結果です。

読み取れるルールは次のとおりです。

• 順番は自由です。square inside と inside square は同じ結果になりました。
• 書かなかった値は初期値に戻ります。 list-style: inside だけを書くと type は disc に戻るので、別の場所で list-style-type: square を指定していても上書きされます。一括指定は個別指定より後に書かない、という順序に気を付けてください。
• none は type と image の両方に当てはまる値です。list-style: none は「種類なし・画像なし」になり、none url(a.png) と書くと none は type 側に割り当てられます。
• 同じ種類の値を2つ書くと無効です（square circle）。

画像と種類を両方書いておくと、画像が読み込めなかったときに種類のほうで表示されるため（仕様上の動作で、今回は未実行）、list-style: square url("check.svg"); のように代わりの種類を添えておくと安心です。

list-style-positionで点の位置を決める

outside（初期値）はマーカーが li の箱の外側、inside は箱の内側（文章の先頭）に置かれます。 違いは、文章が2行以上に折り返したときにはっきり出ます。

幅 120px の ul に長い文章を入れ、各行の文字の左端を測りました。

/* 行頭をそろえたい（一般的な箇条書き） */
ul.default { list-style-position: outside; }

/* li に背景色や枠線を付けて、点もその中に収めたい */
ul.boxed { list-style-position: inside; }
ul.boxed li { background: #f4f6f8; padding: 8px 12px; }

list-style-imageで点を画像にする

ul.check {
  list-style-image: url("check.svg");
}
/* グラデーションも画像として指定できる */
ul.grad {
  list-style-image: linear-gradient(tomato, orange);
}

list-style: url(a.png) square inside を指定すると、計算後の list-style-image が url("a.png") になることを確かめました。画像ファイルを用意しての見た目の確認と、グラデーション指定の表示確認は未実行です。

list-style-image には画像の大きさや位置を調整するプロパティがありません。 画像そのものの大きさで表示されるため、次のように使い分けます。

症状別の直し方

まず、次のHTMLで各パターンの数値を測りました。保存してブラウザで開くと同じ一覧が出ます。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>リストの余白と点を調べる</title>
<style>
  body { margin: 0; }
  .a { }
  .b { list-style: none; }
  .c { list-style: none; padding: 0; margin: 0; }
  .d { padding: 0; }
  .e { padding: 0; list-style-position: inside; }
  .f li { display: flex; }
  .g { display: flex; gap: 2em; }
</style>
<ul class="a"><li>項目</li></ul>
<ul class="b"><li>項目</li></ul>
<ul class="c"><li>項目</li></ul>
<ul class="d"><li>項目</li></ul>
<ul class="e"><li>項目</li></ul>
<ul class="f"><li>項目</li></ul>
<ul class="g"><li>項目</li></ul>
<pre id="out"></pre>
<script>
const rows = [...document.querySelectorAll("ul")].map((ul) => {
  const li = ul.querySelector("li");
  const range = document.createRange();
  range.selectNodeContents(li.firstChild);            // 文字そのものの位置
  const s = getComputedStyle(ul);
  return "." + ul.className
    + "  type=" + s.listStyleType
    + "  padding-left=" + s.paddingLeft
    + "  margin-top=" + s.marginTop
    + "  liのdisplay=" + getComputedStyle(li).display
    + "  文字の左端=" + Math.round(range.getBoundingClientRect().left) + "px";
});
document.getElementById("out").textContent = rows.join("\n");
</script>
</html>

Chromium 141 での表示です。

.a  type=disc  padding-left=40px  margin-top=16px  liのdisplay=list-item  文字の左端=40px
.b  type=none  padding-left=40px  margin-top=16px  liのdisplay=list-item  文字の左端=40px
.c  type=none  padding-left=0px  margin-top=0px  liのdisplay=list-item  文字の左端=0px
.d  type=disc  padding-left=0px  margin-top=16px  liのdisplay=list-item  文字の左端=0px
.e  type=disc  padding-left=0px  margin-top=16px  liのdisplay=list-item  文字の左端=22px
.f  type=disc  padding-left=40px  margin-top=16px  liのdisplay=flex  文字の左端=40px
.g  type=disc  padding-left=40px  margin-top=16px  liのdisplay=list-item  文字の左端=40px

この結果をもとに、症状ごとに見ていきます。

点を消したのに左の余白が残る

list-style: none はマーカーを消すだけで、ul の padding-left: 40px は残ります。 上の .b の行で、type が none になっても padding-left は 40px、文字の左端も 40px のままです。

直す前：

ul { list-style: none; }

直した後：

ul {
  list-style: none;
  padding: 0;   /* 左の 40px を消す */
  margin: 0;    /* 上下の 16px も消す（必要な場合） */
}

.c の行のとおり、padding-left が 0px、margin-top が 0px、文字の左端が 0px になりました。上下の余白は残したい場合は margin: 0 を外します。書字方向に左右されない書き方にするなら padding-inline-start: 0; でも同じ場所を指定できます（padding-inline-start: 1.2em で文字の左端が 19px になることを確認）。

点がはみ出す・点が見えなくなる

点を残したまま padding: 0 にすると、マーカーが ul の箱の外（左側）に出ます。 .d の行では、type は disc のまま文字の左端が 0px になっています。マーカーは文字の左に置かれるので、画面の左端より外や、隣の要素の上に重なって見えます。親に overflow: hidden があると、はみ出した部分は切り取られて見えなくなります。

スクリーンショットでも確かめました。ul の左端を 50px の位置に置いたとき、padding: 0 では点が 34px の位置（箱の外）に描かれ、ul に overflow: hidden を足すと箱の外の描画は 0 ピクセルになりました。list-style-position: inside と padding-left: 1.5em では、点は箱の中に収まっています。

リセット用の CSS で全要素の padding を 0 にしている場合に、よく起きる症状です。直し方は3つあります。

折り返しのある文章なら1つ目、li に背景を付けるなら2つ目が向いています。

flexにすると点が消える

li に display: flex を指定すると、li が list-item でなくなるためマーカーが出なくなります。 .f の行で li の display が flex になっています。Chromium 141 では、このときマーカーが1つも出力されませんでした。display: grid、display: block、display: inline-block でも同じ結果です。

一方、ul 側を flex にしても li は list-item のままなので、点は残ります（.g の行）。横並びのメニューで点が残って困る場合は、list-style: none を足します。

li の中身を横並びにしつつ点も残したい場合は、li の中に1つ箱を入れて、その箱を flex にします。

直す前：

<ul>
  <li style="display: flex; gap: 8px;"><span>品名</span><span>3個</span></li>
</ul>

直した後：

<style>
  .row { display: flex; gap: 8px; }
</style>
<ul>
  <li><div class="row"><span>品名</span><span>3個</span></div></li>
</ul>

なお、display: list-item flex という2語の書き方は、Chromium 141 では CSS.supports が false でした。現時点では上の「中に箱を入れる」方法が確実です。

逆に、li 以外の要素に display: list-item を指定するとマーカーが付きます。 <div> に指定して点が出ることを確認しました。

入れ子にしたら点の種類が変わった

前述の初期値の表のとおり、ブラウザは階層ごとに disc → circle → square と種類を変えます。全階層で同じにしたい場合は、子孫セレクタでまとめて指定します。

ul, ul ul, ul ul ul { list-style-type: disc; }

点を消したリストの読み上げ

Chromium 141 では、list-style: none を指定した ul も、アクセシビリティツリー上は list と listitem のままでした。ブラウザと読み上げソフトの組み合わせによっては、点を消したリストがリストとして案内されない場合があると一般に知られています（今回は未実行）。ナビゲーションなどでリストであることを確実に伝えたいときは、<ul role="list"> と明示する方法があります。

マーカーの色・サイズ・文字を変える3つの方法

色やサイズだけなら ::marker、形や位置まで作り込むなら ::before、番号の書式そのものを作るなら @counter-style が向いています。

方法1：::marker で色とサイズを変える

::marker は、li のマーカー部分だけを選ぶ疑似要素です。 いちばん短く書けます。

/* 点の色だけ変える */
li::marker {
  color: tomato;
}

/* 番号を太く・大きく・色付きにする */
ol li::marker {
  color: #1a73e8;
  font-weight: 700;
  font-size: 1.2em;
}

/* マーカーの文字を差し替える */
ul.arrow li::marker {
  content: "▶ ";
  color: tomato;
}

li::marker { color: tomato; } を指定したとき、li 本文の色は rgb(0, 0, 0) のままで、マーカーだけが変わりました。反対に、li に color を指定するとマーカーも同じ色になります（li に color: tomato → マーカーの計算後の色も rgb(255, 99, 71)）。「文章は黒、点だけ色付き」にしたいときは ::marker を使います。content: "▶ " の差し替えも、マーカーが「▶ 」になることを確かめました。

方法2：::before で自由な形を作る

マーカーを消して、li の疑似要素で描き直す方法です。 背景色・角丸・大きさ・位置を自由に決められます。

ul.dot {
  list-style: none;
  padding: 0;
}
ul.dot li {
  position: relative;
  padding-left: 1.4em;       /* 点を置く場所 */
}
ul.dot li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.55em;               /* 1行目の中央あたり */
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: tomato;
}

このコードで、本来のマーカーは出力されず、::before の背景色が rgb(255, 99, 71) になることを確認しました。番号を自分で振る場合は、CSS カウンターを使います。

ol.circle {
  list-style: none;
  padding: 0;
  counter-reset: num;        /* カウンターを 0 に戻す */
}
ol.circle li {
  counter-increment: num;    /* li ごとに 1 足す */
  position: relative;
  padding-left: 2.2em;
  margin-bottom: 0.5em;
}
ol.circle li::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-size: 0.85em;
  text-align: center;
  line-height: 1.6em;
}

丸で囲んだ番号の例（ol.circle）は書き方の紹介で、表示確認は未実行です。

方法3：@counter-style で書式を定義する

@counter-style は、list-style-type に指定できる「番号・記号の書式」を自分で作る仕組みです。 MDN では、2023年9月から主要ブラウザで広く使える機能（Baseline Widely available）と案内されています。

/* 丸数字 ①②③④⑤ */
@counter-style maru {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤";
  suffix: " ";
}

/* すべてチェックマーク */
@counter-style check {
  system: cyclic;
  symbols: "✔";
  suffix: " ";
}

/* (1) (2) (3) の形 */
@counter-style kakko {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

ol.maru  { list-style: maru; }
ul.check { list-style: check; }
ol.kakko { list-style: kakko; }

/* 色は ::marker と組み合わせる */
ul.check li::marker { color: green; }

Chromium 141 でのマーカーの出力です。

check と ::marker { color: green; } を組み合わせると、マーカーの計算後の色が rgb(0, 128, 0) になりました。

system: fixed は、用意した記号を使い切ると既定の書式に切り替わります。 上の maru は記号が5つなので、7項目のリストでは「① ② ③ ④ ⑤ 6 7」と表示されました。項目数が増える可能性があるなら、記号を多めに用意しておきます。

表のうち numeric・alphabetic・symbolic・additive は MDN の説明に基づくもので、今回の実行対象は cyclic・fixed・extends の3つです。

::markerで使えるプロパティの制限

::marker に指定できるプロパティは限られています。 背景や余白を書いても反映されないのは、不具合ではなく仕様です。MDN の ::marker のページに載っている「使えるプロパティ」は次のとおりです。

Chromium 141 で、::marker に各プロパティを指定して計算後の値が変わるかを調べた結果です。

MDN では ::marker 全体が「Baseline ではない（一部の主要ブラウザで動作しない部分がある）」と案内されています。色とフォントという基本の用途から使い、背景・余白・位置の調整が必要になったら ::before に切り替える、という判断が分かりやすいです。

点と文字の間隔を調整したいとき

::marker に margin や padding は効かないため、間隔は次の方法で調整します。

この表の4つは書き方の紹介で、間隔の測定は未実行です。

番号付きリスト（ol）で役立つ属性

番号の始まりや向きは、CSS ではなく HTML の属性で指定します。

<ol start="11">
  <li>11番から始まる</li>
  <li>12番</li>
</ol>

<ol reversed>
  <li>3</li>
  <li>2</li>
  <li>1</li>
</ol>

<ol>
  <li>1番</li>
  <li value="5">ここだけ5番にする</li>
  <li>続きは6番</li>
</ol>

Chromium 141 でのマーカーの出力は、順に「11. 12.」「3. 2. 1.」「1. 5. 6.」でした。

コピペ用：よく使うリストのスタイル

/* 1. リセット：点も余白もなくす（メニューなど） */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2. 横並びメニュー */
.list-inline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5em;
}

/* 3. 点の色だけ変える */
.list-color li::marker {
  color: tomato;
}

/* 4. チェックマークのリスト */
.list-check {
  list-style-type: "✓ ";
  padding-left: 1.5em;
}
.list-check li::marker {
  color: green;
  font-weight: 700;
}

/* 5. 余白を詰めつつ点を残す */
.list-compact {
  margin: 0;
  padding-left: 1.5em;
}

.list-reset（none＋padding 0＋margin 0）、.list-compact（padding-left: 1.5em で文字の左端 24px）、文字列マーカー "✓" と ::marker の色指定は、それぞれ前述の測定で動作を確かめた書き方です。5つを1つのページにまとめた表示確認は未実行です。

よくある質問

Q. list-style: none と list-style-type: none はどちらを使えばよいですか？ A. 点を消す目的ならどちらでも同じ見た目になります。list-style: none は種類と画像の両方をなしにし、位置は初期値に戻します。list-style-type: none は種類だけを変えます。画像のマーカーを別の場所で指定している場合は、一括指定の list-style: none のほうが確実に消せます。

Q. ::marker に background や margin を書いても効かないのはなぜですか？ A. ::marker で使えるプロパティが、色・フォント・content などに限られているためです。Chromium 141 でも background-color、margin、padding、width は反映されませんでした。背景付きの丸や位置の調整が必要なときは、list-style: none にして li::before で作ります。

Q. li を flex にしても点を残す方法はありますか？ A. li の中に div などを1つ入れ、その要素を flex にします。li 自体が display: list-item のままなら点は残ります。display: list-item flex という書き方は Chromium 141 では有効な値として扱われませんでした。

Q. 点と文章の行頭をそろえるにはどうすればよいですか？ A. list-style-position: outside（初期値）のままにし、ul の padding-left で点の場所を確保します。inside にすると2行目以降が点の下に回り込みます。::before で点を作る場合は、li に padding-left を付けて点を position: absolute で置くと行頭がそろいます。

まとめ

• list-style は type・position・image の一括指定。順番は自由で、書かなかった値は初期値に戻る
• 点を消すだけなら list-style: none、余白も消すなら padding: 0; margin: 0 を足す（左の空きは ul の padding-left: 40px）
• 点を残して padding を 0 にすると点がはみ出す。 padding-left: 1.5em か list-style-position: inside で収める
• li を flex・grid・block にすると点は出なくなる。 ul 側を flex にするか、li の中に箱を入れて flex にする
• 色とサイズは li::marker、形や位置は li::before、番号の書式は @counter-style と使い分ける
• ::marker で使えるのは color・font 系・content など。背景・余白・幅は反映されない
• 番号の開始や逆順は ol の start・reversed、li の value で指定する

株式会社RJCでは、CSSのリスト装飾やマーカーの扱い方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。