素のJS

技術

選択UI2026-09-129種

地図 ui デザイン 9選 — クリックでピンが落ちる位置選択

地図 ui デザインとは、配達先や待ち合わせ場所を「住所を書かせる」のではなく地図の上で指して決めてもらう画面の作りです。9つとも地図 API を使わず、CSS で描いた盤の上だけで動きます。

読む

embed2026-09-12

video player css とは、mp4 を1本も置かずに、再生ボタン・シークバー・音量つまみといった操作まわりだけを HTML と CSS で組み立てるやり方です。ここに並ぶ9つは絵ではなく、押せばその場で状態が変わります。

スマホジェスチャー操作とは、画面に触れた指が動いた距離と速さを読み取って表示を変える操作方法です。9つのうち2つは指を離した瞬間にはじめて結果が分かれ、1つは最後まで押し切らないと何も起きません。

ファイルツリー作成とは、エクスプローラーの左側にあるような階層リストを HTML と CSS、それに少しの JavaScript で組み立てることです。9つとも、フォルダは画像でも飾りでもなく実際に開き、移動も選択もマウスと矢印キーの両

選択UI2026-09-12

カレンダー css デザインというと、ブラウザが用意する小さな日付ポップアップの色を変えるところで終わりがちです。ここで作る9つは1か月をまるごと広げる月間グリッドそのもので、どれも本当に動きます。1つは月を送るときに2枚のグリッドが一緒

検索窓デザイン css の中でもコマンドパレットは、画面の上に浮かんでコマンドと文書を1つの欄から探すオーバーレイです。9つのうち1つは該当なしのときにむしろ行が増え、もう1つはリストを持たず入力欄だけを先に出します。

クッキー同意バナーとは、サイトがCookieを使うことを訪問者に知らせ、その選択を受け取るUIで、ここにある9つはバナー・パネル・モーダル・トーストのすべてを実際に押せる状態で作ったものです。そのうち1つは、規約を最後まで読まないとボタンが

円形プログレスバー css とは、棒の代わりに円に沿って値の分だけ埋めていく進捗表示で、SVGの円ひとつに stroke-dasharray と stroke-dashoffset の二つを与えるだけで作れます。九つとも、ボタンやスライダー

選択UI2026-09-119種

セレクトボックスデザイン css とは、ブラウザが勝手に描く標準の <select> を捨て、ボタンとリストを自分で組み立てる作り方です。9つのうち1つは最後までリストを開かず、その売り切れのマスは押しても動きません。実際に開くものだけを

ボタン2026-09-119種

css ボタンホバーアニメーションとは、ポインターが近づいたときにボタンが返す反応を、合図の種類ごとに整理したものです。9 つのうち 1 つは、押すとボタンが円になるまで縮んでスピナーが回り、チェックを描いてから元の幅へ戻ります。