Recipe
モーダルをHTML/CSSで実装する
モーダル（Modal）をHTML/CSSで実装するための基本構成です。
実装時の注意点
- ・意味のあるHTML構造を先に決める。
- ・通常、フォーカス、無効、エラー、読み込み状態を確認する。
- ・モバイル幅で文字や操作対象が崩れないようにする。
実装例
モーダルをHTML/CSSで実装する
モーダル（Modal）をHTML/CSSで実装するための基本構成です。
<div class="rounded border p-4">モーダル</div>AI実装プロンプト
AI実装プロンプト
モーダル（Modal）をHTML/CSSで実装してください。アクセシビリティ、状態、モバイル表示、実装上の注意点も含めてください。
関連ページ
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- Apple Human Interface Guidelines参照確認日: 2026-07-16
- Material Design参照確認日: 2026-07-16
- Microsoft Fluent UI参照確認日: 2026-07-16
- shadcn/ui参照確認日: 2026-07-16
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-16
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-16
- MDN Web Docs - Accessibility参照確認日: 2026-07-16
FAQ
モーダルをHTML/CSSで実装するを使う前に確認することは？
画面上の役割、必要な状態、入力やエラーの有無、キーボード操作、モバイル表示を先に確認します。
html-css実装で依存ライブラリは必要ですか？
このレシピは追加依存なしで考え方を確認できる構成です。
AIにこのレシピを渡すときの注意点は？
そのまま生成させるだけでなく、プロダクトのデザインシステム、命名規則、アクセシビリティ要件を追記します。