クリック（タップ）するとアクションを実行するやつ。色・形・サイズでプライマリ／セカンダリ／ゴーストなどのバリエーションを作る。
よくあるバグ
- ダブルクリックで2回フォームが送信される
- disabled状態なのにクリックイベントが発火する
- ホバーしてもカーソルが矢印のまま（cursor: pointer 忘れ）
- 非同期処理中にボタンが連打できてしまう
ユーザーが文字を入力するやつ。フォーカス中は枠の色が変わるのが一般的。type属性でメール・電話・パスワード用に切り替えられる。
よくあるバグ
- iOSでフォーカス時に画面がズームインしてしまう（font-size: 16px 未満）
- プレースホルダーと入力テキストの色が同じで見えない
- オートフィルで背景が黄色くなってデザインが崩れる
- 日本語変換が確定する前にsubmitが走る
複数の選択肢をそれぞれオン・オフできるやつ。「利用規約に同意する」みたいな場面でよく使われる。
よくあるバグ
- クリック範囲がボックスだけで、ラベルをクリックしても反応しない
- 全選択チェックボックスと個別の状態が同期されない
- フォーム送信時にチェックなしの値がPOSTされない
- CSSリセットでチェックマークが消える
グループから必ず1つだけ選ぶやつ。支払い方法・性別選択でよく出てくる。同じname属性でグループになる。
よくあるバグ
- name属性が違うと別グループになって複数選べてしまう
- 一度選んだ選択肢を解除できず、リセットできない
- labelとinputが紐づいていないのでラベルクリックが効かない
- デフォルト選択なしで送信すると未選択エラーになる
オン／オフをぱちっと切り替えるやつ。設定画面でよく見かける。チェックボックスより「今すぐ切り替える」感が強い。
よくあるバグ
- アニメーションなしでガクッと瞬間移動する
- 色だけで状態を伝えていて色覚多様性に対応していない
- クリック範囲が小さくてスマホで操作しにくい
- 表示はオフなのに値はオンのまま（状態の同期ミス）
リストから1つ選ぶやつ。都道府県・カテゴリ・並び順などの選択に使う。選択肢が多いときはスクロールできる。
よくあるバグ
- iOSでCSSが効かず角丸やフォントが無視される
- 長い選択肢テキストがはみ出す（overflow: hidden 忘れ）
- 「-- 選択してください --」がそのまま送信されてしまう
- Androidのドロップダウンがシステムデザインに上書きされる
画面の手前に出てくるポップアップ。削除確認・画像拡大・ログインフォームなど「今すぐ注目してほしい」ときに使う。
よくあるバグ
- ESCキーで閉じない
- スクロールが背景ページに伝わる（スクロール貫通）
- スマホで画面に収まらずボタンが見えない
- 開いてもフォーカスが移動せずスクリーンリーダーに伝わらない
ホバーしたときに補足説明がひょこっと出てくるやつ。アイコンだけのボタンの説明によく使う。
よくあるバグ
- 画面端で外にはみ出して見えない
- スマホはホバーがないので永遠に表示されない
- 親要素に overflow: hidden があると切れる
- テキストが長くて吹き出しが巨大になりすぎる
ページ内で複数のコンテンツを切り替えて表示するやつ。商品の「概要・仕様・レビュー」みたいに場面を分けたいときに使う。
よくあるバグ
- 非アクティブタブのコンテンツが検索エンジンに読まれてSEOが混乱する
- URLにページ番号がないのでリロードで最初のタブに戻る
- スマホで横並びタブが画面から溢れてはみ出す
- アクティブ状態のスタイルが他のCSSに上書きされる
クリックで開いたり閉じたりするやつ。FAQや設定項目をコンパクトに並べるときに使う。
よくあるバグ
- height: auto へのCSSアニメーションができずガクッと瞬間展開する
- 「1つだけ開ける」仕様なのに複数同時に開いてしまう
- 閉じた状態のコンテンツがタブキーでフォーカスを受けてしまう
- 開くと内容が画面外に押し出されスクロールが必要になる
数値をドラッグして調整するやつ。価格帯の絞り込みや音量調整など、連続した値を入力するのに向いている。
よくあるバグ
- スマホでドラッグしようとするとページのスクロールが始まる
- ブラウザによってデザインが全然違う（特にiOS/Android）
- 0.1 + 0.2 = 0.30000000000000004 みたいな浮動小数点誤差が表示される
- min/maxの範囲外の値を手入力で打ててしまう
処理の進み具合を視覚的に示すやつ。ファイルアップロードや読み込み中に表示する。長さがわからないときはアニメーション版になる。
よくあるバグ
- 100%になっても表示が消えず完了したか分からない
- 処理が速すぎて一瞬しか見えない（かえって点滅みたいでびっくり）
- バーの幅が実際の進捗と合っておらず「演技」になっている
- aria属性がないのでスクリーンリーダーに進捗が伝わらない
ステータスやカテゴリを小さく示すラベル。「公開中・エラー」みたいな状態がバッジ、カテゴリ分類がタグ。
よくあるバグ
- 長い文字列でバッジが横に伸びてレイアウトが崩れる
- 色だけでステータスを表現して色覚多様性の人に伝わらない
- タグのバツボタンが小さすぎてスマホで消せない
- 数字バッジが2桁になったら円形が崩れて楕円になる
操作の結果を一時的にポップアップで知らせるやつ。「保存しました」「エラーが発生しました」などが代表例。
よくあるバグ
- 連続して発火すると複数重なって積み上がる
- 3秒で消えて、読み終わる前にすっと消えてしまう
- スマホのホームバー（iPhoneの下部）に被って×ボタンを押せない
- エラートーストが自動消滅してしまいユーザーが読めない
「今サイトのどこにいるか」を示すナビゲーション。階層の深いECサイトで「3階層上に戻りたい」ときに便利。
よくあるバグ
- ページ名が長くてスマホで折り返し、縦長になってスペースを圧迫する
- 現在地のページもリンクになっていて自分自身に遷移できてしまう
- セパレーター（›）が文字化けして□になる
- 構造化データ（JSON-LD）を設定し忘れてGoogleに認識されない
関連する情報をひとまとめにしたコンテナ。商品・記事・プロフィールなど「1つのもの」を表す単位として広く使われる。
よくあるバグ
- テキストの量が違うとカードの高さがバラバラになる
- 画像の縦横比がバラバラで並べたときにガタガタになる
- カード全体をリンクにしようとして a タグが入れ子になる
- ホバーのbox-shadowアニメーションでレイアウトがずれる（transformを使うべき）
大量のデータを複数ページに分けて表示するやつ。「1 2 3 … 12 ›」みたいな見た目で今どのページかを示す。
よくあるバグ
- 最初のページで「前へ」が押せてしまう（disabled 忘れ）
- URLにページ番号がないのでリロードで1ページ目に戻る
- スマホで全ページ番号が並んで画面からはみ出す
- データが0件のときもページネーションが「1」で表示される
三本線のアイコンをクリックするとナビゲーションが開くやつ。スマホで画面が狭いときにメニューをたたむために使う。形がハンバーガーに見えることからその名前。
よくあるバグ
- 開いているのに再度押しても閉じない（×アイコンへの切り替え忘れ）
- メニューが開いた状態でスクロールが背景に伝わる
- アニメーションなしでメニューが瞬間出現する
- メニュー外をタップしても閉じない
- タブレット幅でハンバーガーが出続けてメニューが余裕なのに隠れる
データを読み込んでいる間、実際のコンテンツの「骨格」を薄いグレーで先に表示するやつ。くるくるスピナーより「何が来るか」が分かって体感が速い。
よくあるバグ
- データが来た後もスケルトンが消えず、実コンテンツに重なる
- 実際のレイアウトとスケルトンの形が全然違ってガクッと変わる
- シマーアニメーションが重すぎてかえってカクつく
- エラー時のハンドリングがなく、スケルトンが永遠に表示され続ける
処理中であることを示すくるくる回るやつ。「何かが起きている」ことは伝えられるが、どのくらいかかるかは分からない。
よくあるバグ
- 処理が終わっても回り続ける（非表示切り替え忘れ）
- ボタンの上にスピナーを表示すると、ボタンが連打できてしまう
- CSSアニメーションが重いページで回転がカクつく
- 背景と色が似ていてスピナーが見えない
キーワードを入力してコンテンツを絞り込むやつ。虫眼鏡アイコンが定番。サジェスト（候補を表示するドロップダウン）が付くことも多い。
よくあるバグ
- 入力のたびにAPIを叩いてサーバーに負荷がかかる（debounce忘れ）
- 日本語変換中（IME入力中）にもサジェストが発火して文字が崩れる
- Enterキーで検索できない（form タグと submit の設定漏れ）
- クリアボタン（×）を押してもフォーカスが外れて結果が消えない
画面の端からスライドして出てくるパネル。フィルター・カート・通知一覧など、メインコンテンツを置き換えずに追加情報を見せたいときに使う。
よくあるバグ
- ドロワー内でスクロールしようとすると背景がスクロールされる
- スライドアニメーション中にコンテンツが一瞬チラつく
- 背景オーバーレイをタップしても閉じない
- ドロワーが開いているのに×ボタンが見切れてタップできない
- スマホの仮想キーボードが出るとドロワーが押し上げられて崩れる
画像やカードを横にスライドして表示するやつ。バナー・商品写真・レビューをコンパクトに並べるときに使う。ドットやボタンで今何枚目か分かる。
よくあるバグ
- 自動再生が速すぎて読む前に次のスライドに移動する
- スマホでスワイプしようとするとページがスクロールされる
- ループ設定で最後のスライドから最初に戻るときにガクッとする
- SEO的に非表示のスライドのコンテンツが評価されにくい
- 画像の高さが違うとスライドごとにレイアウトが揺れる