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

<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 id="tab01" type="radio" name="tab" class="tab_switch" checked="checked" />

.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;
    }
}