固定ページで使える ol・li ステップデザインの作り方

ペットを迎えるまでの流れを、ol/li タグを使ってステップ形式で表示するデザインです。番号は左に固定し、見出しと説明文は自然に改行されるようにレイアウトしています。

1 HTML構造

<ol class="step-list">
  <li>
    <div class="step-header">
      <span class="step-number">1</span>
      <div class="step-text">
        <h3>事前準備</h3>
        <p>ペットを迎える前に、飼育環境や必要なアイテムを整えましょう。</p>
      </div>
    </div>

    <div class="step-cards">
      <div class="card">
        <span class="tag tag-red">飼い主</span>
        <ul>
          <li>飼育スペースの確保</li>
          <li>ゲージやベッドの準備</li>
          <li>フード・トイレ用品の購入</li>
        </ul>
      </div>
      <div class="card">
        <span class="tag tag-orange">ペットショップ</span>
        <ul>
          <li>健康状態のチェック</li>
          <li>ワクチン接種情報の説明</li>
        </ul>
      </div>
    </div>
  </li>

  <li>
    <div class="step-header">
      <span class="step-number">2</span>
      <div class="step-text">
        <h3>お迎え当日</h3>
        <p>移動中の安全とストレス軽減に配慮して、穏やかにお迎えしましょう。</p>
      </div>
    </div>

    <div class="step-cards">
      <div class="card">
        <span class="tag tag-red">飼い主</span>
        <ul>
          <li>キャリーバッグの用意</li>
          <li>静かな環境で休ませる</li>
        </ul>
      </div>
      <div class="card">
        <span class="tag tag-orange">ペットショップ</span>
        <ul>
          <li>最終チェックと説明</li>
          <li>飼育サポート情報の案内</li>
        </ul>
      </div>
    </div>
  </li>

  <li>
    <div class="step-header">
      <span class="step-number">3</span>
      <div class="step-text">
        <h3>お迎え後のケア</h3>
        <p>新しい環境に慣れるまで、食事・健康・しつけに注意して過ごしましょう。</p>
      </div>
    </div>

    <div class="step-cards">
      <div class="card">
        <span class="tag tag-red">飼い主</span>
        <ul>
          <li>食事とトイレの習慣づけ</li>
          <li>体調チェックと健康管理</li>
        </ul>
      </div>
      <div class="card">
        <span class="tag tag-orange">動物病院</span>
        <ul>
          <li>ワクチン接種と健康診断</li>
          <li>しつけや飼育相談</li>
        </ul>
      </div>
    </div>
  </li>
</ol>

2 汎用CSS

/* -------------------------------------------
 * ペットお迎えステップデザインCSS
 * ----------------------------------------- */

/* --- ステップリスト全体 --- */
.step-list {
  list-style: none; /* 番号を非表示 */
  padding: 0; /* 内余白を削除 */
  margin: 0; /* 外余白を削除 */
}
.step-list li {
  border-top: 1px solid #ccc; /* ステップごとの区切り線 */
  padding: 40px 0; /* 上下余白 */
}

/* --- ステップヘッダー（番号＋テキスト） --- */
.step-header {
  display: flex; /* 番号とテキストを横並びに */
  align-items: flex-start; /* 上揃えにする */
  gap: 20px; /* 間隔を空ける */
}
.step-number {
  font-size: 64px; /* 大きな数字 */
  font-weight: bold; /* 太字 */
  color: #e8491d; /* オレンジ系カラー */
  line-height: 1; /* 行の高さを詰める */
}
.step-text {
  display: flex; /* 内部を縦並びにする */
  flex-direction: column; /* 縦配置 */
}
.step-text h3 {
  font-size: 22px; /* 見出しサイズ */
  margin: 0 0 8px; /* 下に余白 */
}
.step-text p {
  margin: 0; /* 段落余白をなくす */
  color: #333; /* 文字色 */
  line-height: 1.6; /* 行間を広めに */
}

/* --- カードエリア --- */
.step-cards {
  display: flex; /* カードを横並びに */
  flex-wrap: wrap; /* 折り返し許可 */
  gap: 20px; /* 間隔を空ける */
  margin-top: 24px; /* 上に余白 */
}
.card {
  flex: 1 1 300px; /* 幅300pxを基準に可変 */
  background: #f8f8f8; /* 背景グレー */
  border-radius: 10px; /* 角丸 */
  padding: 20px; /* 内側余白 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 影を薄く */
}
.card ul {
  margin: 10px 0 0; /* 上に余白 */
  padding-left: 20px; /* インデント */
}
.card li {
  margin: 4px 0; /* 各項目間に余白 */
}

/* --- タグ --- */
.tag {
  display: inline-block; /* インライン要素をブロック化 */
  font-size: 13px; /* 小さめ文字 */
  font-weight: bold; /* 太字 */
  color: #fff; /* 白文字 */
  padding: 4px 10px; /* 内側余白 */
  border-radius: 12px; /* 丸みをつける */
}
.tag-red {
  background: #e8491d; /* 飼い主用：赤系 */
}
.tag-orange {
  background: #f36d21; /* 相手側用：オレンジ系 */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .step-header {
    flex-direction: column; /* 縦並びに変更 */
  }
  .step-number {
    font-size: 48px; /* 数字を少し小さく */
  }
}

3 完成イメージ

▶ 固定ページで使える ol・li ステップデザインの作り方

4 まとめ

番号は左、見出しと説明文は右で改行されるようになっており、読みやすく整理された構成です。
ペット以外にも「手順紹介」「利用の流れ」など、さまざまな固定ページに応用できます。