UIコンポーネント

UIコンポーネントに分類されるWeb表現技法15件。アコーディオン、タブ切替（下線インジケーター付き）、モーダルダイアログ、トースト通知など。ライブデモとコピーできるコード付き。

見出しのクリックで本文を滑らかに開閉するアコーディオン。max-heightアニメとaria属性で、FAQやヘルプの折りたたみ表示に使えます。

選択タブへ下線インジケーターがスライド移動するタブUI。offsetLeft/Widthでの位置計算により、商品情報や設定画面の切替に使えます。

ネイティブ<dialog>要素を使ったモーダル。フォーカストラップやESC閉じがブラウザ標準で動作し、確認や課金導線に使えます。

成功・警告など種類別の通知を右下にスタック表示し、残り時間バーとともに自動消滅。操作後のフィードバック表示に使えます。

HTML5 Drag and Dropでリスト項目の順序を入れ替え。挿入位置のヒント線付きで、タスクの優先順位付けや並び替えUIに使えます。

自動再生・矢印・ドット・スワイプに対応した軽量カルーセル。translateXによる横移動で、バナーや特集の回遊表示に使えます。

上下左右の方向別に出る吹き出し型ツールチップ。CSSの擬似要素とdata属性が中心で、補足説明や用語解説に使えます。

進捗グラデ付きの単一スライダーと、2ハンドルの価格帯スライダー。input[type=range]の装飾で、フィルターや絞り込みに使えます。

IntersectionObserverで末尾到達を検知し追加読み込みするフィード。スピナーと上限制御付きで、タイムラインや一覧表示に使えます。

チェックボックスを土台にしたON/OFFスイッチと、インジケーターが動くピル型セグメント。設定画面や表示期間の切替に使えます。

完了・現在・未到達を色分けし前後に移動できるマルチステップUI。接続線とチェック表示で、購入手続きやオンボーディングに使えます。

画像タイルの帯をPointer Eventsで横にドラッグして探索するギャラリー。待機中はゆっくり自動で流れ、離すと慣性で滑り、端ではゆるく戻ります。作品集や横長の回遊コンテンツに使えます。

⌘K/Ctrl+Kで開く検索ボックス付きモーダル。入力でフィルタ、↑↓で候補移動、Enterで実行、Escで閉じます。アプリの素早い操作導線に使えます。

重なったカードをPointer Eventsでドラッグし、左右に振り切ると回転しながら飛んで消え次が前面に。しきい値未満は元に戻ります。マッチングや選別UIに使えます。

JS無しで:has()を使い、ラジオ選択でカードがハイライト＆詳細パネルが開き、同意チェックでボタンが活性風に変化。状態連動UIをCSSだけで実現します。