HTML/CSSだけで動くタブ切り替えの作り方【HTML/CSS・サンプルコード付き】

タブ切り替え
2025.10.04

HTML/CSSだけで動くタブ切り替えの作り方

HTMLとCSSだけを使って、JavaScriptなしで動くタブ切り替えを作る方法を紹介します。このサンプルでは、ラジオボタンとCSSを利用して、選択したタブに対応するコンテンツだけを表示します。簡単な説明欄、商品情報、プロフィール、FAQなど、軽量なタブUIを作りたい場合に便利です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

HTML/CSSだけで動くタブ切り替え

ラジオボタンとCSSだけで、表示する内容を切り替えます。

HTMLでは、ラジオボタンとlabelを使ってタブを選択できる構造を作ります。
CSSでは、checked状態に合わせて表示するコンテンツを切り替えます。
JavaScriptを使わずに、軽量なタブ切り替えを作成できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>HTML/CSSだけで動くタブ切り替え</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- タブ全体を囲むエリア -->
  <div class="html-css-only-tab-switch_wrap">

    <!-- タイトル -->
    <div class="html-css-only-tab-switch_title">
      HTML/CSSだけで動くタブ切り替え
    </div>

    <!-- 説明文 -->
    <p class="html-css-only-tab-switch_text">
      ラジオボタンとCSSだけで、表示する内容を切り替えます。
    </p>

    <!-- タブの状態を管理するラジオボタン -->
    <input class="html-css-only-tab-switch_input" type="radio" name="html-css-only-tab-switch" id="html-css-only-tab-switch_html" checked>
    <input class="html-css-only-tab-switch_input" type="radio" name="html-css-only-tab-switch" id="html-css-only-tab-switch_css">
    <input class="html-css-only-tab-switch_input" type="radio" name="html-css-only-tab-switch" id="html-css-only-tab-switch_sample">

    <!-- タブボタン -->
    <div class="html-css-only-tab-switch_tabs">

      <label class="html-css-only-tab-switch_tab" for="html-css-only-tab-switch_html">
        HTML
      </label>

      <label class="html-css-only-tab-switch_tab" for="html-css-only-tab-switch_css">
        CSS
      </label>

      <label class="html-css-only-tab-switch_tab" for="html-css-only-tab-switch_sample">
        サンプル
      </label>

    </div>

    <!-- タブ内容全体 -->
    <div class="html-css-only-tab-switch_panels">

      <div class="html-css-only-tab-switch_panel html-css-only-tab-switch_panel-html">
        HTMLでは、ラジオボタンとlabelを使ってタブを選択できる構造を作ります。
      </div>

      <div class="html-css-only-tab-switch_panel html-css-only-tab-switch_panel-css">
        CSSでは、checked状態に合わせて表示するコンテンツを切り替えます。
      </div>

      <div class="html-css-only-tab-switch_panel html-css-only-tab-switch_panel-sample">
        JavaScriptを使わずに、軽量なタブ切り替えを作成できます。
      </div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSをそれぞれ別ファイルに分けて使用します。index.html、style.css を同じフォルダに配置してください。JavaScriptファイルは不要です。 

sample/
├── index.html
└── style.css

index.html をブラウザで開くと、HTMLとCSSだけで動くタブ切り替えを確認できます。ラジオボタンの checked 状態に合わせて、表示するコンテンツが切り替わります。

コメント