Tech · Code samples
技術別に探す、コピペで使えるコード例
使う技術ごとに、UIの実装サンプルとコードをまとめています。どれも動くプレビュー付きで、HTML・CSS・JavaScriptをそのままコピーして使えます。AIコーディング支援へ渡す日本語の指示文も、サンプルごとに用意しました。
技術から探す
JavaScriptなしで作るUIパーツ
JavaScriptを1行も使わずに動かすUIパーツ。
- アコーディオン（よくある質問）
- タブ切り替え
- モーダルダイアログ
- ローディング表示 4種
コピペで使えるUIパターン
ユーティリティクラスだけで組むUIパターン。
- ヒーローセクション
- 料金表（3カラム）
- お問い合わせフォーム
- 通知バナー 4色
jQueryを使わない書き方の対照表
jQueryでやっていたことを、素のJavaScriptで書き直す。
- 表示切替とクラス操作
- イベント委譲（動的に増える要素）
- 開閉アニメーション（slideToggle 相当）
- フォームの値をまとめて取る
GridとFlexboxの使い分け
GridとFlexboxで画面の骨格を組む。
- 管理画面の骨格
- 列数が自動で変わるカード一覧
- 中央寄せの4パターン
- 高さの揃わない敷き詰め
意味のある動きだけを付ける
transitionとkeyframesで動きを付ける。
- ホバーとフォーカスの演出
- 登場アニメーション
- スクロール連動
- 継ぎ目のない無限ループ
触る前に赤くしない入力検証
JavaScriptを書く前に、HTMLの標準機能で検証する。
- JavaScriptなしの検証
- エラー文を自分の言葉にする
- パスワード要件の可視化
- 複数ステップのフォーム
反転ではなく作り直す暗色設計
2つのテーマを、変数と color-scheme で切り替える。
- 2テーマをCSS変数で設計する
- light-dark() で1行にまとめる
- 3状態のテーマ切替
- 暗色で崩れるもの
端末に必要な1枚だけを配る
画面に合った1枚だけを配らせる。
- srcset と sizes で1枚だけ配る
- picture で構図ごと変える
- レイアウトを揺らさない
- 読み込み優先度の使い分け
モーダルを自作しない
モーダルは、自分で作らずブラウザに任せる。
- showModal() のモーダル
- method=dialog で戻り値を受け取る
- popover 属性で軽い重ね表示
- 横から出るドロワー
ビルドの要らない部品化
フレームワークなしで、再利用できる部品を作る。
- カスタム要素の最小構成
- Shadow DOM でスタイルを閉じ込める
- slot で中身を差し込む
- 属性の監視とプロパティ
画面幅ではなく親の幅で切り替える
画面幅ではなく、置かれた場所の幅で形を変える。
- 置き場所で形が変わるカード
- cqi で文字を親幅に追随させる
- 名前付きコンテナで祖先を選ぶ
- 本文とサイドバーに同じ部品を置く
遷移の動きをブラウザに任せる
画面の切り替わりを、ブラウザに補間させる。
- startViewTransition の最小構成
- 一覧から詳細へ、画像をつなぐ
- 並べ替えと削除をなめらかに
- 擬似要素で動きを差し替える
決まった型に流し込んで速く出す
決まった型に流し込んで、速く形にする。
- 12分割グリッドとブレークポイント
- カードとユーティリティクラス
- 標準検証を使ったフォーム
- ナビバー・ドロップダウン・モーダル
ライブラリなしで横に流して見せる
ライブラリを入れずに、横に流して見せる。
- scroll-snap だけの横送り
- 現在位置を IntersectionObserver で追う
- サムネイル連動のギャラリー
- 自動送りと、4つの停止条件
狭い画面でも読める表を作る
狭い画面でも読める表を、tableのまま作る。
- 横スクロールと見出し列の固定
- 狭い場所で行をカードに畳む
- 並べ替えと aria-sort
- 数字が比較できる組み方
欧文の既定値のまま組まない
欧文の既定値のままでは、日本語は読めない。
- 行間と字間を決める
- webフォントを載せずに組む
- 折り返しと禁則
- 縦書きと縦中横
デザイン例との違い
このサイトには入口が2つあります。技術別（このページ）は「Tailwindでどう書くか」「JavaScriptなしでどこまでできるか」という実装の方法から探す入口です。コードとその解説が主役で、見た目は最小限にしてあります。
もう一方のデザイン例は、ヒーローや料金表といった画面の型から探す入口で、現在 60 件を収録しています。こちらは完成した見た目とAIプロンプトが主役です。作りたい画面が決まっているならデザイン例、使う技術が決まっているなら技術別、と使い分けてください。