ゆきのふ

html/css/js

コピペで完結!モーダルウインドウ#08【ページ表示3秒後に出るモーダル】

ページ表示から3秒後に自動で開くモーダルの作り方を解説。ノーマル遅延表示やカウントダウン演出付きのコードをコピペで簡単導入できます。
html/css/js

コピペで完結!モーダルウインドウ#07【全画面オーバーレイ型】

画面全体を覆う全画面オーバーレイ型モーダルの作り方を解説。背景クリックやEscキーで閉じられ、開いている間は背景のスクロールも禁止。アクセシビリティ対応済みのHTML・CSS・JSコードをコピペでそのまま利用できます。
html/css/js

コピペで完結!モーダルウインドウ#06【画面下からスライドイン】

画面下からスライドインするボトムシート型モーダルの実装方法を、HTML・CSS・JavaScriptのサンプルコード付きで解説。開閉ボタンや背景クリック、Escキー対応、フォーカス制御まで含め、コピペでそのまま使える実用コードを紹介します。
html/css/js

コピペで完結!タブ切替 #15【入力フォーム用ステップ式タブ】

長い入力フォームをステップごとに分割し、タブと次へ/戻るボタンで直感的に進められるUIを実装。コピペで使えるCSS・HTML・JSコード付き。
html/css/js

コピペで完結!タブ切替 #14【スクロールで自動タブ切替できるタブ】

スクロールに合わせてタブが自動で切り替わるUIをコピペで実装!ヘッダー内タブ式ナビ+メガメニュー連動のデモとコード付き解説。
html/css/js

コピペで完結!タブ切替 #13【タブの入れ子に対応(ネストタブ)】

外側タブと内側タブの二重構造を持つネストタブの実装サンプル。カテゴリと詳細を切替表示でき、複数階層のUI整理に便利。ARIA対応・コピペで使える完全コード付き。
html/css/js

コピペで完結!タブ切替 #12【タブ内を集計してバッジで表示できるタブ】

タブ内の要素数を集計してバッジに表示するUIサンプル。未読数やタスク件数などを動的に見せられ、ギャラリーや通知機能に最適。ARIA対応・コピペで使える完全コード付き。
html/css/js

コピペで完結!タブ切替 #11【サムネで大画面スライド切替できるタブ】

サムネイルをクリックすると大画面のスライド画像が切り替わるUIサンプル。ギャラリーや商品カタログに最適で、タブとスライドが連動。ARIA対応&コピペで使える完全コード付き。
html/css/js

コピペで完結!タブ切替 #10【サムネで大画面切替できるタブ】

サムネイルをクリックすると大きな表示画像が切り替わるギャラリーUIの実装例。ARIA対応でアクセシブル、クリックやキーボード操作で直感的に操作可能。コピペで使える完全コード付き。
html/css/js

コピペで完結!タブ切替 #09【初期表示を速くするためのタブ】

タブ内コンテンツを初回クリック時にだけ読み込む「遅延読み込み(Lazy)」の実装解説。テンプレート/外部HTML/画像を選択時に挿入し、読み込み中はスピナー表示、2回目以降はキャッシュを再利用。ARIA対応のタブ構造と衝突しにくいスコープCSS、コピペ即利用できるHTML/JS付きでページ初期表示を高速化します。