タブ切り替え
コピペですぐ使えるタブ切り替えのサンプルコードを動作・特徴別にまとめています。
無料ツール
タブ切り替えを自由に作成

タブ項目・サイズ・色・余白・初期表示などを設定して、HTML・CSS・JavaScriptを自動生成できます。

タブ切り替え作成ツールを使う
新しいタブで開きます

基本

基本のタブ切り替えを作る方法
HTML/CSSだけで動くタブ切り替えの作り方

アニメーション

3D回転するタブ切り替えを作る方法
フェードイン・フェードアウトで切り替わるタブ切り替えを作る方法
下線アニメーション付きタブ切り替えを作る方法

デザイン

タブ内の件数をバッジ表示するタブ切り替えを作る方法
アイコン付きタブ切り替えの作り方

レイアウト

縦型タブ切り替え（右タブ版）を作る方法
横スクロールするタブ切り替えを作る方法
縦型タブ切り替え（左タブ版）を作る方法

初期状態

最初から指定したタブが選択されたタブ切り替えを作る方法

自動

指定時間ごとにタブを自動で切り替える方法

操作

縦スクロールに連動して切り替わるタブを作る方法
クリック時に初回だけ内容を読み込むタブ切り替えを作る方法

状態維持

ページを移動しても開閉状態を記憶するタブ切り替えの作り方

コンテンツ

タブで画像ギャラリーを切り替える方法
タブで画像を切り替える方法
YouTube動画をタブ切り替えに表示する方法
PDFをタブ切り替えに表示する方法
iframeをタブ切り替えに表示する方法
Googleマップをタブ切り替えに表示する方法

入れ子

タブ切り替え機能付きドロワーメニューを作る方法
タブ切り替え内にタブ切り替えを作る方法

応用

FAQ・Q&A向けタブ切り替えの作り方