<!DOCTYPE html>
<br><html lang="ja">
<br><head>
<br> <meta charset="UTF-8">
<br> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<br> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<br> <title>Document</title>
<br> <style>
<br> .tab-wrap {
<br> display: flex;
<br> flex-wrap: wrap;
<br> }
<br> .tab-label {
<br> color: White;
<br> background: LightGray;
<br> margin-right: 5px;
<br> padding: 3px 12px;
<br> order: -1;
<br> }
<br> .tab-content {
<br> width: 100%;
<br> display: none;
<br> box-sizing: border-box;
<br> border: solid 1px black;
<br> }
<br> /* アクティブなタブ */
<br> .tab-switch:checked+.tab-label {
<br> background: DeepSkyBlue;
<br> }
<br> .tab-switch:checked+.tab-label+.tab-content {
<br> display: block;
<br> }
<br> /* ラジオボタン非表示 */
<br> .tab-switch {
<br> display: none;
<br> }
<br> </style>
<br></head>
<br><body>
<br> <div class="tab-wrap">
<br> <input id="TAB-01" type="radio" name="tab" class="tab-switch" checked="checked" />
<br> <label class="tab-label" for="TAB-01">ボタン 1</label>
<br> <div class="tab-content">
<br> コンテンツ 1
<br> </div>
<br>
<br> <input id="TAB-02" type="radio" name="tab" class="tab-switch" />
<br> <label class="tab-label" for="TAB-02">ボタン 2</label>
<br> <div class="tab-content">
<br> コンテンツ 2
<br> </div>
<br>
<br> <input id="TAB-03" type="radio" name="tab" class="tab-switch" />
<br> <label class="tab-label" for="TAB-03">ボタン 3</label>
<br> <div class="tab-content">
<br> コンテンツ 3
<br> </div>
<br> </div>
<br></body>
<br></html>