以下のようなタブ付きのボックスを作りたいと思ったのでいろいろ調べました。
結果として「CSSのみ（JavaScript無し）でタブ切り替えメニューを実装する2つの方法」が分かりやすかったのでここで紹介させていただきます。
参考のサイトではタブは3つでした。
今回必要だったのは「タブが2つ」のバージョンだったため、少し手を加えさせていただきました。
それが以下となります。
CSSでタブをボックスの上に2つ付けるHTMLとCSS
そのためには以下のようなHTMLタグとCSSが必要となります。
HTMLタグ
<div class="tab01">
<input id="menu01" type="radio" name="tab_menu" checked><label class="tab_menu" for="menu01">メニュー項目 1</label><input id="menu02" type="radio" name="tab_menu"><label class="tab_menu" for="menu02">メニュー項目 2</label><input id="menu03" type="radio" name="tab_menu"><label class="tab_menu" for="menu03">メニュー項目 3</label>
<div class="tab_contents" id="menu01">
コンテンツ内容 1
</div>
<div class="tab_contents" id="menu02">
コンテンツ内容 2
</div>
<div class="tab_contents" id="menu03">
コンテンツ内容 3
</div>
</div>
CSSは以下
CSSは以下。
.tab01 {
width: 100%;
margin: 0 auto 50px;
}
/*タブのスタイル*/
.tab_menu {
width: calc(100%/2);
height: 60px;
line-height: 60px;
font-size: 16px;
text-align: center;
color: #000;
border-bottom: 3px solid #1f71b5;
background-color: #d9d9d9;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_menu:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_menu"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_contents {
display: none;
padding: 40px;
clear: both;
overflow: hidden;
transition: .5s opacity;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/*選択されているタブを表示*/
#menu01:checked ~ #menu01,
#menu02:checked ~ #menu02,
#menu03:checked ~ #menu03 {
display: block;
}
/*選択されているタブのスタイル*/
.tab01 input:checked + .tab_menu {
background-color: #1f71b5;
color: #fff;
}
