【コピペOK】CSSだけでタブを実装！JSなしでサイトを高速化する方法【初心者向け】

「Webページにタブ切り替えを実装したいけど、JavaScriptは苦手…」
「プラグインを増やさずに、サイトを軽く保ちたい」

そんな悩みを抱えていませんか？
この記事では、JavaScriptを一切使わず、HTMLのラジオボタンとCSSだけでタブUIを実装する方法を、初心者にも分かりやすく解説します。
コピペで使えるコードはもちろん、なぜそれで動くのかという仕組みから、実用的なデザインのカスタマイズ例まで紹介。
この記事を読めば、誰でも軽量で高速なタブ機能を安全に実装できます。

なぜJS不要？CSSだけでタブを実装する3つのメリット

タブ切り替えはJavaScriptを使うのが一般的ですが、あえてCSSだけで実装することには、特にパフォーマンスやメンテナンスの面で大きなメリットがあります。

① サイトが高速化する（脱jQuery・パフォーマンス向上）

最大のメリットは、サイトの表示が速くなることです。
JavaScript、特にjQueryのようなライブラリは、読み込むファイルサイズが大きく、ページの表示速度に影響を与えることがあります。
CSSのみで実装すれば、余計なファイルを読み込む必要がなくなり、サイト全体の軽量化とパフォーマンス向上に繋がります。
これは「脱jQuery」の流れにも沿った、現代的なアプローチです。
Googleがサイトのランキング要因としてページの表示速度を重視していることも、このアプローチの重要性を裏付けています。

② HTML/CSSの知識だけで実装できる

JavaScriptの学習コストは、HTMLやCSSに比べて高いと感じる方も少なくありません。
「プログラミングは少し苦手…」という初心者の方や、Web担当者、デザイナーの方でも、この記事で紹介する方法ならHTMLとCSSの知識だけで実装可能です。
エラーを恐れずに、手軽にリッチなUIに挑戦できます。

③ 他のスクリプトと干渉する心配がない

WordPressのプラグインや既存のJavaScriptと、新しく追加したスクリプトが干渉（コンフリクト）して、サイトの表示が崩れてしまうことがあります。
CSSだけで完結するこの方法は、他のスクリプトに影響を与えることがないため、非常に安全に導入できるのが強みです。
急な修正依頼でも、安心して実装できます。

【コピペOK】ラジオボタン式タブの基本コードと3ステップ実装手順

それでは、実際にラジオボタンを使ったタブを実装していきましょう。
以下のコードをコピーして貼り付けるだけで、基本的なタブが完成します。

完成デモ：まずは実際の動きを確認しよう

まずは、これから作成するタブの完成形イメージです。各タブをクリックすると、対応するコンテンツが表示されます。

See the Pen ラジオボタンだけでタブ切り替えをする by take it easy (@take-it-easy) on CodePen.

Step1. HTML：ラジオボタンとコンテンツを用意する

まず、タブの骨格となるHTMLを記述します。
ポイントは、非表示にするinput type="radio"と、タブメニューになるlabel、そして表示するコンテンツdivを準備することです。

<div class="tab-area">
  <!-- ラジオボタン（ここはCSSで非表示にする） -->
  <input type="radio" name="tab-radio" class="tab-radio" id="tab01" checked>
  <input type="radio" name="tab-radio" class="tab-radio" id="tab02">
  <input type="radio" name="tab-radio" class="tab-radio" id="tab03">

  <!-- タブメニュー（labelタグで作成） -->
  <label for="tab01" class="tab-menu" id="tabMenu01">タブ1</label>
  <label for="tab02" class="tab-menu" id="tabMenu02">タブ2</label>
  <label for="tab03" class="tab-menu" id="tabMenu03">タブ3</label>

  <!-- コンテンツ -->
  <div class="tab-content-item" id="tabContent01">
    <p>タブ1のコンテンツです。自由な内容を記述できます。</p>
  </div>
  <div class="tab-content-item" id="tabContent02">
    <p>タブ2のコンテンツです。自由な内容を記述できます。</p>
  </div>
  <div class="tab-content-item" id="tabContent03">
    <p>タブ3のコンテンツです。自由な内容を記述できます。</p>
  </div>
</div>

ポイント：
labelのfor属性の値と、inputのid属性の値を同じにすることで、2つを紐付けます。
これにより、label（タブメニュー）をクリックすると、対応するinput（ラジオボタン）にチェックが入ります。

Step2. CSS：基本のスタイルと表示・非表示を設定する

次に、CSSで見た目を整え、タブの切り替え機能を実装します。

/* タブエリア全体 */
.tab-area {
  width: 90%;
  margin: 10px auto 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* ラジオボタンは画面に表示しない */
.tab-radio {
  display: none;
}

/* タブメニュー部分 */
.tab-menu {
  display: block;
  float: left;
  width: calc(100% / 3); /* タブの数で割る */
  text-align: center;
  padding: 1em 0;
  background-color: #f2f2f2;
  border-bottom: 3px solid #ccc;
  cursor: pointer; /* クリックできることを示す */
  transition: background-color 0.2s; /* 背景色の変化を滑らかに */
}

/* タブメニューにカーソルが乗った時 */
.tab-menu:hover {
  opacity: 0.8;
}

/* コンテンツは最初はすべて非表示 */
.tab-content-item {
  display: none;
  padding: 20px;
  clear: both; /* floatを解除 */
}

/* ▼ここからが切り替えの核となる部分▼ */

/* チェックされたラジオボタンに続くコンテンツを表示 */
#tab01:checked ~ #tabContent01,
#tab02:checked ~ #tabContent02,
#tab03:checked ~ #tabContent03 {
  display: block;
}

/* チェックされたラジオボタンに対応するタブメニューのスタイルを変える */
#tab01:checked ~ #tabMenu01,
#tab02:checked ~ #tabMenu02,
#tab03:checked ~ #tabMenu03 {
  background-color: #FF9999;
  border-color: #FF6666;
  color: white;
}

Step3. 確認：ブラウザで表示してクリックしてみる

作成したHTMLとCSSを保存し、ブラウザでHTMLファイルを開いてみましょう。
タブをクリックして、コンテンツが正しく切り替われば成功です。

なぜ動く？ラジオボタンでタブが切り替わる仕組み

「コピペで動いたけど、どういう理屈なんだろう？」と疑問に思った方のために、このCSSタブが動く仕組みを解説します。
この仕組みを理解すると、他の実装にも応用できます。

主役は非表示のinput type=”radio”

タブ機能の心臓部は、HTMLにあるinput type="radio"です。
ラジオボタンは、同じname属性を持つグループの中から一つしか選択できない、という性質を持っています。
この「一つだけ選ばれる」という性質をタブ切り替えに応用しています。

labelタグのfor属性がクリックの架け橋に

ラジオボタン自体はdisplay: none;で非表示にしていますが、labelタグのfor属性を使って、クリック可能なタブメニューと紐付けています。
for="tab01"と書かれたlabelをクリックすると、id="tab01"を持つラジオボタンがチェックされる、という関係です。

（差別化ポイント）CSSの~（一般兄弟セレクタ）が表示を切り替える魔法

最も重要なのが、CSSの :checked疑似クラスと、~（一般兄弟セレクタ）の組み合わせです。

• :checked：ラジオボタンやチェックボックスが「選択された状態」を表します。
• ~（一般兄弟セレクタ）：指定した要素以降にある、同じ階層の兄弟要素すべてを選択します。

つまり、#tab01:checked ~ #tabContent01というCSSは、「IDがtab01の要素（ラジオボタン）がチェックされたら、それ以降にあるIDがtabContent01の要素（コンテンツ）のスタイルを適用して」という意味になります。

これで、display: none;だったコンテンツがdisplay: block;に変わり、画面に表示されるという仕組みです。より詳しくは、MDNのドキュメントも参考にしてください。

【実例で学ぶ】CSSを応用したタブデザインのカスタマイズ術

基本のタブが作れたら、次はデザインをカスタマイズしてみましょう。ここではHTMLとCSSだけで実装できる3つのデザインパターンをご紹介します。

実例1：シンプルで使いやすい「フラットデザイン」

影やグラデーションを使わない、シンプルでモダンなデザインです。
CSSのbox-shadowを消し、背景色と文字色を調整するだけで実装できます。

See the Pen ラジオボタンだけでタブ切り替えをする by take it easy (@take-it-easy) on CodePen.

実例2：選択中のタブが際立つ「アンダーライン風デザイン」

アクティブなタブの下にだけ太い線を表示するデザインです。
非アクティブなタブのborder-bottomを細く（または無くし）、アクティブなタブのborder-bottomを太く強調します。

See the Pen ラジオボタンだけでタブ切り替えをする by take it easy (@take-it-easy) on CodePen.

実例3：クリックが楽しくなる「ふんわりアニメーション」

transitionプロパティを使って、コンテンツが「ふわっ」と表示されるアニメーションを追加します。tab-content-itemにtransition: opacity 0.5s;などを追加し、表示する際にopacity: 1;とすることで実装できます。

See the Pen ラジオボタンだけでタブ切り替えをする by take it easy (@take-it-easy) on CodePen.

【ケーススタディ】WordPressにプラグインなしで実装する方法

このテクニックは、WordPressでもプラグインなしで簡単に導入できます。サイトの表示速度を気にする方に特におすすめです。

ブロックエディタの「カスタムHTML」にコピペするだけの簡単手順

WordPressのブロックエディタ（Gutenberg）を使えば、テーマファイルを編集する危険を冒すことなく、安全にタブを実装できます。

1. 投稿または固定ページの編集画面を開きます。
2. タブを挿入したい場所で「＋」アイコンをクリックし、「カスタムHTML」ブロックを検索して追加します。
3. 先ほど紹介したHTMLコードを、そのままカスタムHTMLブロックに貼り付けます。
4. 次にCSSです。WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」を開き、CSSコードを貼り付けます。
5. 最後に「公開」ボタンを押せば完了です。

テーマファイルを編集する場合の注意点とバックアップの重要性

もしブロックエディタを使わず、テーマファイル（page.phpなど）を直接編集する場合は、必ず子テーマを作成し、そちらを編集するようにしてください。
親テーマを直接編集すると、テーマのアップデート時に変更内容がすべて消えてしまいます。
また、作業前には必ずバックアップを取得しておきましょう。

FAQ

まとめ

今回は、JavaScriptを使わずにラジオボタンとCSSだけでタブUIを実装する方法をご紹介しました。
この方法なら、サイトのパフォーマンスを落とすことなく、初心者でも安全かつ手軽にリッチな表現が可能です。
基本のコードをベースに、デザインのカスタマイズやWordPressへの実装にもぜひ挑戦してみてください。

この記事が、あなたのWeb制作の助けになれば幸いです。