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