コピペで簡単！js使わずCSSのみでタブメニューを実装する方法

今回はjQueryなどのJavascriptライブラリを使わずCSSのみでタブメニューを実装する方法を解説します。
コピペで簡単に設置できますので、ぜひ試して下さい。

表示サンプル

上部に３つ横に並ぶタブボタンを押すと、下のパネルエリアの内容が変わります。

タブと連動して、下のパネルが変わります。

レスポンシブ対応で、スマホ表示の場合、縦に並びアコーディオンのような形で表示されます。

ライトプラン　詳細はこちら

動作サンプルページはこちら

HTML

<div class="content">
  <div class="tab">
    <input name="tabs" type="radio" id="tab-1" checked="checked" class="input">
    <label for="tab-1" class="tab-label">タブ1</label>
    <div class="tab-panel">
      <h2>タブ1の本文</h2>
      <p>ぶんも口の挨拶ドアめにかっこうが帰っ枝たない。またこんこん楽たたって写真たな。下手ましうことたはたそして象のくたくた団のときへはもちろんまじめでしたて、何かも鼻へなっられのました。やめすぎそこは畑を長いたながら今のセロの先生者に急い第六下たちのおねがいを来ながらいますた。</p>
    </div>
    <input name="tabs" type="radio" id="tab-2" class="input">
    <label for="tab-2" class="tab-label">タブ2</label>
    <div class="tab-panel">
      <h2>タブ2の本文</h2>
      <p>うちはこんどぶっつけてこいます。ゴーシュは五怒っみみずくのように行っばいな。かっこうは窓ゴーシュと何へ云いて来ます。駒は下がしばらくに飛びつきて音へ萱のようをぶっつけてとんとんからあわててごくごくゆうべでふみていまし。もうぱっとトマトをセロを飛ばしないまし。おれあんなににゴーシュを出して床を仕上げでた。トマトをなりましまし。「夜中にまわりだ。小屋、そこが一つ。云い。」ここは前の所のどう前のところを合わでませ。室はわくにご塩でしてゴーシュを楽屋をこぼしてまるでさっき出れなくときへやめないまし。</p>
    </div>
    <input name="tabs" type="radio" id="tab-3" class="input">
    <label for="tab-3" class="tab-label">タブ3</label>
    <div class="tab-panel">
      <h2>タブ3の本文</h2>
      <p>しいんとお世話置くと、行くから置きてときたて先生からところがテープのけろりと時しましまし。「さきい。裏よりなるた。しょっの。あなたもおまえをいっしょがしがだってこり外は黒い方だてぞ。」それは元気そうにくわえてよ子次に弾きやう音の鳥が云いと弾くとちがわからくださいな。窓はすわりてベロリが直しましです。何はそんなにセロもひどくものまして嵐もまもなくうかっことましでし。「さっきのさっきのすきを。</p>
    </div>
  </div>
</div>

CSS

@charset "UTF-8";
/*CSSのみでで作るタブ
---------------------------------------------------------------------------*/
/*tabの全体枠*/
.tab {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
  background: #efefef;
  border: 1px solid #ccc; }

/*inputを非表示にする*/
.input {
  position: absolute;
  opacity: 0; }

/*tabボタン部分*/
.tab-label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  margin-bottom: 0;
  transition: background 0.1s, color 0.1s; }

.tab-label:hover {
  background: #d8d8d8; }

.tab-label:active {
  background: #ccc; }

.input:checked + .tab-label {
  background: #fff;
  color: #000; }

@media (min-width: 600px) {
  .tab-label {
    width: auto; } }
/*tabの本文エリア*/
.tab-panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff; }

@media (min-width: 600px) {
  .tab-panel {
    order: 99; } }
.input:checked + .tab-label + .tab-panel {
  display: block; }

/*その他
---------------------------------------------------------------------------*/
.u-mb-20 {
  margin: 0 0 20px 0; }

.content {
  max-width: 800px;
  margin: 40px auto;
  padding: 10px; }

まとめ

Javascriptを使わなくてもタブの切り替えができます。
ぜひお試しください。

ライトプラン　詳細はこちら

動作サンプルページはこちら