ul・liタグで美しいリストデザインを作る方法

この記事では、HTMLの<ul>タグ（箇条書きリスト）の使い方をわかりやすく解説します。
例として「柴犬の飼育に関する5つの悩み」を題材にし、リストを美しく装飾するHTMLとCSSの実装方法を紹介します。

1 実装のポイント

以下のHTMLとCSSを使うことで、リスト（ulタグ）の基本構造を学びつつ、実際にデザインされたリストを表示できます。
今回は「柴犬の飼育」というテーマを例にしていますが、内容を差し替えれば他のテーマにも応用できます。

<section class="pharmacy-problems">
  <p class="lead">
    柴犬の散歩で、あなたが真っ先に解決したいのは、次の5つの中でどれですか？
  </p>

  <ul class="problem-list">
    <li>
      <strong>1.</strong> 朝晩の散歩時間を確保できず、運動不足になってしまう。
    </li>
    <li>
      <strong>2.</strong> 抜け毛が多く、掃除やケアに時間がかかる。
    </li>
    <li>
      <strong>3.</strong> 他の犬や人に吠えやすく、しつけに自信が持てない。
    </li>
    <li>
      <strong>4.</strong> 食事管理が難しく、体重コントロールに悩む。
    </li>
    <li>
      <strong>5.</strong> 夏の暑さや冬の寒さへの対策が分からない。
    </li>
  </ul>
</section>
  

2 汎用CSS

/*---------------------------------
 * お悩みセクション 
 *---------------------------------*/

.pharmacy-problems { /* 全体ラッパー */
  background: linear-gradient(180deg, #fff6f9 0%, #ffffff 100%); /* 桃色グラデーション */
  padding: 60px 20px; /* セクション内余白 */
  border-radius: 12px; /* 角丸 */
  box-shadow: 0 4px 16px rgba(0,0,0,0.05); /* ふんわり影 */
  max-width: 800px; /* コンテンツ幅 */
  margin: 60px auto; /* 中央寄せ */
}

.pharmacy-problems h2 { /* 見出し */
  text-align: center; /* 中央寄せ */
  color: #d65a8e; /* 優しい桃色 */
  font-size: 1.8em; /* フォントサイズ */
  margin-bottom: 20px; /* 下余白 */
}

.pharmacy-problems .lead { /* リード文 */
  text-align: center; /* 中央寄せ */
  font-size: 1.1em; /* やや大きめ */
  color: #444; /* 読みやすい灰色 */
  margin-bottom: 30px; /* 下余白 */
}

.problem-list { /* リスト全体 */
  list-style: none; /* マーカー非表示 */
  padding: 0; /* 内側余白リセット */
  margin: 0 auto 40px; /* 下余白と中央揃え */
  max-width: 700px; /* 横幅制限 */
}

.problem-list li { /* 各項目 */
  background: #fff; /* 白背景 */
  border-left: 6px solid #d65a8e; /* 左ライン（桃色） */
  padding: 15px 20px; /* 内側余白 */
  margin-bottom: 16px; /* 下余白 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 柔らかい影 */
  line-height: 1.7; /* 行間 */
  font-size: 1em; /* 標準文字サイズ */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* ホバー時の動き */
}

.problem-list li:hover { /* ホバー時 */
  transform: translateY(-2px); /* 少し浮かせる */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影を強調 */
}

.problem-list strong { /* 番号 */
  color: #d65a8e; /* 番号を桃色に */
  margin-right: 6px; /* 番号右の余白 */
}
  

3 完成イメージ

4 代用プラグイン

特にプラグインは不要です。上記のHTMLとCSSをそのままクラシックエディタに貼るだけで動作します。

5 まとめ

<ul>タグは、情報を整理して視覚的に伝えるための基本的なHTML要素です。
今回の「柴犬の飼育の悩み」はあくまで例として使用しましたが、リスト構造＋CSS装飾を組み合わせることで、さまざまなテーマに応用できます。
ブログの記事構成やサービス紹介、商品特徴の整理などにも活用できる汎用的なテクニックです。