前回、CSSのみでトグルボタンを実装する方法を書きました。
jQueryを使ったトグルボタン実装は結構簡単です。
けれど、jQuery（JavaScript）を使うと多少なりとも、ページ...
2018-04-11 11:54
今回は、「CSSのみで動作するタブ機能」の実装方法をシンプルにまとめてみました。
こんな感じのもの。
私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。
雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ ツモシヅカニワラッテヰル
ある日の暮方の事である。一人の下人げにんが、羅生門の下で雨やみを待っていた。
私がウスウスと眼を覚ました時、こうした蜜蜂の唸るような音は、まだ、その弾力の深い余韻を、私の耳の穴の中にハッキリと引き残していた。
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>
ポイントとしては「ラジオボタンの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;
}
タブ動作のポイント
ポイントとなるのは以下の記述でしょうか。
/* 選択されているタブのコンテンツのみを表示 */
.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;
}
なので上記の記述は、簡単に言うと「チェックがついているラジオボタンの隣のラベル要素の背景色を白にする」という意味の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タブを利用する際は、画像はまともに利用できないということを踏まえた上でご利用ください。
いつもいつもお世話になっております。
ただ今cocoonを非常に有り難く使わせていただいております。
今回のcssでのタブ化の記事めちゃくちゃ有り難かったです！
そこで早速導入してみましたが、上手くいきません。
まず現状
メディアクエリを利用してスマホ表示時のみタブが表示できるようにしています。
起こった問題
①.実機のスマホ表示の際に、cocoonショートコードより挿入した「人気記事一覧」における順位が表示されない。 .例 1,2,3,4など ※PCでは表示されます。デベロッパの仮想スマホでも表示されていました。
②AMP化すると、PCでもスマホでも「人気記事一覧」の順位が表示されない
③AMP化し、スマホ表示時、「たんたーの戯言」のカテゴリ記事のサムネイルが消える
以上となります。
デベロッパーツールとにらめっこして、色々いじくりまわしていたのですが
原因がつかめませんでした。
参考に自身のサイトです。
https://takechannel.com/
わいひらさんが見られた際にわかりやすいように高速化設定は全て解除しております。
お忙しい中だとは重々承知しておりますので、少し時間が出来た時にでもご返事頂ければと思います。
タブ化はどうしてもしたかったので、今回の記事本当に有り難かったです。
有難うございます。