詳細情報ポップアップ
ポップアップ・モーダル・ドキュメントを使うと、ワンページでマルチページサイトに匹敵する情報提供が可能になります。
ポップアップ・モーダル・ドキュメントとは
詳細などのボタンをクリックするとポップアップでドキュメント（文章や、画像、スライドショーなど）を見せる仕組みです。
ドキュメントを表示している間は、背景のスクロールをロックします
ドキュメント内のスクロールは有効なので、追加情報を見せることができます
AppleのプロダクトページでもiPhone、iPad、Macなどで有効活用されている技術です
メリット
ワンページで、マルチページサイトに匹敵する情報を提供することが可能
作成側にとっては、Claude Codeで作りやすい、変更しやすい、管理しやすいメリット
訪問者にとってはページ遷移がないので、非常に便利
作成方法
プロンプトをコピーする
以下のプロンプトをコピーしてください。
セクション名を修正
プロンプト末尾の「ここにセクションの名前」のところを、実際のセクション名に修正します。
planモードで送信
Claude Codeのplanモードを使って送信すると、実装計画を確認できます。
見た目を調整
実際に試してみて、見た目の修正をします（例えば、白背景にするなど）。
ポップアップ・モーダル・ドキュメントを利用できるように、実装してください。仕様は以下の通りです。
- 目的は、ワンページ構成のサイトで、マルチサイトに匹敵するような情報提供を行うこと
- 呼び出しは、ボタン、リンク、カードなどをクリックしたとき
- ワンページ内に、複数箇所で利用しやすいように、再利用性を高めた実装を行う
- レスポンシブに対応。デスクトップ時の幅は、狭くならないように、85%程度の大きさにすること
- ウィンドウが開くときにフェードイン、ウィンドウが閉じるときにフェードアウトのアニメーション
- ウィンドウ外のクリックでも閉じるようにする
- ページのカラーリング、フォント設定などに準拠する
動作をチェックしたいので、「ここにセクションの名前」セクションのそれぞれの項目をクリックしたら、モーダル・ポップアップ・ドキュメントが開くようにしてください。内容は、適当なものを生成してください。