フォーム

用途

選択UI2026-09-119種

カレンダー選択 UI 9選 — コピペOK

カレンダー選択 UI は、値一つではなく開始日と終了日のような範囲をまとめて選ばせる部品です。セグメントコントロールに続き、範囲・アバター・検索・ホイール・比率まで、実際の実装で詰まりやすい選択UI9種を、コードとともにまとめました。

読む

入力UI2026-09-11

会員登録フォームデザインの良し悪しは送信ボタンではなく入力欄で決まります。ここに並べた9つは、登録画面が実際に求める入力欄で、メールアドレス欄からクリアボタンまで、コードを貼ればそのまま動きます。

入力UI2026-09-11

入力欄デザインとは、電話番号やカード番号、数量、タグのように会員登録や購入フォームでよく使うのに、素のHTMLだけでは思うように動かない入力ウィジェットのことです。9個のうち5個(タグ・自動伸長・ドラッグ&ドロップ・再送信タイマー・リアル

選択UI2026-09-11

セグメントコントロールとは、iOSの設定画面でよく見る、いくつかの選択肢から一つを選ぶと背景のピルがその位置までスライドするタブ切り替えボタンです。セグメントコントロールから絵文字リアクション・カラースウォッチまで、名前は知らなくてもアプリ

ログイン画面デザインはメールと入力欄・ボタンだけに見えますが、実際にはカードの質感・画面分割・ステップ進行まで9つの小さな判断でできています。9つのうち1つは、画面をぼかすと同時にモーダルを重ねて表示し、セッション切れを伝えます。会員登録

フォームでパスワードを間違えて送信すると、入力欄が左右にぷるぷる揺れて枠が赤く光る場面を見たことはないでしょうか。これがCSS 揺れるアニメーションで、JavaScriptを足さずCSSのキーフレームだけで動きます。入力欄・チェックボック

css 入力フォームのアニメーションは、クリックする前・クリックした瞬間・値を入力し終えたあとまで、ブラウザがすでに持っている:focus:focus-within:placeholder-shown:valid:invalidという状態を

ラジオボタンチェックボックス css カスタムは、ブラウザ標準の丸いラジオボタンと四角いチェックボックスのinput要素は消さずに残し、隣に置いた図形だけを:checkedひとつで描き直す手法です。九つ集め、そのうち一つは四角いチェックボ

css トグルスイッチは、チェックボックス一つで実際にオン・オフができ、トラックとノブの位置・色・アイコンだけを変えて見た目を作るコントロールです。ここでは9種類を集め、どれもtransformとopacityを軸にしたコードで組みました。

css ツールチップ吹き出しは、ボタンやアイコンにカーソルを合わせると短い説明が浮かび上がる小さな部品です。今回は9種類を選び、位置合わせの基本からCSS Anchor PositioningやPopover APIといった新しい仕組みま