画像アコーディオン

画像アコーディオンは、ユーザーが各パネルを選択（またはホバー）した際に、背景画像がシームレスに広がり、テキスト情報と合わせて視覚的なインパクトを与えるUIコンポーネントです。

プレビュー (Preview)

Sunrise Mountains

朝焼けに染まる美しい山々の風景。

Ocean Depths

深い海の中の静寂と神秘的な光。

Forest Mist

霧に包まれた深い森の朝。

Night Sky

無数の星が瞬く夜空。

ユースケースと特徴 (Use Cases & Features)

ポートフォリオやギャラリー：画像や作品を限られたスペースで効果的に見せる際に最適です。
特徴の紹介セクション：プロダクトの機能やサービスの特徴を、印象的な画像とともにステップ形式で伝えることができます。
省スペースかつ高インパクト：通常のスライダーとは異なり、全体の文脈（他の選択肢）を見せつつ、ユーザーのアクションによって詳細を展開できます。

デザインとUXのポイント (Design & UX)

CSS :has() 疑似クラスの活用：JavaScriptを一切使用せず、純粋なCSSのみでインタラクティブな動きを実現しています。
スムーズなアニメーション：cubic-bezierを用いたイージングにより、パネルの伸縮や画像の拡大（スケールアップ）が自然で心地よい動きになります。
視認性の確保：背景画像の上にグラデーションのオーバーレイを重ねることで、白いテキストの可読性を高めています。

カスタマイズ方法 (Customization Guide)

height を変更することで、アコーディオン全体の高さを調整できます。
パネルの数に応じてHTMLの .ia-panel 要素を追加・削除してください。
各パネルの background-image には、お好みの画像URLを設定してください。

実装コード (Implementation)

<div class="ia-container">

<!-- Panel 1 -->

<label class="ia-panel">

  <input type="radio" name="image-accordion" class="ia-radio" checked="checked" />

  <div class="ia-bg" style="background-image: url('/assets/bg-1.jpg');"></div>

  <div class="ia-overlay"></div>

  <div class="ia-content">

    <div class="ia-icon">1</div>

    <div class="ia-text">

      <h3>Sunrise Mountains</h3>

      <p>朝焼けに染まる美しい山々の風景。</p>

    </div>

  </div>

</label>



<!-- Panel 2 -->

<label class="ia-panel">

  <input type="radio" name="image-accordion" class="ia-radio" />

  <div class="ia-bg" style="background-image: url('/assets/bg-2.jpg');"></div>

  <div class="ia-overlay"></div>

  <div class="ia-content">

    <div class="ia-icon">2</div>

    <div class="ia-text">

      <h3>Ocean Depths</h3>

      <p>深い海の中の静寂と神秘的な光。</p>

    </div>

  </div>

</label>



<!-- Panel 3 -->

<label class="ia-panel">

  <input type="radio" name="image-accordion" class="ia-radio" />

  <div class="ia-bg" style="background-image: url('/assets/bg-3.jpg');"></div>

  <div class="ia-overlay"></div>

  <div class="ia-content">

    <div class="ia-icon">3</div>

    <div class="ia-text">

      <h3>Forest Mist</h3>

      <p>霧に包まれた深い森の朝。</p>

    </div>

  </div>

</label>



<!-- Panel 4 -->

<label class="ia-panel">

  <input type="radio" name="image-accordion" class="ia-radio" />

  <div class="ia-bg" style="background-image: url('/assets/bg-4.jpg');"></div>

  <div class="ia-overlay"></div>

  <div class="ia-content">

    <div class="ia-icon">4</div>

    <div class="ia-text">

      <h3>Night Sky</h3>

      <p>無数の星が瞬く夜空。</p>

    </div>

  </div>

</label>

</div>



<style>
.ia-container {

  display: flex;

  width: 100%;

  height: 400px;

  gap: 0.75rem;

  border-radius: 1rem;

  overflow: hidden;

  font-family: sans-serif;

}

.ia-panel {

  position: relative;

  flex: 1;

  border-radius: 1rem;

  overflow: hidden;

  cursor: pointer;

  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}

.ia-radio {

  display: none;

}

.ia-panel:has(.ia-radio:checked) {

  flex: 4;

}

.ia-panel:not(:has(.ia-radio:checked)):hover {

  flex: 1.2;

}

.ia-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

}

.ia-panel:has(.ia-radio:checked) .ia-bg {

  transform: scale(1.05);

}

.ia-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%);

  opacity: 0.6;

  transition: opacity 0.6s ease;

}

.ia-panel:has(.ia-radio:checked) .ia-overlay {

  opacity: 0.8;

  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);

}

.ia-content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 1.5rem;

  color: white;

  display: flex;

  align-items: flex-end;

  gap: 1rem;

}

.ia-icon {

  width: 3rem;

  height: 3rem;

  border-radius: 9999px;

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(8px);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

  font-size: 1.25rem;

  flex-shrink: 0;

}

.ia-text {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s ease, transform 0.5s ease;

  white-space: nowrap;

  overflow: hidden;

  width: 0;

}

.ia-panel:has(.ia-radio:checked) .ia-text {

  opacity: 1;

  transform: translateY(0);

  width: 100%;

  transition-delay: 0.1s;

}

.ia-text h3 {

  margin: 0 0 0.25rem 0;

  font-size: 1.25rem;

  font-weight: 700;

}

.ia-text p {

  margin: 0;

  font-size: 0.875rem;

  color: rgba(255, 255, 255, 0.8);

}
</style>

ブラウザ対応状況 (Browser Support)

このコンポーネントは、モダンブラウザ（Chrome、Edge、Safari、Firefoxの最新版）で完全にサポートされている :has() 疑似クラスを利用しています。古いブラウザではフォールバックとしてJavaScriptを用いたクラスの付け替えが必要になる場合があります。