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

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

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

基本

基本のタブ切り替えの作り方｜JavaScriptを使う方法とHTML/CSSのみの方法

アニメーション

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

レイアウト

タブ部分だけを横スクロールできるタブ切り替えの作り方
縦型タブ切り替えを左右に配置する方法

初期状態

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

自動

タブごとに表示時間を指定して自動切り替えする方法

操作

縦スクロールに連動して切り替わるタブを作る方法
ページの読み込みを軽くする！初回クリック時だけコンテンツを読み込むタブ切り替えの作り方
タブ部分だけを横スクロールできるタブ切り替えの作り方

状態維持

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

コンテンツ

サムネイル画像をクリックして表示を切り替えるタブの作り方
iframeでGoogleマップ・YouTube・PDF・Webページをタブ切り替えで表示する方法

入れ子

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