デザインについての学習メモブログ

NAOQ Design Note

Webサイト > CSSリストをオシャレにデザインする実践テクニック

CSSリストをオシャレにデザインする実践テクニック

記事内に広告が含まれています。

CSSリストをオシャレにデザインする実践テクニック

Amazon ＞ books セール＆キャンペーンへ

楽天市場 ＞ 電子書籍（楽天kube）セールへ

デフォルトのリストスタイルから脱却し、モダンで魅力的なリストデザインを実現する方法を紹介します。

コピペですぐに使える実践的なコード例とともに解説します。

CSSでリストをオシャレにデザインするための基礎

CSSでリストをオシャレにデザインしても、周りの情報とアンマッチなスタイルは、逆に情報が伝わりにくくなります。用途に応じたデザインと控えめな動きがポイントになります。

リスト要素の基礎をこれから学ぶ人は先に以下の記事に目を通すと良いです。

CSS リスト(ul,ol,li)のスタイリングの基礎: 現場で使われる基本のテクニック

基本：デフォルトスタイルをリセット

まず、ブラウザのデフォルトスタイルをリセットすることから始めます。

CSS
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

これで、自由にデザインできる白紙の状態になりました。

リストのデザインを選ぶポイント

適切なリストデザインを選ぶ際の指針：

用途別おすすめ

  • ステップバイステップガイド: タイムライン風、グラデーション番号付き
  • 機能リスト: チェックリスト、絵文字アイコン
  • ナビゲーション: カード型、ストライプパターン
  • モダンなランディングページ: グラスモーフィズム、3Dエフェクト

パフォーマンスの考慮

  • アニメーションは控えめに（多用するとページが重くなる）
  • transformとopacityを使ったアニメーションはパフォーマンスが良い
  • backdrop-filterは一部の古いブラウザでサポートされていない

CSSでリストをオシャレにデザイン 10パターン

CSSでリストをオシャレにデザインした10パターンを紹介します。

一部のプロパティを変えるだけであなたの好みにカスタマイズできます。

1. グラデーション番号付きリスト

番号に美しいグラデーションを適用したモダンなデザインです。

CSS
.gradient-list {
  counter-reset: gradient-counter;
  padding: 0;
}

.gradient-list li {
  counter-increment: gradient-counter;
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.gradient-list li::before {
  content: counter(gradient-counter);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

Result

See the Pen リスト：グラデーション番号付き by naoq (@naoq) on CodePen.

2. アイコン付きチェックリスト

完了項目を視覚的に示すチェックリストデザインです。

CSS
.checklist {
  padding: 0;
}

.checklist li {
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
  margin-bottom: 0.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  width: 24px;
  height: 24px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.checklist li:hover {
  background: #e9ecef;
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Result

See the Pen アイコン付きチェックリスト by naoq (@naoq) on CodePen.

3. ネオンアクセントリスト

左側にネオン風のアクセントラインを配置したデザインです。

CSS
.neon-list {
  padding: 0;
}

.neon-list li {
  padding: 1.2rem 1.5rem;
  margin-bottom: 1rem;
  background: #1a1a2e;
  border-left: 4px solid #00f2fe;
  border-radius: 0 8px 8px 0;
  color: #eee;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
  transition: all 0.3s ease;
}

.neon-list li:hover {
  border-left-width: 8px;
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.5);
  transform: translateX(5px);
}

.neon-list li::before {
  content: "▸";
  color: #00f2fe;
  font-size: 1.5rem;
  position: absolute;
  left: -12px;
  background: #1a1a2e;
}

Result

See the Pen リスト：ネオンアクセント by naoq (@naoq) on CodePen.

4. カード型リスト

各アイテムをカードとして表示する洗練されたデザインです。

CSS
.card-list {
  padding: 0;
  display: grid;
  gap: 1rem;
}

.card-list li {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card-list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.card-list li:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  border-color: #3b82f6;
}

.card-list li:hover::before {
  transform: scaleY(1);
}

Result

See the Pen リスト：カード型 by naoq (@naoq) on CodePen.

5. タイムライン風リスト

時系列のイベントや手順を表現するのに最適なデザインです。

CSS
.timeline-list {
  padding: 0;
  position: relative;
}

.timeline-list::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
}

.timeline-list li {
  padding: 1rem 1rem 1rem 4rem;
  position: relative;
  margin-bottom: 2rem;
}

.timeline-list li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 1rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 3px solid #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  z-index: 1;
}

.timeline-list li:hover::before {
  background: #3b82f6;
  transform: scale(1.2);
  transition: all 0.3s ease;
}

Result

See the Pen リスト：タイムライン風 by naoq (@naoq) on CodePen.

6. グラスモーフィズムリスト

流行のグラスモーフィズムデザインを取り入れたリストです。

CSS
.glass-list {
  padding: 0;
}

.glass-list li {
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-list li:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.glass-list li::before {
  content: "◆";
  color: rgba(255, 255, 255, 0.8);
  margin-right: 1rem;
  font-size: 1.2rem;
}

Result

See the Pen リスト：グラスモーフィズム by naoq (@naoq) on CodePen.

7. 絵文字アイコンリスト

絵文字を効果的に使用した親しみやすいデザインです。

CSS
.emoji-list {
  padding: 0;
}

.emoji-list li {
  padding: 1rem 1rem 1rem 3.5rem;
  margin-bottom: 0.8rem;
  position: relative;
  background: linear-gradient(135deg, #fdfcfb 0%, #f6f6f6 100%);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.emoji-list li::before {
  position: absolute;
  left: 1rem;
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* 各アイテムに異なる絵文字を設定 */
.emoji-list li:nth-child(1)::before { content: "👉"; }
.emoji-list li:nth-child(2)::before { content: "💡"; }
.emoji-list li:nth-child(3)::before { content: "⭐"; }
.emoji-list li:nth-child(4)::before { content: "🎯"; }
.emoji-list li:nth-child(5)::before { content: "✨"; }

.emoji-list li:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Result

See the Pen リスト絵文字アイコン by naoq (@naoq) on CodePen.

8. ストライプパターンリスト

交互の背景色で読みやすさを向上させたデザインです。

CSS
.stripe-list {
  padding: 0;
}

.stripe-list li {
  padding: 1.2rem 1.5rem;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.stripe-list li:nth-child(even) {
  background: #f9fafb;
}

.stripe-list li:nth-child(odd) {
  background: white;
}

.stripe-list li:hover {
  background: #eff6ff;
  padding-left: 2rem;
}

.stripe-list li::before {
  content: "▸";
  color: #3b82f6;
  margin-right: 1rem;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stripe-list li:hover::before {
  opacity: 1;
}

Result

See the Pen リスト：ストライプパターン by naoq (@naoq) on CodePen.

9. 3D エフェクトリスト

奥行きを感じさせる3D効果を持つリストです。

CSS
.effect-3d-list {
  padding: 0;
  perspective: 1000px;
}

.effect-3d-list li {
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 12px;
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.1),
    -5px -5px 10px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  transform-style: preserve-3d;
}

.effect-3d-list li:hover {
  transform: translateZ(20px) rotateX(5deg);
  box-shadow: 
    8px 8px 20px rgba(0, 0, 0, 0.15),
    -8px -8px 20px rgba(255, 255, 255, 0.9);
}

.effect-3d-list li::before {
  content: "●";
  color: #3b82f6;
  margin-right: 1rem;
  font-size: 1.2rem;
}

Result

See the Pen リスト: 3D エフェクト by naoq (@naoq) on CodePen.

10. アニメーション付きリスト

読み込み時にアニメーションで表示されるリストです。

CSS
.animated-list {
  padding: 0;
}

.animated-list li {
  padding: 1rem 1rem 1rem 3rem;
  margin-bottom: 1rem;
  background: white;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  opacity: 0;
  animation: slideIn 0.5s ease forwards;
}

/* 各アイテムに遅延を追加 */
.animated-list li:nth-child(1) { animation-delay: 0.1s; }
.animated-list li:nth-child(2) { animation-delay: 0.2s; }
.animated-list li:nth-child(3) { animation-delay: 0.3s; }
.animated-list li:nth-child(4) { animation-delay: 0.4s; }
.animated-list li:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated-list li::before {
  content: "→";
  position: absolute;
  left: 1rem;
  color: #3b82f6;
  font-weight: bold;
}

Result

See the Pen リスト:アニメーション付き by naoq (@naoq) on CodePen.

まとめ：CSSリストをオシャレにデザインする実践テクニック

CSSを使えば、シンプルなリストも魅力的なデザイン要素に変えることができます。

これらのテクニックを組み合わせて、プロジェクトに最適なスタイルを作り上げてください。

重要なポイント:

  • デフォルトスタイルのリセットから始める
  • ::before疑似要素で柔軟なカスタマイズ
  • トランジションで滑らかなインタラクション
  • ユーザー体験を損なわない程度のアニメーション
  • デザインの一貫性を保つ

これらのデザインは全てコピー&ペーストですぐに使えます。

ぜひ自分のプロジェクトに合わせてカスタマイズしてみてください！

, ,

最近の投稿

カテゴリー

HTML
CSS
JS
画像
COLOR
文字
UI
設計
写真
心理学
WordPress
雑記
AIアイコン
AI

お役立ちサービス

Figma
WordPress
ChatGPT
GitHub
codepen
pintarest
Docker hub
PayPal
PayPal