この記事にはプロモーションが含まれています。

【コピペOK】ステップ表示アニメーション｜5種類【Web制作】

2025-08-16

ケケンタ

ステップ表示にアニメーション効果を追加したい……

ケケンタ

ステップセクションをもっと魅力的にしたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
ステップ表示アニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「ステップ表示を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するステップ表示￥アニメーション

フェード効果（フェードイン/アウト）
スライド効果（スライドイン/アウト）
ズーム効果（ズームイン/アウト）
スケール効果（スケールイン/アウト）
横並びステップ表示（プログレスバー付き）

ケケンタ

特にフォームウィザードや設定画面には、ステップ表示アニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/15 12:32:58時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/16 08:44:59時点 Amazon調べ-詳細)

ステップ表示アニメーションとは

ステップ表示アニメーションは、段階的な進行を視覚的に表現するアニメーション効果です。ユーザーに現在の進行状況を分かりやすく伝え、操作の完了感を演出する効果的な手法です。

効果的な使用場面

適している場面

フォームウィザード
設定画面の段階表示
チュートリアルの進行
ショッピングカートのチェックアウト
アカウント作成の段階表示

避けるべき場面

即座に完了する操作
複雑すぎる段階分け
ユーザーが操作を中断できない場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
スケール効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
横並びステップ	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

フェード効果

① デモ

See the Pen ステップアニメーションフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

HTML

<div class="step-container">
  <div class="step-item active" data-step="1">
    <div class="step-number">1</div>
    <div class="step-content">
      <h3>ステップ1</h3>
      <p>最初のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="2">
    <div class="step-number">2</div>
    <div class="step-content">
      <h3>ステップ2</h3>
      <p>2番目のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="3">
    <div class="step-number">3</div>
    <div class="step-content">
      <h3>ステップ3</h3>
      <p>最後のステップの内容です。</p>
    </div>
  </div>
</div>

<div class="step-buttons">
  <button class="prev-btn" disabled>前へ</button>
  <button class="next-btn">次へ</button>
</div>

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.5s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* フェード効果固有のスタイル */
.step-item {
  opacity: 0;
  transform: translateY(20px);
}

.step-item.active {
  opacity: 1;
  transform: translateY(0);
}

.step-item.completed {
  opacity: 0.7;
  border-color: #27ae60;
  background: #f8fff9;
}

④ JavaScript

class StepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new StepDisplay();
});

⑤ カスタマイズ例

/* 遅いフェード効果 */
.step-item.slow {
  transition: all 1s ease;
}

/* 速いフェード効果 */
.step-item.fast {
  transition: all 0.3s ease;
}

/* バウンス効果付き */
.step-item.bounce {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

スライド効果

① デモ

See the Pen ステップアニメーションスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

方向性のある動きで進行感を演出
視覚的な流れを作成
ユーザーの視線を自然に誘導

② HTML

<div class="step-container slide">
  <div class="step-item active" data-step="1">
    <div class="step-number">1</div>
    <div class="step-content">
      <h3>ステップ1</h3>
      <p>最初のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="2">
    <div class="step-number">2</div>
    <div class="step-content">
      <h3>ステップ2</h3>
      <p>2番目のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="3">
    <div class="step-number">3</div>
    <div class="step-content">
      <h3>ステップ3</h3>
      <p>最後のステップの内容です。</p>
    </div>
  </div>
</div>

<div class="step-buttons">
  <button class="prev-btn" disabled>前へ</button>
  <button class="next-btn">次へ</button>
</div>

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.5s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* スライド効果固有のスタイル */
.step-container.slide {
  height: 200px;
}

.step-item {
  position: absolute;
  width: calc(100% - 40px);
  transform: translateX(100%);
  opacity: 0;
}

.step-item.active {
  transform: translateX(0);
  opacity: 1;
}

.step-item.completed {
  transform: translateX(-100%);
  opacity: 0;
}

④ JavaScript

class SlideStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new SlideStepDisplay();
});

⑤ カスタマイズ例

/* 上下スライド */
.step-item.slide-vertical {
  transform: translateY(100%);
}

.step-item.slide-vertical.active {
  transform: translateY(0);
}

.step-item.slide-vertical.completed {
  transform: translateY(-100%);
}

/* 斜めスライド */
.step-item.slide-diagonal {
  transform: translate(100%, 100%);
}

.step-item.slide-diagonal.active {
  transform: translate(0, 0);
}

ズーム効果

① デモ

See the Pen ステップアニメーションズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

要素の拡大・縮小効果
注目を集める視覚的インパクト
重要度の表現

② HTML

<div class="step-container zoom">
  <div class="step-item active" data-step="1">
    <div class="step-number">1</div>
    <div class="step-content">
      <h3>ステップ1</h3>
      <p>最初のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="2">
    <div class="step-number">2</div>
    <div class="step-content">
      <h3>ステップ2</h3>
      <p>2番目のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="3">
    <div class="step-number">3</div>
    <div class="step-content">
      <h3>ステップ3</h3>
      <p>最後のステップの内容です。</p>
    </div>
  </div>
</div>

<div class="step-buttons">
  <button class="prev-btn" disabled>前へ</button>
  <button class="next-btn">次へ</button>
</div>

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.5s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ズーム効果固有のスタイル */
.step-item {
  transform: scale(0.8);
  opacity: 0;
}

.step-item.active {
  transform: scale(1);
  opacity: 1;
}

.step-item.completed {
  transform: scale(0.9);
  opacity: 0.7;
}

④ JavaScript

class ZoomStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new ZoomStepDisplay();
});

⑤ カスタマイズ例

/* 大きなズーム効果 */
.step-item.zoom-large {
  transform: scale(0.5);
}

.step-item.zoom-large.active {
  transform: scale(1.1);
}

/* バウンス付きズーム */
.step-item.zoom-bounce {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 段階的ズーム */
.step-item.zoom-staged {
  transform: scale(0.6) rotate(-5deg);
}

.step-item.zoom-staged.active {
  transform: scale(1) rotate(0deg);
}

スケール効果

① デモ

See the Pen ステップアニメ―ションスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

微細な拡大・縮小効果
ミニマルで洗練された演出
自然な動き

② HTML

<div class="step-container scale">
  <div class="step-item active" data-step="1">
    <div class="step-number">1</div>
    <div class="step-content">
      <h3>ステップ1</h3>
      <p>最初のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="2">
    <div class="step-number">2</div>
    <div class="step-content">
      <h3>ステップ2</h3>
      <p>2番目のステップの内容です。</p>
    </div>
  </div>

  <div class="step-item" data-step="3">
    <div class="step-number">3</div>
    <div class="step-content">
      <h3>ステップ3</h3>
      <p>最後のステップの内容です。</p>
    </div>
  </div>
</div>

<div class="step-buttons">
  <button class="prev-btn" disabled>前へ</button>
  <button class="next-btn">次へ</button>
</div>

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.4s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* スケール効果固有のスタイル */
.step-item {
  transform: scale(0.95);
  opacity: 0.8;
}

.step-item.active {
  transform: scale(1.02);
  opacity: 1;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.step-item.completed {
  transform: scale(0.98);
  opacity: 0.9;
}

④ JavaScript

class ScaleStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new ScaleStepDisplay();
});

⑤ カスタマイズ例

/* 微細なスケール */
.step-item.scale-subtle {
  transform: scale(0.98);
}

.step-item.scale-subtle.active {
  transform: scale(1.01);
}

/* バウンス付きスケール */
.step-item.scale-bounce {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 段階的スケール */
.step-item.scale-staged {
  transform: scale(0.9);
}

.step-item.scale-staged.active {
  transform: scale(1.05);
}

.step-item.scale-staged.completed {
  transform: scale(0.95);
}

横並びステップ表示

① デモ

See the Pen ステップアニメーション横並びステップ表示【プログレスバー付き】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この横並びステップ表示の特徴

横並びのステップ表示
プログレスバーによる進行状況の可視化
コンパクトでスペース効率が良い

② HTML

<div class="horizontal-step-container">
  <div class="progress-bar">
    <div class="progress-fill"></div>
  </div>

  <div class="step-items">
    <div class="step-item active" data-step="1">
      <div class="step-circle">
        <span class="step-number">1</span>
        <div class="checkmark">✓</div>
      </div>
      <div class="step-label">基本情報</div>
    </div>

    <div class="step-item" data-step="2">
      <div class="step-circle">
        <span class="step-number">2</span>
        <div class="checkmark">✓</div>
      </div>
      <div class="step-label">詳細設定</div>
    </div>

    <div class="step-item" data-step="3">
      <div class="step-circle">
        <span class="step-number">3</span>
        <div class="checkmark">✓</div>
      </div>
      <div class="step-label">確認・完了</div>
    </div>
  </div>
</div>

<div class="step-content">
  <div class="step-panel active" data-step="1">
    <h3>基本情報</h3>
    <p>最初のステップの内容です。</p>
  </div>

  <div class="step-panel" data-step="2">
    <h3>詳細設定</h3>
    <p>2番目のステップの内容です。</p>
  </div>

  <div class="step-panel" data-step="3">
    <h3>確認・完了</h3>
    <p>最後のステップの内容です。</p>
  </div>
</div>

<div class="step-buttons">
  <button class="prev-btn" disabled>前へ</button>
  <button class="next-btn">次へ</button>
</div>

③ CSS

/* 横並びステップ表示のスタイル */
.horizontal-step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #e1e5e9;
  border-radius: 3px;
  margin-bottom: 30px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.5s ease;
  width: 33.33%;
}

.step-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.step-items::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e1e5e9;
  z-index: 1;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #e1e5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  position: relative;
}

.step-number {
  font-weight: bold;
  color: #7f8c8d;
  transition: all 0.3s ease;
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 14px;
  color: #7f8c8d;
  text-align: center;
  transition: all 0.3s ease;
}

/* アクティブ状態 */
.step-item.active .step-circle {
  border-color: #667eea;
  background: #667eea;
  transform: scale(1.1);
}

.step-item.active .step-number {
  color: #ffffff;
}

.step-item.active .step-label {
  color: #667eea;
  font-weight: 600;
}

/* 完了状態 */
.step-item.completed .step-circle {
  border-color: #27ae60;
  background: #27ae60;
  transform: scale(1.05);
}

.step-item.completed .checkmark {
  opacity: 1;
}

.step-item.completed .step-number {
  opacity: 0;
}

.step-item.completed .step-label {
  color: #27ae60;
  font-weight: 600;
}

/* ステップパネル */
.step-content {
  margin-bottom: 30px;
}

.step-panel {
  display: none;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  animation: fadeIn 0.5s ease;
}

.step-panel.active {
  display: block;
}

.step-panel h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-panel p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

/* ボタンスタイル */
.step-buttons {
  text-align: center;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* プログレスバーのアニメーション */
.progress-fill.step-1 { width: 33.33%; }
.progress-fill.step-2 { width: 66.66%; }
.progress-fill.step-3 { width: 100%; }

④ JavaScript

class HorizontalStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateProgress();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
      this.updateProgress();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
      this.updateProgress();
    }
  }

  updateDisplay() {
    // ステップアイテムの更新
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    // ステップパネルの更新
    document.querySelectorAll('.step-panel').forEach((panel, index) => {
      const stepNum = index + 1;

      if (stepNum === this.currentStep) {
        panel.classList.add('active');
      } else {
        panel.classList.remove('active');
      }
    });

    this.updateButtons();
  }

  updateProgress() {
    const progressFill = document.querySelector('.progress-fill');
    const progressPercentage = (this.currentStep / this.totalSteps) * 100;

    progressFill.style.width = progressPercentage + '%';

    // ステップに応じたクラス名の更新
    progressFill.className = 'progress-fill';
    if (this.currentStep === 1) {
      progressFill.classList.add('step-1');
    } else if (this.currentStep === 2) {
      progressFill.classList.add('step-2');
    } else if (this.currentStep === 3) {
      progressFill.classList.add('step-3');
    }
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new HorizontalStepDisplay();
});

⑤ カスタマイズ例

/* 大きなステップサークル */
.step-item.large .step-circle {
  width: 50px;
  height: 50px;
}

/* カラフルなプログレスバー */
.progress-fill.colorful {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
}

/* バウンス効果付き */
.step-item.bounce .step-circle {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 影付きステップ */
.step-item.shadow .step-circle {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.step-item.shadow.active .step-circle {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}