Dialog要素でモーダルアニメーション｜AIプロンプト作例

このプロンプトは、HTML標準の

要素を活用してモーダルUIを構築しつつ、GSAPによるアニメーション演出を組み合わせる実装パターンを引き出すことを目的としています。jQueryやBootstrapなどのUIライブラリに頼らず、ブラウザネイティブのダイアログ機能をベースにすることで、軽量かつアクセシビリティ面でも堅牢な構成が得られます。

フォーカストラップや背景カスタマイズといった実務要件も含めて指定しているため、プロダクション品質に近いコードサンプルが期待できます。ポートフォリオサイトや管理画面など、依存ライブラリを最小化したいプロジェクトへの応用に適しており、GSAPのtimelineを活用した開閉トランジションの書き方を学ぶ教材としても有効です。