備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法

CSS、JavaScript

今回はCSS(スタイルシート)の備忘録となります。

お客様から「縦に長くなりすぎないようにしたい」とご要望頂きましたので、その際に利用したCSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。

サンプル

HTMLまたはHyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つで、プログラミング言語ではない。主にWorldWideWebにおいて、ウェブページを表現するために用いられる。
Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide WebConsortiumがとりまとめ勧告する、文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
PHPは、 “The PHP Group”によってコミュニティベースで開発されているオープンソースの汎用プログラミング言語およびその公式の処理系であり、特にサーバーサイドで動的なウェブページを作成するための機能を多く備えていることを特徴とする。

HTML

3つの項目の場合ですが下記のようなHTMLとなります。

<div class="tab_set">
	<input id="tab01" type="radio" name="tab" class="tab_switch" checked="checked" />
	<label class="tab_label" for="tab01">HTMLとは</label>
	<div class="tab_content">
		HTMLまたはHyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つで、プログラミング言語ではない。主にWorldWideWebにおいて、ウェブページを表現するために用いられる。
	</div>

	<input id="tab02" type="radio" name="tab" class="tab_switch" />
	<label class="tab_label" for="tab02">CSSとは</label>
	<div class="tab_content">
		Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide WebConsortiumがとりまとめ勧告する、文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
	</div>

	<input id="tab03" type="radio" name="tab" class="tab_switch" />
	<label class="tab_label" for="tab03">PHPとは</label>
	<div class="tab_content">
		PHPは、"The PHP Group"によってコミュニティベースで開発されているオープンソースの汎用プログラミング言語およびその公式の処理系であり、特にサーバーサイドで動的なウェブページを作成するための機能を多く備えていることを特徴とする。
	</div>
</div>

input」の「ラジオボタン」を利用するタイプになります。
私個人としてはタブやアコーディオンはinputを利用するのが一番簡単な気がします。

<input id="tab01" type="radio" name="tab" class="tab_switch" checked="checked" />

「checked=”checked”」を入れておいた項目箇所が「開いている状態」になるのでタブ風の時は入れておくのが良いでしょう。

また今回紹介しているタブは全部で3つになるようにしてますので4つにしたい場合は下記のようにソースを追加してください。

<input id="tab04" type="radio" name="tab" class="tab_switch" />
<label class="tab_label" for="tab04">ここにタブ名を入れてください</label>
<div class="tab_content">
	PHPは、"The PHP Group"によってコミュニティベースで開発されているオープンソースの汎用プログラミング言語およびその公式の処理系であり、特にサーバーサイドで動的なウェブページを作成するための機能を多く備えていることを特徴とする。
</div>

注意点として追加した分「input」の「id」と「label」の「for」を揃えるようにしてください。
私の場合はわかりやすいように「tab04」としています。

CSS

.tab_set {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* タブの名前のところだよ */
.tab_label {
    color: #fff;
    background: #ccc;
    padding: 15px 20px;
    margin-right: 10px;
    order: -1;
    position: relative;
    line-height: 1;
    cursor: pointer;
}

/* 本文をいれるところだよ */
.tab_content {
    display: none;
    padding: 20px;
    border: 1px solid #666;
}

/* タブをクリックした時のCSSだよ */
.tab_switch:checked+.tab_label {
    background: #666;
}

.tab_switch:checked+.tab_label+.tab_content {
    display: block;
}

/* ラジオボタンだよ */
.tab_switch {
    display: none;
}

/*ウィンドウサイズが769px以下になった時のCSSだよ*/
@media print,screen and (max-width:767px) {
    .tab_set {
        display: block;
    }

    .tab_label {
        display: block;
        margin-right: 0;
    }

    .travelclinic .tab_label.last {
        border-bottom: none;
    }

    .travelclinic .tab_switch:checked+.tab_label {
        border-bottom: 1px solid #59A8B7;
    }
}

上記CSSでサンプルのようになります。

まとめ

以上で、SPの時はアコーディオン風でPCの時はタブ切り替えの実装のご紹介となります。

CSSを変更すればお好みのデザイにすることも可能ですので興味がある方はチャレンジしてみてください!

タイトルとURLをコピーしました