ul・liタグでカード型数字リストデザインを作る方法

このリストは、HTMLの<ul>（順不同リスト）と<li>（リスト項目）タグを使って、カード風に表現したサンプルです。
各項目をリスト化することで、情報を整理して読みやすくし、CSSでデザインを加えることで視覚的にもわかりやすい構成にしています。

1 実装のポイント

以下のHTMLとCSSを使えば、「柴犬を飼うときに注意したい５つのポイント」をカード風デザインで美しく表示できます。
各項目の番号は自動で丸いアイコンとして表示され、マウスホバーで浮き上がるアニメーションも付いています。

  <ul class="consult-points">
    <li><span>1</span> 適度な運動量が必要です。散歩は朝夕２回を目安に行いましょう。</li>
    <li><span>2</span> 飼い主に忠実ですが、警戒心が強い一面も。子どもや他の犬との接し方に注意。</li>
    <li><span>3</span> 被毛の抜け替わりが多く、こまめなブラッシングが必要です。</li>
    <li><span>4</span> 食事量をコントロールし、肥満を防止しましょう。</li>
    <li><span>5</span> 独立心が強いため、過度な干渉は逆効果です。信頼関係を大切に。</li>
  </ul>

    

2 汎用CSS

/* ----------------------------------------
 * ポイントセクション
 * ---------------------------------------- */

.about-fuan { /* セクション全体 */
  background: linear-gradient(135deg, #f9fcff, #eef7ff); /* 柔らかい青系グラデーション背景 */
  border-radius: 12px; /* 角を丸くして優しい印象に */
  padding: 60px 30px; /* 内側の余白を広めに確保 */
  text-align: center; /* テキストを中央寄せに */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); /* やわらかい影を追加 */
  max-width: 800px; /* 横幅の最大値を制限 */
  margin: 60px auto; /* セクションを中央に配置 */
}

.about-fuan h2 { /* 見出しスタイル */
  color: #004c80; /* 信頼感のある濃い青色 */
  font-size: 1.8em; /* 少し大きめの見出し */
  margin-bottom: 25px; /* 下に余白を確保 */
  font-weight: 700; /* 太字で強調 */
  line-height: 1.5; /* 行間をやや広めに設定 */
}

.consult-lead { /* リード文 */
  font-size: 1.1em; /* 本文よりやや大きめの文字 */
  color: #333; /* 読みやすいダークグレー */
  line-height: 1.8; /* 行間を広めに */
  margin-bottom: 40px; /* 下に余白を追加 */
}

.consult-points { /* リスト全体 */
  list-style: none; /* デフォルトのリストマークを削除 */
  padding: 0; /* 左の余白をリセット */
  margin-bottom: 40px; /* 下に余白を確保 */
  text-align: left; /* リストは左揃えで自然に */
  display: inline-block; /* 中央寄せと整列の両立 */
}

.consult-points li { /* 各項目のカード */
  position: relative; /* スパンを位置調整できるように設定 */
  background: #fff; /* 白背景でカード風に */
  border: 1px solid #dde7f0; /* 優しいグレーの境界線 */
  border-radius: 8px; /* カードの角を丸く */
  padding: 15px 20px 15px 55px; /* 番号部分のスペースを確保 */
  margin-bottom: 15px; /* 各項目の間に間隔を追加 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); /* ふんわりとした影を追加 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション設定 */
}

.consult-points li:hover { /* ホバー時アニメーション */
  transform: translateY(-3px); /* ホバー時に少し浮かせる */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ホバー時に影を強調 */
}

.consult-points li span { /* 番号バッジ */
  position: absolute; /* 番号を左に配置 */
  left: 15px; /* 左端の余白 */
  top: 50%; /* 縦方向の中央に配置 */
  transform: translateY(-50%); /* 完全に中央揃えに補正 */
  background: #0078d7; /* 明るい青背景で目立たせる */
  color: #fff; /* 番号を白に */
  font-weight: bold; /* 番号を強調 */
  border-radius: 50%; /* 丸型にする */
  width: 30px; /* 丸の幅 */
  height: 30px; /* 丸の高さ */
  display: flex; /* 中央揃えにするためにflex使用 */
  align-items: center; /* 縦方向中央揃え */
  justify-content: center; /* 横方向中央揃え */
  font-size: 0.9em; /* 少し小さめのフォント */
}

.consult-btn { /* ボタンスタイル */
  display: inline-block; /* ボタンをインラインブロックに */
  background: #0078d7; /* メインカラー：青 */
  color: #fff; /* 白文字 */
  text-decoration: none; /* 下線を消す */
  font-size: 1.1em; /* 少し大きめ文字 */
  padding: 15px 40px; /* 内側余白を広めに */
  border-radius: 30px; /* 丸みのあるボタン */
  font-weight: bold; /* 太字で目立たせる */
  box-shadow: 0 4px 10px rgba(0, 120, 215, 0.3); /* 青みを帯びた影 */
  transition: background 0.3s ease, transform 0.3s ease; /* ホバー時のアニメーション */
}

.consult-btn:hover { /* ボタンホバー時 */
  background: #005fa3; /* 濃い青に変化 */
  transform: translateY(-2px); /* 少し浮くように演出 */
}

/* --- スマホ対応 --- */
@media (max-width: 600px) {
  .about-fuan { padding: 40px 20px; }
  .consult-points li {
    font-size: 0.95em; /* 文字を少し小さく */
    padding: 15px 15px 15px 50px; /* 内側余白を調整 */
  }
  .consult-btn {
    width: 100%; /* 横幅いっぱい */
    padding: 15px 0; /* 高さ調整 */
  }
}
    

3 完成イメージ

• 1 適度な運動量が必要です。散歩は朝夕２回を目安に行いましょう。
• 2 飼い主に忠実ですが、警戒心が強い一面も。子どもや他の犬との接し方に注意。
• 3 被毛の抜け替わりが多く、こまめなブラッシングが必要です。
• 4 食事量をコントロールし、肥満を防止しましょう。
• 5 独立心が強いため、過度な干渉は逆効果です。信頼関係を大切に。

4 まとめ

• HTMLとCSSだけで完成度の高いアドバイスカードが作れる
• スマホでも見やすく、丸数字が自動で整列する
• シンプルな構造なので他のテーマでも流用可能