html+cssのみでメニュータブ作成

Question

html+CSSのみのメニュータブが下記のサンプル出来ました。

  <div class="tabBox">
    <input type="radio" id="tabMenu1" name="tab" checked >
    <label for="tabMenu1">タブ1</label>
    <input type="radio" id="tabMenu2" name="tab">
    <label for="tabMenu2">タブ2</label>
    <input type="radio" id="tabMenu3" name="tab">
    <label for="tabMenu3">タブ3</label>
    <div class="tabContent">
      <div id="tabContent1">コンテンツ1の内容が表示されます。コンテンツ1の内容が表示されます。</div>
      <div id="tabContent2">コンテンツ2の内容が表示されます。コンテンツ2の内容が表示されます。</div>
      <div id="tabContent3">コンテンツ3の内容が表示されます。コンテンツ3の内容が表示されます。</div>
    </div>
  </div>

.tabBox input[type="radio"] {display: none;}
.tabBox .tabContent {
  width : 250px;
  height: 100px;
  border: 1px solid #AAA;
}
.tabBox > .tabContent > div {display: none;}
#tabMenu1:checked ~ .tabContent > #tabContent1 {display: block;}
#tabMenu2:checked ~ .tabContent > #tabContent2 {display: block;}
#tabMenu3:checked ~ .tabContent > #tabContent3 {display: block;}

このサンプルだとメニュータブが上側に表示されますが、これを左側に表示させることは出来るでしょうか。

メニュー部分を<div>で囲んでfloat:leftすればよいのですが、CSSで

.tabMenu:has(#tabMenu1:checked) ~ tabContent > ・・・

というCSS4(?)対応の記述をする必要があり、対応してないブラウザもあるようです。

Answer 1

HTMLも変更できるのであれば、このようにするといいと思います。

<div class="tabBox">
    <div class="tabMenu">
      <label for="tabMenu1">タブ1</label>
      <label for="tabMenu2">タブ2</label>
      <label for="tabMenu3">タブ3</label>
    </div>
    <div class="tabContent">
      <input type="radio" id="tabMenu1" name="tab" checked>
      <div>コンテンツ1の内容が表示されます。コンテンツ1の内容が表示されます。</div>
      <input type="radio" id="tabMenu2" name="tab">
      <div>コンテンツ2の内容が表示されます。コンテンツ2の内容が表示されます。</div>
      <input type="radio" id="tabMenu3" name="tab">
      <div>コンテンツ3の内容が表示されます。コンテンツ3の内容が表示されます。</div>
    </div>
  </div>

.tabBox {
  display: table;
}
.tabBox .tabMenu {
  display: table-cell;
}
.tabBox .tabMenu label {
  display: block;
}
.tabBox .tabContent {
  display: table-cell;
  width : 250px;
  height: 100px;
  border: 1px solid #AAA;
}
.tabBox input[type="radio"] {display: none;}
.tabBox > .tabContent > div {display: none;}
.tabBox > .tabContent > input[name="tab"]:checked + div {display: block;}

サンプル https://jsfiddle.net/sx032gsm/

<label> と <input> は必ずしも隣接している必要はないので、
このように <input> を <div> の前に持ってくれば短いソースで記述できます。

Comments

[uer03108]

なるほど。。。
スマートですね。
有難うございますm(_ _)m

Answer 2

ひとつの例ですが、こんな感じですかね。
以下のCSSを追加してください。

.tabBox {
	position: relative;
}
.tabBox > .tabContent {
	margin-left: 50px;
}
label {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
}
label:nth-of-type(2) {
	top: 1em;
}
label:nth-of-type(3) {
	top: 2em;
}

Comments

[uer03108]

有難うございますm(_ _)m