リストのCSS10選！箇条書きにも最適なおしゃれなアイデア！（HTML+CSS）

October 10, 2025

今回のアイデアテーマはリスト。文章を見やすくするために重宝するCSSです。
初心者でも安心のコピペで使えるCSSをご用意しました！

#01ネオングロウ・ドット（発光バレット）見本

ポイントA
ポイントB
ポイントC

ネオンの発光で目立つリスト！
近未来的サイトにぴったりです！

HTML

<ul class="list-neon-dot">
 <li>ポイントA</li>
 <li>ポイントB</li>
 <li>ポイントC</li>
</ul>

CSS

.list-neon-dot { list-style: none; padding: 0; margin: 0; }
.list-neon-dot li {
  --c1: #00e5ff; --c2: #7c3aed;
  position: relative; padding-left: 1.6em; line-height: 1.9;
}
.list-neon-dot li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: .82em; height: .82em; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffffcc, #ffffff00 45%),
    radial-gradient(circle at 50% 50%, var(--c1), var(--c2) 65%);
  box-shadow: 0 0 10px var(--c1), 0 0 20px var(--c2);
  transition: transform .2s ease;
}
.list-neon-dot li:hover::before { transform: scale(1.2); }

#02グラデありカウンター見本

ポイントA
ポイントB
ポイントC

ただの数字じゃつまらない
そんなときにはちょっとした装飾を！

HTML

<ol class="list-pill-count">
 <li>ポイントA</li>
 <li>ポイントB</li>
 <li>ポイントC</li>
</ol>

CSS

.list-pill-count { counter-reset: no; list-style: none; padding: 0; margin: 0; }
.list-pill-count li {
  --c1: #ff7a18; --c2: #af002d;
  counter-increment: no; position: relative; padding-left: 3.2em; line-height: 1.9;
}
.list-pill-count li::before {
  content: counter(no); position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); display: inline-grid; place-items: center;
  min-width: 2.4em; height: 2em; padding: 0 .6em; border-radius: 999px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 .4em 1.2em rgba(0,0,0,.15);
}

#03斜めリボン・バレット見本

ポイントA
ポイントB
ポイントC

シンプルさの中にちょっとしたアクセント！

HTML

<ol class="list-pill-count">
 <li>ポイントA</li>
 <li>ポイントB</li>
 <li>ポイントC</li>
</ol>

CSS

.list-ribbon { list-style: none; padding: 0; margin: 0; }
.list-ribbon li {
  --c1:#06b6d4; --c2:#3b82f6;
  position: relative; padding-left: 1.9em; line-height: 1.9;
}
.list-ribbon li::before {
  content:""; position:absolute; left:0; top:.48em;
  width:1.24em; height:.9em; transform: skewX(-20deg);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border-radius: .28em; box-shadow: 0 .18em .6em rgba(0,0,0,.18);
}

#04タイムライン（縦軸×ノード）見本

ステップ1の説明
ステップ2の説明
ステップ3の説明

2重の円でアクセント。
ステップ解説におすすめです

HTML

<ul class="list-timeline">
 <li>ステップ1</li>
 <li>ステップ2</li>
 <li>ステップ3</li>
</ul>

CSS

.list-timeline { list-style: none; padding: 0 0 0 1.6em; margin: 0; position: relative; }
.list-timeline::before {
  content:""; position:absolute; left:.5em; top:0; bottom:0; width:2px;
  background: linear-gradient(#cbd5e1, #94a3b8);
}
.list-timeline li {
  --c1:#f59e0b; --c2:#ef4444;
  position: relative; padding: .35em 0 .35em .6em; line-height: 1.9;
}
.list-timeline li::before {
  content:""; position:absolute; left: -0.5em; top: 0.85em;
  width:.78em; height:.78em; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, #fff, #ffffff00 60%),
    linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 .24em #fff, 0 .08em .4em rgba(0,0,0,.2);
}

#05背面“帯ハイライト”リスト（ホバーで伸びる）見本

読み飛ばされにくい視覚ノイズの演出
ホバーで帯がにゅっと伸びる
本文リンクの代わりにも

スタイリッシュなデザインと遊びのある下線。
本文にもリンクにもおすすめです。

HTML

<ul class="list-band">
 <li>読み飛ばされにくい視覚ノイズの演出</li>
 <li>ホバーで帯がにゅっと伸びる</li>
 <li>本文リンクの代わりにも</li>
</ul>

CSS

.list-band { list-style: none; padding: 0; margin: 0; }
.list-band li {
  --c1:#f0f9ff; --c2:#ecfeff; --h:#a5f3fc;
  position: relative; padding: .2em .2em; line-height: 2;
  background:
    linear-gradient(90deg, var(--c1), var(--c2)) 0 100% / 0% .52em no-repeat;
  transition: background-size .45s ease;
}
.list-band li:hover {
  background-size: 100% .52em;
  box-shadow: 0 .12em .5em rgba(0,0,0,.05) inset;
}

#06スター・マーカー見本

軽量・セマンティック維持
本文でも使いやすい
★など別記号に差し替え可

シンプルで使いやすいリスト見出し。
記号も自由に変更できます。

HTML

<ul class="list-star-marker">
 <li>軽量・セマンティック維持</li>
 <li>本文でも使いやすい</li>
 <li>★など別記号に差し替え可</li>
</ul>

CSS

.list-star-marker { padding-left: 1.2em; margin: 0; }
.list-star-marker li::marker { content: "✦ "; font-size: 1.1em; color: #f59e0b; }
.list-star-marker li { line-height: 1.9; }

#07ノッチ付き“タグ”バレット見本

NEW感・セール感の演出に
カテゴリや属性の疑似ラベル風
短い文の箇条書きに映える

視覚誘導効果でリストの内容をより目立たせます。

HTML

<ul class="list-notch-tag">
 <li>NEW感・セール感の演出に</li>
 <li>カテゴリや属性の疑似ラベル風</li>
 <li>短い文の箇条書きに映える</li>
</ul>

CSS

.list-notch-tag { list-style: none; padding: 0; margin: 0; }
.list-notch-tag li {
  --c1:#fb7185; --c2:#f43f5e;
  position: relative; padding-left: 2.1em; line-height: 1.9;
}
.list-notch-tag li::before {
  content:""; position:absolute; left:0; top:.48em;
  width:1.6em; height:1.05em;
  clip-path: polygon(0 0, calc(100% - .38em) 0, 100% 50%, calc(100% - .38em) 100%, 0 100%);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 .16em .5em rgba(0,0,0,.16);
  border-radius: .2em;
}

#08オービット・ドット見本

科学・テック系の相性◎
小さくても存在感が出る
色だけ差し替えて量産可

ポップな印象で説明力アップ！

HTML

<ul class="list-orbit">
 <li>科学・テック系の相性◎</li>
 <li>小さくても存在感が出る</li>
 <li>色だけ差し替えて量産可</li>
</ul>

CSS

.list-orbit { list-style: none; padding: 0; margin: 0; }
.list-orbit li {
  --core:#10b981;
  position: relative; padding-left: 1.6em; line-height: 1.9;
}
.list-orbit li::before {
  content:""; position:absolute; left:0; top:.58em;
  width:.84em; height:.84em; border-radius:50%;
  background: radial-gradient(circle .33em at 50% 50%, var(--core) 99%, #0000 100%);
  box-shadow: 0 0 0 .16em color-mix(in oklab, var(--core), #000 20%);
}

#09“進捗バー”付きリスト見本

デザイン制作
ライティング
撮影

HTMLのパーセンテージを変えると、バーの長さも変わります。

HTML

<ul class="list-progress">
 <li style="--p:80%">デザイン制作</li>
 <li style="--p:45%">ライティング</li>
 <li style="--p:10%">撮影</li>
</ul>

CSS

.list-progress { list-style: none; padding: 0; margin: 0; }
.list-progress li {
  --c1:#22d3ee; --c2:#3b82f6; --p:0%;
  position: relative; padding: .3em 0; line-height: 2;
  background:
    linear-gradient(90deg, var(--c1), var(--c2)) 0 100% / var(--p) .36em no-repeat;
}

#10スパーク・バースト見本

アイキャッチが必要な一発芸
見出し直下の短文に◎
カラーを変えるだけで表情激変

カラーに動きをつけてリストに遊び心をプラス！

HTML

<ul class="list-spark">
 <li>アイキャッチが必要な一発芸</li>
 <li>見出し直下の短文に◎</li>
 <li>カラーを変えるだけで表情激変</li>
</ul>

CSS

.list-spark { list-style: none; padding: 0; margin: 0; }
.list-spark li {
  --c1:#e879f9; --c2:#22d3ee;
  position: relative; padding-left: 2.2em; line-height: 1.9;
}
.list-spark li::before {
  content:""; position:absolute; left:.2em; top:.35em;
  width:1.2em; height:1.2em;
  background: conic-gradient(from 0turn, var(--c1), var(--c2), var(--c1));
  -webkit-mask: radial-gradient(circle .34em, #000 98%, #0000 100%),
                 conic-gradient(#000 0 0);
  mask: radial-gradient(circle .34em, #000 98%, #0000 100%),
        conic-gradient(#000 0 0);
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  animation: spark-spin 2.2s linear infinite paused;
}
.list-spark li:hover::before { animation-play-state: running; }
@keyframes spark-spin { to { transform: rotate(1turn); } }

いかがでしたでしょうか？

今回はリストのCSSのアイデアを考えてみました！

ちょっとしたアクセントで、コンテンツの見栄えが変わるのでぜひ試してみてください！