CSSのみでタブ機能を実装しコンテンツの表示を切り替える方法

2018/4/13 WEB制作, Wordpressカスタマイズ 8

前回、CSSのみでトグルボタンを実装する方法を書きました。

CSSだけでシンプルなトグルボタンを作成しコンテンツを出し入れする方法

jQueryを使ったトグルボタン実装は結構簡単です。けれど、jQuery（JavaScript）を使うと多少なりとも、ページ...

nelog.jp

2018-04-11 11:54

今回は、「CSSのみで動作するタブ機能」の実装方法をシンプルにまとめてみました。

こんな感じのもの。

ページ1ページ2ページ3ページ4ページ5

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。

雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズツモシヅカニワラッテヰル

ある日の暮方の事である。一人の下人げにんが、羅生門の下で雨やみを待っていた。

私がウスウスと眼を覚ました時、こうした蜜蜂の唸るような音は、まだ、その弾力の深い余韻を、私の耳の穴の中にハッキリと引き残していた。

jQuery（JavaScript）で実装を行うよりは、多少動作が軽くなるかと思います。

CSSのみでタブ機能

以下は、CSSでタブ表示を行って、コンテンツの”表示/非表示”エリアを入替える方法です。

タブ機能のHTML

タブのHTMLとなるコードはこちら。

<div class="tabs">
  <input id="tab-1" type="radio" name="tab-radio" checked>
  <label class="tab-label" for="tab-1">ページ1</label>

  <input id="tab-2" type="radio" name="tab-radio">
  <label class="tab-label" for="tab-2">ページ2</label>

  <input id="tab-3" type="radio" name="tab-radio">
  <label class="tab-label" for="tab-3">ページ3</label>

  <input id="tab-4" type="radio" name="tab-radio">
  <label class="tab-label" for="tab-4">ページ4</label>

  <input id="tab-5" type="radio" name="tab-radio">
  <label class="tab-label" for="tab-5">ページ5</label>

  <div class="tab-content tab-1-content">
    私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。
  </div>
  <div class="tab-content tab-2-content">
    ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。
  </div>
  <div class="tab-content tab-3-content">
    雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ ツモシヅカニワラッテヰル
  </div>
  <div class="tab-content tab-4-content">
    ある日の暮方の事である。一人の下人げにんが、羅生門の下で雨やみを待っていた。
  </div>
  <div class="tab-content tab-5-content">
    私がウスウスと眼を覚ました時、こうした蜜蜂の唸るような音は、まだ、その弾力の深い余韻を、私の耳の穴の中にハッキリと引き残していた。
  </div>
</div>

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

</div>

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。

</div>

雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズツモシヅカニワラッテヰル

</div>

ある日の暮方の事である。一人の下人げにんが、羅生門の下で雨やみを待っていた。

</div>

私がウスウスと眼を覚ました時、こうした蜜蜂の唸るような音は、まだ、その弾力の深い余韻を、私の耳の穴の中にハッキリと引き残していた。

</div>

ポイントとしては「ラジオボタンのID属性」と「ラベルのfor属性」に同じ文字列を設定することで、両者を関連付けているところです。

上記のようなHTMLは、WordPressの投稿エディターから入力すると、ビジュアルエディターにより内容が書き換えられたり、表示する際にpタグ等で段落が勝手に付加されてしまうので、動作しない場合があります。

タブのCSSコード

タブの外観と動作を担うCSSはこちら。

/************************************
** CSSでタブ表示
************************************/
/* タブの外枠 */
.tabs {
  margin-top: 12px;
}

/* タブのスタイル */
.tabs .tab-label {
  display: inline-block;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #999;
  background-color: #f3f3f3;
  margin-left: 1px;
  margin-right: 1px;
  padding: 3px 6px;
  border-bottom: none;
  font-size: 0.9em;
}

/* タブにマウスカーソルがのったときフッター */
.tabs .tab-label:hover {
  opacity: 0.7;
}

/* ラジオボタンと内容を非表示 */
.tabs input[name="tab-radio"],
.tabs .tab-content {
  display: none;
}

/* タブ内容のスタイル */
.tabs .tab-content{
  border: 1px solid #999;
  padding: 10px;
  min-height: 200px;
}

/* 選択されているタブのコンテンツのみを表示 */
.tabs #tab-1:checked ~ .tab-1-content,
.tabs #tab-2:checked ~ .tab-2-content,
.tabs #tab-3:checked ~ .tab-3-content,
.tabs #tab-4:checked ~ .tab-4-content,
.tabs #tab-5:checked ~ .tab-5-content {
  display: block;
}

/* 選択されているタブのスタイルを変える */
.tabs input[name="tab-radio"]:checked + .tab-label {
  background-color: #fff;
}

/************************************

** CSSでタブ表示

************************************/

/* タブの外枠 */

.tabs {

margin-top: 12px;

}

/* タブのスタイル */

.tabs .tab-label {

display: inline-block;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

border: 1px solid #999;

background-color: #f3f3f3;

margin-left: 1px;

margin-right: 1px;

padding: 3px 6px;

border-bottom: none;

font-size: 0.9em;

}

/* タブにマウスカーソルがのったときフッター */

.tabs .tab-label:hover {

opacity: 0.7;

}

/* ラジオボタンと内容を非表示 */

.tabs input[name="tab-radio"],

.tabs .tab-content {

display: none;

}

/* タブ内容のスタイル */

.tabs .tab-content{

border: 1px solid #999;

padding: 10px;

min-height: 200px;

}

/* 選択されているタブのコンテンツのみを表示 */

.tabs #tab-1:checked ~ .tab-1-content,

.tabs #tab-2:checked ~ .tab-2-content,

.tabs #tab-3:checked ~ .tab-3-content,

.tabs #tab-4:checked ~ .tab-4-content,

.tabs #tab-5:checked ~ .tab-5-content {

display: block;

}

/* 選択されているタブのスタイルを変える */

.tabs input[name="tab-radio"]:checked + .tab-label {

background-color: #fff;

}

タブ動作のポイント

ポイントとなるのは以下の記述でしょうか。

/* 選択されているタブのコンテンツのみを表示 */
.tabs #tab-1:checked ~ .tab-1-content,
.tabs #tab-2:checked ~ .tab-2-content,
.tabs #tab-3:checked ~ .tab-3-content,
.tabs #tab-4:checked ~ .tab-4-content,
.tabs #tab-5:checked ~ .tab-5-content {
  display: block;
}

/* 選択されているタブのコンテンツのみを表示 */

.tabs #tab-1:checked ~ .tab-1-content,

.tabs #tab-2:checked ~ .tab-2-content,

.tabs #tab-3:checked ~ .tab-3-content,

.tabs #tab-4:checked ~ .tab-4-content,

.tabs #tab-5:checked ~ .tab-5-content {

display: block;

}

簡単に説明すると「.tabsクラス」の下にある「#tab-1 IDのラジオボタン」にチェックがついているとき、「#tab-1」以降にある「.tab-1-contentクラスの要素」を表示するといった記述になります（※番号1以外も同様です）。

~ というのは、「後にある要素」という意味です。

選択タブの色変更部分

あと、以下の + は、「隣接している要素」という意味です。

/* 選択されているタブのスタイルを変える */
.tabs input[name="tab-radio"]:checked + .tab-label {
  background-color: #fff;
}

/* 選択されているタブのスタイルを変える */

.tabs input[name="tab-radio"]:checked + .tab-label {

background-color: #fff;

}

なので上記の記述は、簡単に言うと「チェックがついているラジオボタンの隣のラベル要素の背景色を白にする」という意味のCSSになります。

動作確認

一応、HTMLをWordpress公式テーマ「Twenty Sixteen」のテンプレートファイルに挿入して動作確認してみました。

投稿画面からエディター等で挿入すると、タグの自動整形機能や、段落挿入機能により正常動作しないと思います。

あとは、テーマ（子テーマ）のstyle.cssにCSSを記入するだけです。

すると、以下のようにマウス操作でタブが切り替わる機能が実装されます。

まとめ

CSSを利用したタブ機能の利点として、以下のようなものが挙げられます。

jQuery（JavaScript）がなくても動作する（AMPページなどでも使える）
jQueryを使用したものよりは多少動作が速い
jQueryを利用しているものと比較すればライブラリを読み込む必要もない
CSSを読み込むだけで完結する

しかし以下のような難点もあります。

ラジオボタンとラベルにID（ユニークな文字列）を割り振る必要がある
同ページ内で複数利用するとなると、HTMLとCSSのID付けが面倒くさい
多少難解なCSSを書く必要がある
AMPページで利用する際はLazy Loadが動作しないので画像が表示されない（画像はデフォルトで表示されている部分以外は使用できない）

こいったことも踏まえた上で、「jQuery等を用いたタブ機能」と「CSSを用いたタブ機能」を使い分ける必要があるかと思います。

AMPページにおいてCSSタブで画像を表示する際は、タブ切り替え時に表示されないと思います。これは、AMPでは画像がLazy Loadされるので、表示するタイミングをとらえられないからだと思われます。AMPページでCSSタブを利用する際は、画像はまともに利用できないということを踏まえた上でご利用ください。

同時に読まれている記事

『CSSのみでタブ機能を実装しコンテンツの表示を切り替える方法』へのコメント

名前:たんたー投稿日：2018/04/12(木) 17:31:38 ID：e5aa4e767

いつもいつもお世話になっております。
ただ今cocoonを非常に有り難く使わせていただいております。
今回のcssでのタブ化の記事めちゃくちゃ有り難かったです！
そこで早速導入してみましたが、上手くいきません。
まず現状
メディアクエリを利用してスマホ表示時のみタブが表示できるようにしています。

起こった問題
①.実機のスマホ表示の際に、cocoonショートコードより挿入した「人気記事一覧」における順位が表示されない。　.例　1,2,3,4など　※PCでは表示されます。デベロッパの仮想スマホでも表示されていました。

②AMP化すると、PCでもスマホでも「人気記事一覧」の順位が表示されない

③AMP化し、スマホ表示時、「たんたーの戯言」のカテゴリ記事のサムネイルが消える

以上となります。
デベロッパーツールとにらめっこして、色々いじくりまわしていたのですが
原因がつかめませんでした。

参考に自身のサイトです。
https://takechannel.com/
わいひらさんが見られた際にわかりやすいように高速化設定は全て解除しております。

お忙しい中だとは重々承知しておりますので、少し時間が出来た時にでもご返事頂ければと思います。

タブ化はどうしてもしたかったので、今回の記事本当に有り難かったです。
有難うございます。
名前:たんたー投稿日：2018/04/12(木) 17:36:30 ID：e5aa4e767

補足です。
問題③の

③AMP化し、スマホ表示時、「たんたーの戯言」のカテゴリ記事のサムネイルが消える

ですが
こちらは正しくは
③AMP化し、スマホ表示時、「たんたーの戯言」タブに移動した際、カテゴリ記事のサムネイルが消えます。
こちらもcocoonのショートコードの新着記事一覧でカテゴリーを絞って表示しております。

補足以上となります。
もし、足りてない情報、状況がつかめないなどございましたらなんなりといって下さい。
名前:わいひら投稿日：2018/04/13(金) 11:48:14 ID：a65993fa1

①.実機のスマホ表示の際に、cocoonショートコードより挿入した「人気記事一覧」における順位が表示されない。　.例　1,2,3,4など　※PCでは表示されます。デベロッパの仮想スマホでも表示されていました。

これは、端末ブラウザーの仕様とかもあるのではないのでしょうか。PCや、仮想スマホで表示されているのであれば、必要なHTMLやCSSは出力されています。けれど、スマホブラウザが順位表示に対応していなければ、表示されない可能性もあります。

AMPでのタブについては、画像を使用するとまた変わってきます。AMPで画像は、Lazy Loadするので、それに対応できないのだと思います。
AMPでタブを利用しつつ、画像も表示するには、以下のような実装をする必要があるかと思います。
https://ampbyexample.com/advanced/tab_panels_with_amp-selector/

本文中にも、画像を使用する際には表示されない旨を追記しておこうと思います。
名前:たんたー投稿日：2018/04/13(金) 16:43:03 ID：9dc527611

AMPでタブを利用しつつ、画像も表示するには、以下のような実装をする必要があるかと思います。
https://ampbyexample.com/advanced/tab_panels_with_amp-selector/

ありがとうございます。
こちらの導入を検討していますが、これは、ampのみのタブ化でしょうか。
例えば、通常ページとampページを同じものにしたい場合は、記述が結構複雑なものになったりするでしょうか
ぱっと導入した感じだとampでは動きますが、非ampでは動作しなかったので、どうしようか考えている所です。

本文中にも、画像を使用する際には表示されない旨を追記しておこうと思います。

ありがとうございます。どうにかして通常とampで綺麗に表示できるように頑張ってみます。

cocoonの対応でもかなり忙しいのに、返答下さってありがとうございます。
名前:たんたー投稿日：2018/04/13(金) 17:05:14 ID：9dc527611

これに関してはcocoon機能なのでどうしようか迷いましたが、追記します

これは、端末ブラウザーの仕様とかもあるのではないのでしょうか。PCや、仮想スマホで表示されているのであれば、必要なHTMLやCSSは出力されています。けれど、スマホブラウザが順位表示に対応していなければ、表示されない可能性もあります。

これに関してですが、iphone6のios11とandroidの割と新しいものでsafariとchromeで試してみましたが、全滅でした。
基本的にスマホのブラウザでの順位表示はあきらめた方がいいでしょうか？
スマホはこれからのネットユーザーの主流になると思いますので、対応できそうなら頂ければと思います。

こちらに関しては、タブ化というよりcocoonの要望な感じがするので、追記という形にしました。
もし、これに関して突っ込んだ話はcocoonフォーラムでということであれば
再度フォーラムにて要望のほうに書き込ませて頂きます。
名前:わいひら投稿日：2018/04/14(土) 22:59:21 ID：1e5e39b35

こちらの導入を検討していますが、これは、ampのみのタブ化でしょうか。
例えば、通常ページとampページを同じものにしたい場合は、記述が結構複雑なものになったりするでしょうか

AMPページしか動作しないと思います。
ただ、通常ページにも、AMP用のスクリプトを整備すれば、利用できるようになるとは思いますが、面倒くさいと思います。

基本的にスマホのブラウザでの順位表示はあきらめた方がいいでしょうか？

手元の、かなり古いバージョンのAndroidエミュレーターでも表示されているので、不具合が再現できないので、ちょっと何とも言えないです。

不具合が再現出来れば、どうにかできるのですが、再現できない以上は、原因特定は難しいです。
名前:たんたー投稿日：2018/04/15(日) 16:31:06 ID：1b2855c36

AMPページしか動作しないと思います。
ただ、通常ページにも、AMP用のスクリプトを整備すれば、利用できるようになるとは思いますが、面倒くさいと思います。

スクリプト自体を整備しないとだめなんですね。まだまだ知識が足りないので、この辺はゆっくりとやっていくことにします。
お忙しい中返答ありがとうございます！

手元の、かなり古いバージョンのAndroidエミュレーターでも表示されているので、不具合が再現できないので、ちょっと何とも言えないです。

こちらのandroidエミュレーターでも順位の表示確認できました。
おそらく、iphone特有のものだと思います。

※画像貼り付けようと思ったけど方法がわからなかった・・・面目ないです

まだまだ日本はiphoneユーザーの割合が多いため、どうにかしてiphoneにも対応願いたいです。

iphoneはエミュレーターが存在しないため、難しいかもしれませんが、cocoonフォーラムでも要望があがってるように、iphoneのみの不具合が結構あるみたいです。
こちらに関しては既にタブは関係なくなっているので、次からはフォーラムに書きますね！

向こうの方がわいひらさんも一度に状況確認できるほかのiphoneユーザーも確認できると思いますので！！

お忙しい中ご丁寧に本当にありがとうございます！
もし、iphone関係で何かありましたら、検証とかもしますので、いってくださいね！
名前:わいひら投稿日：2018/04/19(木) 12:22:06 ID：81a8abb69

まだまだ日本はiphoneユーザーの割合が多いため、どうにかしてiphoneにも対応願いたいです。

一般ページでは、一応見えているのかなと思います。
というのも、Cocoonフォーラムに3000近い書き込みはありますが、そういったことは書き込まれたことはなかったと記憶しているので。

ただ、僕はiPhoneを持っていないので、CSSの問題点、もしくは解決方法を提示していただかないと、ちょと直しようがないかもしれません。

なので、どうしても気になる場合は、CocoonフォーラムのiPhoneユーザーさんに頼むのが最も効果的かもしれません。