【コピペOK】記事が劇的に見やすくなる！おしゃれなCSSリスト（箇条書き）デザイン20選

ブログの文章をスッキリ見せ、読者の理解を深めるために欠かせない「リスト（箇条書き）」。しかし、標準の箇条書きのままだと少し寂しい印象になりがちです。

今回は、コピペだけで今日からすぐに使える、おしゃれで読みやすいCSSリスト（箇条書き）デザイン20選をご紹介します！HTMLとCSSを組み合わせて、お使いのテーマに合わせてカスタマイズしてみてください。

おしゃれなCSSリスト（箇条書き）20選 一覧

1. シンプルチェックリスト

HTML

<ul class="list-check">
  <li>チェック項目その1</li>
  <li>チェック項目その2</li>
  <li>チェック項目その3</li>
</ul>

CSS

.list-check {
  list-style: none;
}
.list-check li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

2. 丸ポインタリスト

HTML

<ul class="list-dot">
  <li>丸ポインタ項目その1</li>
  <li>丸ポインタ項目その2</li>
</ul>

CSS

.list-dot {
  list-style: none;
}
.list-dot li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-dot li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #007bff;
  border-radius: 50%;
}

3. カラフル矢印リスト

HTML

<ul class="list-arrow">
  <li>矢印項目その1</li>
  <li>矢印項目その2</li>
</ul>

CSS

.list-arrow {
  list-style: none;
}
.list-arrow li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-arrow li::before {
  content: "➤";
  position: absolute;
  left: 0;
  color: #ff9900;
}

4. スクエア（四角）ポインタ

HTML

<ul class="list-square">
  <li>四角ポインタ項目その1</li>
  <li>四角ポインタ項目その2</li>
</ul>

CSS

.list-square {
  list-style: none;
}
.list-square li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-square li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #333;
}

5. 数字サークルリスト

HTML

<ol class="list-num-circle">
  <li>まずは登録する</li>
  <li>詳細を入力する</li>
</ol>

CSS

.list-num-circle {
  list-style: none;
  counter-reset: num-counter;
}
.list-num-circle li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.8em;
  color: #333;
}
.list-num-circle li::before {
  counter-increment: num-counter;
  content: counter(num-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

6. ステップ風（STEP1〜）

HTML

<ol class="list-step">
  <li>必要書類を準備します。</li>
  <li>フォームから申し込みます。</li>
</ol>

CSS

.list-step {
  list-style: none;
  counter-reset: step-counter;
}
.list-step li {
  position: relative;
  padding-left: 4.5em;
  margin-bottom: 0.8em;
  color: #333;
  min-height: 24px;
}
.list-step li::before {
  counter-increment: step-counter;
  content: "STEP " counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ff5252;
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}

7. 下線付きリスト

HTML

<ul class="list-border">
  <li>項目A</li>
  <li>項目B</li>
  <li>項目C</li>
</ul>

CSS

.list-border {
  list-style: none;
}
.list-border li {
  padding: 0.8em 0.5em;
  border-bottom: 1px dashed #ccc;
  color: #333;
}
.list-border li:last-child {
  border-bottom: none;
}

8. 交互背景（ゼブラ）リスト

HTML

<ul class="list-zebra">
  <li>1つ目の項目</li>
  <li>2つ目の項目</li>
</ul>

CSS

.list-zebra {
  list-style: none;
}
.list-zebra li {
  padding: 0.8em 1em;
  color: #333;
  margin-bottom: 2px;
}
.list-zebra li:nth-child(odd) {
  background-color: #f7f7f7;
}
.list-zebra li:nth-child(even) {
  background-color: #eef7ff;
}

9. アイコン付き星リスト

HTML

<ul class="list-star">
  <li>お気に入りポイントその1</li>
  <li>お気に入りポイントその2</li>
</ul>

CSS

.list-star {
  list-style: none;
}
.list-star li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-star li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: #ffcc00;
}

10. 付箋風リスト

HTML

<ul class="list-sticky">
  <li>やることメモその1</li>
  <li>やることメモその2</li>
</ul>

CSS

.list-sticky {
  list-style: none;
}
.list-sticky li {
  position: relative;
  padding: 0.8em 1em 0.8em 1.5em;
  background-color: #fffacd;
  margin-bottom: 0.5em;
  border-left: 5px solid #ffdb58;
  color: #333;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
}

11. 吹き出し風リスト

HTML

<ul class="list-balloon">
  <li>Aさんのコメント</li>
  <li>Bさんのコメント</li>
</ul>

CSS

.list-balloon {
  list-style: none;
}
.list-balloon li {
  position: relative;
  padding: 0.8em 1em;
  background-color: #f0f4f8;
  border-radius: 5px;
  margin-bottom: 0.8em;
  color: #333;
}
.list-balloon li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 8px 6px 0;
  border-style: solid;
  border-color: transparent #f0f4f8 transparent transparent;
}

12. ボックス付き番号リスト

HTML

<ol class="list-num-box">
  <li>最初のステップ</li>
  <li>次のステップ</li>
</ol>

CSS

.list-num-box {
  list-style: none;
  counter-reset: box-counter;
}
.list-num-box li {
  position: relative;
  padding: 0.8em 1em 0.8em 3em;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 0.5em;
  color: #333;
}
.list-num-box li::before {
  counter-increment: box-counter;
  content: counter(box-counter);
  position: absolute;
  left: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #333;
  color: #fff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

13. 英語サークルリスト

HTML

<ol class="list-alpha-circle">
  <li>項目Aです</li>
  <li>項目Bです</li>
</ol>

CSS

.list-alpha-circle {
  list-style: none;
  counter-reset: alpha-counter;
}
.list-alpha-circle li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.8em;
  color: #333;
}
.list-alpha-circle li::before {
  counter-increment: alpha-counter;
  content: counter(alpha-counter, upper-alpha);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #28a745;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
}

14. キラキラ光風ポインタ

HTML

<ul class="list-sparkle">
  <li>特別なポイントその1</li>
  <li>特別なポイントその2</li>
</ul>

CSS

.list-sparkle {
  list-style: none;
}
.list-sparkle li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-sparkle li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #17a2b8;
  font-weight: bold;
}

15. グラデーション丸番号リスト

HTML

<ol class="list-num-grad">
  <li>グラデーション項目その1</li>
  <li>グラデーション項目その2</li>
</ol>

CSS

.list-num-grad {
  list-style: none;
  counter-reset: grad-counter;
}
.list-num-grad li {
  position: relative;
  padding-left: 2.2em;
  margin-bottom: 0.8em;
  color: #333;
}
.list-num-grad li::before {
  counter-increment: grad-counter;
  content: counter(grad-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: linear-gradient(135deg, #ff416c, #ff4b2b);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(255, 65, 108, 0.3);
}

16. 鍵カッコリスト

HTML

<ul class="list-bracket">
  <li>言葉のピックアップ</li>
  <li>和風や書籍の引用風</li>
</ul>

CSS

.list-bracket {
  list-style: none;
}
.list-bracket li {
  position: relative;
  padding: 0.3em 0.5em 0.3em 1.5em;
  color: #333;
  margin-bottom: 0.5em;
}
.list-bracket li::before {
  content: "「";
  position: absolute;
  left: 0.5em;
  color: #007bff;
  font-weight: bold;
}
.list-bracket li::after {
  content: "」";
  color: #007bff;
  font-weight: bold;
}

17. ドットアンダーラインリスト

HTML

<ul class="list-dotted-line">
  <li>ドット境界線その1</li>
  <li>ドット境界線その2</li>
</ul>

CSS

.list-dotted-line {
  list-style: none;
}
.list-dotted-line li {
  padding: 0.6em 0.5em;
  border-bottom: 2px dotted #aaa;
  color: #333;
}
.list-dotted-line li:last-child {
  border-bottom: none;
}

18. 二重丸ポインターリスト

HTML

<ul class="list-double-circle">
  <li>重要事項その1</li>
  <li>重要事項その2</li>
</ul>

CSS

.list-double-circle {
  list-style: none;
}
.list-double-circle li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}
.list-double-circle li::before {
  content: "◎";
  position: absolute;
  left: 0;
  color: #fd7e14;
  font-weight: bold;
}

19. 手書きチェックマーク風

HTML

<ul class="list-handdrawn-check">
  <li>手書きチェック項目その1</li>
  <li>手書きチェック項目その2</li>
</ul>

CSS

.list-handdrawn-check {
  list-style: none;
}
.list-handdrawn-check li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
  font-weight: bold;
}
.list-handdrawn-check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #ff9900;
  font-size: 1.1rem;
}

20. 帯風（全背景ベタ塗り・左ボーダー）

HTML

<ul class="list-strip">
  <li>背景ありの帯状リスト1</li>
  <li>背景ありの帯状リスト2</li>
</ul>

CSS

.list-strip {
  list-style: none;
}
.list-strip li {
  padding: 0.8em 1.2em;
  background-color: #f8f9fa;
  border-left: 4px solid #17a2b8;
  margin-bottom: 0.5em;
  color: #333;
  border-radius: 0 4px 4px 0;
}