スライダー コピペで完結！GU公式サイト風：縦横に動くフルスクリーンスライダー
GU公式サイトのように「縦にも横にも動く」フルスクリーンスライダーを完全再現。カテゴリごとの横スワイプと縦スクロールを組み合わせ、無限ループ・ドットナビ・ロック制御付きでそのままコピペ動作。WebデザインやUI演出に最適な実装コード付き解説。
ゆきのふ
スライダー 
アコーディオン FAQ・Q&A向けアコーディオンの作り方【HTML/CSS/JavaScript・サンプルコード付き】
FAQページやQ&Aセクションに最適なアコーディオン実装コード。完全スコープ化された設計で、＋アイコンがクリックで×に変化。ARIA対応でキーボード操作も可能な、軽量かつモダンなサンプルです。
ページネーション 最初・最後へ移動できるページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
長い入力フォームをステップごとに分割し、タブと次へ/戻るボタンで直感的に進められるUIを実装。コピペで使えるCSS・HTML・JSコード付き。
タブ切り替え 縦スクロールに連動して切り替わるタブを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールに合わせてタブが自動で切り替わるUIをコピペで実装！ヘッダー内タブ式ナビ＋メガメニュー連動のデモとコード付き解説。
タブ切り替え タブ切り替え内にタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
外側タブと内側タブの二重構造を持つネストタブの実装サンプル。カテゴリと詳細を切替表示でき、複数階層のUI整理に便利。ARIA対応・コピペで使える完全コード付き。
タブ切り替え タブ内の件数をバッジ表示するタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
タブ内の要素数を集計してバッジに表示するUIサンプル。未読数やタスク件数などを動的に見せられ、ギャラリーや通知機能に最適。ARIA対応・コピペで使える完全コード付き。
タブ切り替え クリック時に初回だけ内容を読み込むタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
タブ内コンテンツを初回クリック時にだけ読み込む「遅延読み込み（Lazy）」の実装解説。テンプレート/外部HTML/画像を選択時に挿入し、読み込み中はスピナー表示、2回目以降はキャッシュを再利用。ARIA対応のタブ構造と衝突しにくいスコープCSS、コピペ即利用できるHTML/JS付きでページ初期表示を高速化します。
タブ切り替え ページを移動しても開閉状態を記憶するタブ切り替えの作り方【HTML/CSS/JavaScript・サンプルコード付き】
タブの選択状態をURLに記憶できるサンプルコード。戻る・進むやページ更新でもリセットされず、常に最後に開いたタブを維持します。コピペでそのまま使える実装付き。
タブ切り替え 横スクロールするタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロール可能なタブUIの実装例。タブバーをマウスホイールやドラッグ、スマホのスワイプで横スクロール可能にし、クリックでパネルを切り替えられる。レスポンシブ対応で多数のタブを扱える完全サンプル。
タブ切り替え 縦型タブ切り替え（左タブ版）を作る方法【HTML/CSS/JavaScript・サンプルコード付き】
縦型タブ（サイドバー風）UIの実装方法を紹介。タブを縦に並べてメニュー感覚で切替可能。ARIA対応・キーボード操作付きでアクセシブル。コピペできるCSS・HTML・JSの完全サンプル付き。