リストのマーカーを画像で用意すると、デザインの自由度は上がる一方で、画像の管理コストや読み込み負荷が増え、ダークモード対応や色変更にも手間がかかります。実務では「画像を使わずにCSSだけでマーカーを作りたい」という要件がよく出ます。CSSだけであれば、色やサイズを一括で制御でき、解像度にも依存せず、保守性も高くなります。本記事では、list-style-image を使わずに、CSSだけでリストマーカーを作る代表的な実装パターンと注意点を解説します。
デフォルトのマーカーを消して自前で描画する
CSSだけでマーカーを作る基本は、ブラウザの標準マーカーを無効化し、li の擬似要素でマーカーを描画することです。まずは list-style を none にして、li 側に余白と基準位置を用意します。
.list {
list-style: none;
padding-left: 0;
margin: 0;
}
.list li {
position: relative;
padding-left: 1.4em;
}
この状態にすると標準の黒丸は消え、擬似要素で好きなマーカーを自由に置ける前提が整います。
丸（ドット）マーカーをCSSで作る
最も汎用的なのは、擬似要素に幅と高さを与え、border-radius で丸を作る方法です。色は background で制御できるため、テーマカラーに合わせて簡単に変更できます。
.list-dot li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
transform: translateY(-50%);
}
currentColor を使うと、テキスト色と連動してマーカー色も自動で揃います。ダークモードや色テーマ切り替えにも強くなります。
チェックマークをCSSだけで作る
チェックマークは画像を使わなくても、border を使った線の組み合わせで表現できます。擬似要素を斜めに回転させ、2辺だけを表示することで、チェックの形になります。
.list-check li::before {
content: "";
position: absolute;
left: 0.1em;
top: 0.6em;
width: 0.55em;
height: 0.35em;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-50%) rotate(-45deg);
}
アイコンフォントやSVGを使わずに表現できるため、依存物を増やしたくないサイトに向いています。
矢印（>）風のマーカーをCSSで作る
矢印は三角形を作るテクニックで実装できます。border の一方向だけに色をつける方法は軽量で、UIの導線表現としても使いやすいです。
.list-arrow li::before {
content: "";
position: absolute;
left: 0.1em;
top: 0.6em;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
border-color: transparent transparent transparent currentColor;
transform: translateY(-50%);
}
文字サイズに応じて見た目がズレやすい場合は、top の値を em 基準で調整し、transform でセンタリングする設計が安定します。
数字付き（疑似的なol風）マーカーをCSSで作る
順序付きリストのように番号を表示したい場合は、CSSカウンターを使うとHTMLを変えずに番号を生成できます。デザインも自由に作れるため、ステップ表示などに向いています。
.list-step {
list-style: none;
counter-reset: step;
padding-left: 0;
}
.list-step li {
counter-increment: step;
position: relative;
padding-left: 2.2em;
}
.list-step li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0.6em;
width: 1.6em;
height: 1.6em;
border-radius: 50%;
border: 2px solid currentColor;
text-align: center;
line-height: 1.6em;
transform: translateY(-50%);
}
この方法なら、数字の色、枠線、丸のサイズなどをCSSだけで調整でき、画像管理が不要になります。
複数行の折り返しに強い配置にする
擬似要素でマーカーを作ると、複数行に折り返したときの見え方が重要になります。padding-left を確保しておけば折り返し行がマーカーの下に潜り込まず、文章が揃って読みやすくなります。position: absolute を使う場合は、li の padding-left とマーカーの幅が矛盾しないように設計することがポイントです。
marker疑似要素との使い分け
近年は ::marker を使ってマーカーの色やフォントを調整できますが、形状を自由に作る用途には向きません。丸やチェック、矢印などの図形をCSSだけで描画したい場合は、擬似要素（::before）で作るほうが再現性が高く、デザイン自由度も確保できます。
まとめ
リストマーカーは画像を使わなくても、擬似要素とCSSの基本テクニックだけで十分にデザインできます。丸、チェック、矢印、番号付きなど、用途ごとにパターンを用意しておくと、サイト全体のUI表現を統一しやすくなり、保守性も向上します。色やサイズを currentColor と em 基準で設計すれば、テーマ変更やレスポンシブにも強いマーカー設計が可能になります。
