AIでスクロール固定エリア内に展開するコンテンツを作る【CSS＋JS生成】

サイドバーが画面に固定されながら、その中のメニューをクリックすると展開するUI。複雑そうに見えますが、AIへの指示を整理すれば一発で生成できます。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のHTMLに対して、
・.sidebar がスクロールしても画面上部に固定されるCSS（position: sticky）
・.accordion-item のタイトルをクリックすると本文が開閉するJavaScript
を追加してください。アニメーションはなめらかに。

<aside class="sidebar">
  <div class="accordion-item">
    <button class="accordion-title">セクション1</button>
    <div class="accordion-body"><p>内容1</p></div>
  </div>
  <div class="accordion-item">
    <button class="accordion-title">セクション2</button>
    <div class="accordion-body"><p>内容2</p></div>
  </div>
</aside>

生成されたCSS例

.sidebar {
  position: sticky;
  top: 24px;
  align-self: flex-start;
  width: 260px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
}
.accordion-title {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 8px;
  cursor: pointer;
  color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-title::after {
  content: '＋';
  font-size: 1rem;
  transition: transform 0.3s;
}
.accordion-item.open .accordion-title::after {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.3s;
  padding: 0 8px;
}
.accordion-item.open .accordion-body {
  max-height: 400px;
  padding: 0 8px 12px;
}

生成されたJS例

document.querySelectorAll('.accordion-title').forEach(btn => {
  btn.addEventListener('click', () => {
    const item = btn.closest('.accordion-item');
    item.classList.toggle('open');
  });
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

スクロールしても固定されるサイドバーの中に、アコーディオンメニューを配置したUIを
HTML・CSS・JavaScriptでまとめて作ってください。
・サイドバーは画面左側に配置、メインコンテンツは右側
・アコーディオンは複数項目、クリックで開閉
・開いた項目のタイトル色を変える

ポイント

• position: stickyが効くには、親要素にoverflow: hiddenがないか確認しましょう（効かなくなります）
• 「同時に1つだけ開く」仕様にしたい場合は、その旨をAIに伝えると対応コードを生成してくれます