ゆきのふ

タブの選択状態をURLに記憶できるサンプルコード。戻る・進むやページ更新でもリセットされず、常に最後に開いたタブを維持します。コピペでそのまま使える実装付き。

スクロール可能なタブUIの実装例。タブバーをマウスホイールやドラッグ、スマホのスワイプで横スクロール可能にし、クリックでパネルを切り替えられる。レスポンシブ対応で多数のタブを扱える完全サンプル。

縦型タブ（サイドバー風）UIの実装方法を紹介。タブを縦に並べてメニュー感覚で切替可能。ARIA対応・キーボード操作付きでアクセシブル。コピペできるCSS・HTML・JSの完全サンプル付き。

アイコンとテキストを組み合わせた水平タブUIを実装。ボタン型のカード風デザインで、クリックやキーボード操作に対応。ARIA対応・スコープ済みCSS付きで安心してコピペできる完全サンプル。

details / summary タグだけで作れるシンプルなタブUI。JSなしで動作し、必要に応じて「単一オープン」「矢印キー移動」も追加可能。デモとコピー用コード付き。

アクティブタブ直下に下線が走る「下線アニメーション付きタブ」をHTML/CSS/JSで実装。デモとコピペ用コード付き。矢印キー操作・横スクロールにも対応。

CSSの:targetだけでURL連動するタブ切替を実装。JS不要、コピペで導入、ID衝突回避の設計、初期表示/アクティブ強調のコツも解説。WordPress対応のデモと全文コード付き

CSSだけで作るラジオボタン方式のタブ切替。アクセシビリティ配慮・デモ付きで、コピペOKの軽量コードを解説。JS不要。

HTMLとCSSだけで実装できるアコーディオンのサンプルコード。details/summaryタグを活用し、＋／−のアイコン切替もCSSで制御。JavaScript不要でコピペしてすぐ使える実装方法を解説。

HTML・CSS・JavaScriptで実装するシンプルなアコーディオンUI。アクセシビリティ対応で、キーボード操作や単一展開機能も実装したサンプルコードを解説。