Design Pattern
Design Patterns
HTML・CSS・アクセシビリティの知識を統合し、 実務で使えるUIコンポーネントの正しい実装パターンを解説します。 すべてのパターンにライブデモとコード例を用意しています。
パターン一覧
フォーム
- 初級
フォーム入力(テキスト+エラー)
ラベル、ヘルプテキスト、バリデーション、エラー表示を正しく実装する基本パターン。
- 初級
セレクト
固定候補から 1 つを選ぶネイティブな選択 UI。ラベル、未選択状態、optgroup の使い分けを解説。
- 上級
コンボボックス
検索入力と候補選択を組み合わせる高度なパターン。セレクトとの違いと ARIA 状態管理を解説。
- 初級
スイッチ
即時反映されるオン / オフ設定の UI。チェックボックスとの意味の違いと状態表現を解説。
- 初級
チェックボックスグループ
複数選択のための基本パターン。fieldset、legend、選択ルール、グループ単位のエラー表示を解説。