UIレシピ集
ボタン・カード・フォームなど、完成されたUI部品のレシピ52例。 すべて動くプレビュー付きで、各ページではコードをその場で書き換えて試せます。 使っているプロパティは辞書の解説ページにつながっています。
ボタン・操作
8例ローディング状態付きボタン
押すとスピナーが回り「保存中…」に変わるボタン。二重送信を防ぎ、aria-busyで処理中であることを支援技術にも伝えます。
コピー完了フィードバックボタン
コードスニペット横の「コピー」ボタン。押すと2秒間「コピーしました」に変わり、色でも完了を伝えるマイクロインタラクションです。
セグメンテッドコントロール
iOS風の切り替えスイッチをradioボタンで実装。見た目はCSSだけで作り、キーボード操作とフォーム送信はブラウザ標準のまま使えます。
フローティングアクションボタン
画面右下に追従する円形のアクションボタン（FAB）。position: fixedとinsetの1行で配置し、ホバーで浮き上がります。
よく使うボタンデザイン10選
モダンなWebサイトでよく使われるボタンデザインのパターン集です。基本的なボタンからトレンドのガラスモーフィズムまで、様々なシーンで使えるデザインテクニックを紹介します。
数量ステッパー（−／＋）
ECのカートで使う数量選択UI。number入力の標準スピナーを消して−／＋ボタンを自作し、最小・最大値でクランプします。
アイコンだけのボタン
お気に入り・共有・メニューなどのアイコンボタン。44pxのタップ領域とaria-labelで、小さく見えても押しやすく意味が伝わるボタンにします。
連結ボタングループ
「日・週・月」のような切り替えに使う連結ボタン。枠線を1px重ねて一体化し、両端だけ:first-child/:last-childで角丸にします。
カード
8例記事カード（画像＋タグ）
ブログ一覧で使う記事カード。サムネイル・タグ・タイトル・抜粋・日付の定番構成を、aspect-ratioとoverflowで崩れないように組みます。
プロフィールカード
アバター・名前・肩書き・フォローボタンを縦に積んだプロフィールカード。円形アバターと中央揃えの基本形です。
横並びメディアカード
サムネイルが左、テキストが右の横並びカード。flex-shrink: 0で画像の潰れを防ぎ、長いタイトルは省略記号で丸めます。
ホバーで詳細が現れるカード
ホバーまたはキーボードフォーカスで、下からオーバーレイがスライドして詳細が現れるカード。focus-within対応でキーボードでも使えます。
おしゃれな料金テーブルデザイン
プランやサービスの料金表示に使えるモダンな料金テーブルデザインです。カードスタイルとホバー効果、人気プランの強調表示などを組み合わせた実用的なデザインテクニックです。
統計カード（KPI表示）
ダッシュボードで使う数値カード。tabular-numsで桁を揃え、増減は色と矢印記号の両方で伝える色覚フレンドリーな作りです。
商品カード（星評価・価格つき）
EC一覧で使う商品カード。正方形サムネイル・星評価・税込価格・カートボタンの定番構成で、評価はaria-labelで数値も伝えます。
お客様の声カード
LPで使う推薦文（テスティモニアル）カード。blockquoteの正しいマークアップに、大きな引用符の装飾とアバター付き署名を組み合わせます。
フォーム
7例フローティングラベル入力欄
フォーカスまたは入力済みのときにラベルが小さく上へ移動する入力欄。placeholderと:placeholder-shownを使いJSなしで実現します。
リアルタイムバリデーション表示
入力し終えてから初めてエラーを表示するメール入力欄。:user-invalidと:has()により、JSなしで「入力前に怒らない」検証UIを作ります。
カスタムチェックボックス
appearance: noneでブラウザ標準の見た目を外し、input要素自体をデザインするチェックボックス。キーボード操作もラベル連動もそのまま生きます。
スタイル済みレンジスライダー
音量調整などに使うrangeスライダーの装飾。appearance: noneでトラックとつまみを自作し、ブラウザごとの見た目の差をなくします。
検索ボックス（クリアボタン付き）
アイコンとクリアボタンを内蔵した検索入力欄。ブラウザごとに見た目が違う標準の×ボタンを消して、自前のクリアに統一します。
カスタムセレクトボックス
appearance: noneで標準の見た目を外し、矢印を自作したセレクトボックス。ブラウザ間の見た目の差をなくしつつ、キーボード操作は標準のままです。
入力に合わせて伸びるテキストエリア
field-sizing: contentだけで、入力量に応じて高さが自動で伸びるテキストエリア。従来JSが必須だった挙動がCSS1行になりました。
ナビゲーション
8例パンくずリスト
現在地を示すパンくずリスト。olとaria-labelで意味づけし、区切り記号はCSSの擬似要素で入れるためHTMLが汚れません。
CSSのみのタブ切り替え
radioボタンと:has()だけで作るタブUI。JSなしでパネルが切り替わり、キーボードの矢印キー操作もradio標準のまま使えます。
ドロワーメニュー
ハンバーガーボタンで左からスライドして開くドロワー。transformでの開閉と背景オーバーレイ、aria-expandedの更新を最小のJSで行います。
ページネーション
記事一覧の下に置くページ送りナビ。現在ページはaria-current="page"で示し、タップしやすい36px四方のリンクをgapで等間隔に並べます。
シンプルなドロップダウンメニュー
CSSだけで実装できるシンプルなドロップダウンメニューのテクニックです。ホバーやフォーカスでメニューを表示し、ナビゲーションやアクションリストに使えます。
ページ内目次（スムーススクロール）
記事の目次からページ内リンクで滑らかに移動するナビ。scroll-behaviorとscroll-marginの2プロパティで、JSなしで完成します。
ステップインジケーター
購入フローなどの進捗を示すステップ表示。番号の丸を線でつなぎ、完了・現在地・未到達を色分けします。現在地はaria-currentで伝えます。
ページトップへ戻るボタン
右下に固定される「↑ トップへ」ボタン。アンカーリンクとscroll-behaviorだけのJSなし実装で、どのページにもすぐ足せます。
表示・フィードバック
11例モーダルダイアログ
HTML標準の<dialog>要素で作るモーダル。フォーカス管理とEscで閉じる挙動はブラウザ任せにでき、JSは開閉の数行だけです。
ツールチップ（CSSのみ）
用語にホバーまたはフォーカスすると上に説明が浮かぶツールチップ。opacityとvisibilityの併用でJSなしのフェード表示を実現します。
アコーディオン（FAQ）
HTML標準の<details>で作る開閉式FAQ。開閉ロジックはブラウザ任せで、CSSは見た目と「＋」印の回転だけを担当します。
トースト通知
画面右下にスライドインする通知トースト。role="status"で支援技術にも伝え、prefers-reduced-motionでは動きなしで表示します。
テーブルで横スクロール可能にする
画面幅が狭い時にテーブル全体を横スクロールできるようにするテクニックです。レスポンシブ対応やデータ量の多い表で便利です。
バッジ・通知ドット
アイコン右上の未読数バッジと、NEW・SALEなどのラベルバッジ。数はaria-labelで伝え、2桁でも崩れないmin-width設計にします。
アラート・コールアウト4種
情報・成功・注意・エラーの4種類のメッセージ枠。色だけに頼らず、アイコンと接頭辞テキストの3重で種類を伝える設計です。
プログレスバー
HTML標準の<progress>要素をスタイリングした進捗バー。意味付けはブラウザ任せで、装飾だけをCSSで整えます。
縦タイムライン
配送状況や更新履歴に使う縦のタイムライン。点と線は疑似要素だけで描き、リスト構造とtime要素で意味も正しく保ちます。
料金プラン比較表
機能×プランの比較テーブル。scope属性で行列の対応を正しく伝え、おすすめ列の縦ハイライトと✓/×の色分けで見やすくします。
チャット吹き出し
メッセージUIの吹き出し。相手は左・自分は右に寄せ、発話者側の下角だけborder-radiusを小さくするモダンな尻尾表現です。
レイアウトパターン
10例左右片方だけinner幅を超えて横幅いっぱいにする
親のpaddingやmax-widthに制限されず、片側だけ画面端まで背景や装飾を広げたい時に使えるテクニックです。主にカードやセクションの背景装飾などで活躍します。
子要素の高さを揃えてコンテンツを上下中央
複数の子要素を同じ高さに揃えつつ、各子要素内のコンテンツを上下中央に配置するテクニックです。カードレイアウトやリストでよく使います。
ヒーローセクション
ファーストビューの中央寄せヒーロー。place-itemsによる一発センタリングと、clamp()による画面幅連動の見出しサイズが柱です。
聖杯レイアウト（Grid）
ヘッダー・サイドバー・メイン・フッターの全体骨格をgrid-template-areasで組む定番構成。エリア名の並びがそのまま画面の設計図になります。
レスポンシブカードグリッド
メディアクエリなしで列数が自動調整されるカードグリッド。repeat(auto-fit, minmax())の1行がこのレシピの本体です。
スティッキーヘッダー＋最下部フッター
スクロールしても上部に残る半透明ヘッダーと、内容が少なくても最下部に付くフッター。ページ全体骨格の実用テンプレートです。
左右分割ヒーロー
画像半分・テキスト半分の2カラムヒーロー。gridの2カラムを、狭い画面ではメディアクエリで縦積みに切り替える定番構成です。
ログイン画面の骨格
画面中央にフォームカードを置く認証ページの骨格。place-itemsの中央配置とmax-widthで、どの画面幅でも整うテンプレートです。
コンテナクエリで変形するカード
置かれた場所の幅に応じて縦型⇄横型に切り替わるカード。ビューポートではなく親要素を基準にする@containerの実践例です。
画像ギャラリー（メイン＋タイル）
1枚目を大きく見せるタイル型フォトギャラリー。grid-column/grid-rowのspan指定だけで、雑誌のような変則グリッドが作れます。