Web制作の中でよく使われるタブ切り替え機能。
実は、JavaScriptを使わなくても、HTMLとCSSだけで実装できるってご存知ですか？

今回は、CodePenで実際に作成した「HTML・CSSのみで動作するタブUI」をご紹介します。

タブ機能のポイント

今回作成したタブ機能の主な仕組みは以下の2点です。

• checkedの切り替えによる表示制御
• order: -1;でタブを上に配置

checkedの切り替えによる表示制御

各タブにはinput type="radio"を使用し、
クリックされることでcheckedが切り替わります。
その状態に応じて、CSSのセレクタ（例：input:checked ~ .tab-content）で表示内容を制御しています。
JavaScriptを使わずに、CSSだけで「切り替え」が可能になる方法です。

order: -1;でタブを上に配置

Flexboxを活用し、タブ部分の要素にorder: -1;を指定することで、
タブがコンテンツより上に表示されるように制御しています。
自然な並び順（HTMLでは下）でも、CSSで柔軟に見た目を調整できます。

実際の動作はこちら

以下の埋め込みから、実際に動作するタブUIをご確認いただけます

HTML・CSSだけでタブを作るメリット

• 読み込みが軽くなる（JS不要）
• 動作がシンプルでバグが少ない
• 保守性が高く、初心者でも修正しやすい
• フォームやアンケートUIなどにも応用しやすい

～タブUIの活用例～

• ブログのカテゴリ切り替え
• 商品説明ページの「詳細・レビュー・FAQ」切り替え
• プロフィールページの経歴・スキルなどの整理表示　など

ユーザーに情報をコンパクトに整理して届けることができるので、
離脱防止・回遊性アップにもつながります。

まとめ

HTMLとCSSだけでここまでできる！
というのを感じてもらえるシンプルなタブ機能、ぜひ自分のサイトにも取り入れてみてください。

また、この記事で紹介したCodePenのコードは自由にアレンジOKです！
レスポンシブ対応や、アニメーションを加えてカスタマイズしてみても楽しいですよ♪

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。