HTMLページでタブをクリックしたら、タブと連動してタブ下のコンテンツが切り替わるボックスを作成してみました。
タブで切り替えができるようにする前は、３つのリストを横並びにしてるだけだったのですが、HTMLでタブの切り替えができるボックスにしたことでコンテンツが見やすくなりました。
HTMLでタブの切り替えができるようにする作成方法をまとめたので、知りたい方がいましたら参考に使ってください。
HTMLでタブを切り替えるボタンを作成
HTMLでタブの切り替えができるボックスを作成するための最初の作成ステップは、タブの部分のHTML構造を作成です。
タブにチェックが入るようにして、タブが複数でもチェックが入ったタブに切り替わる要素をHTMLでマークアップします。
HTMLのinputタグとlabelタグを使用してタブを切り替えるボタンを作成します。
<section class="tab_contents">
<div class="tab_wrap">
<input id="tab1" type="radio" name="check" checked>
<label for="tab1" class="tab_lab1">Tab1</label>
<input id="tab2" type="radio" name="check">
<label for="tab2" class="tab_lab2">Tab2</label>
<input id="tab3" type="radio" name="check">
<label for="tab3" class="tab_lab3">Tab3</label>
</div>
</section>
上記のHTML記述がタブを切り替えるボタンを作成するために使用する部分です。(タブを3つ作成した場合)
HTMLでタブを切り替えるボタンを作成するinputタグとlabelタグには、idとfor、そしてtype属性とname属性の記述が必要です。
- inputタグでチェックが入るようにする書き方
- labelタグで作成するタブをボタンにする書き方
上記2つの項目に分けて説明します。
inputタグでチェックボックスを作る
HTMLのinputタグには、「id」「type」「name」の3つの属性を記述してチェックボックスを作ります。
<input id="tab1" type="radio" name="check">
まずinputタグにはid属性の値にid名を任意で決めて記述します。
任意で決めて記述したid名はlabelタグに記述するfor属性の値にも同じ値名を使用します。そうすることで、タブを切り替えるスイッチの役割をするinput要素がlabelのボタンと紐付けられ、タブをクリックしてもinput要素にチェックが入ります。
type属性はradioにします。type=”radio”と記述することで、複数用意されたタブの選択肢の中からひとつのタブを選択できるようになりタブの切り替えが可能になります。
name属性は対象要素を特定するために必要な記述です。値にname属性名を記述します。タブの切り替えをしたときタブと連動して切り替わるボックスを最初は非表示にしておくCSSの記述のときに使用します。
<section class="tab_contents">
<div class="tab_wrap">
<input id="tab1" type="radio" name="check" checked>
<input id="tab2" type="radio" name="check">
<input id="tab3" type="radio" name="check">
</div>
</section>
上のHTMLのようにinputタグを3つくらい作成して、それぞれのinputのid名は個々のid名にしておくのがポイントです。
そして1番上のinputタグにcheckedを記述します。checkedを記述すると、1番上のタブが最初から表示状態にできます。
ここまでの作成段階でHTMLファイルの表示をブラウザで確認すると、inputタグに記述したtype属性の値「radio」でラジオボタンが表示されるのでチェックが切り替わるようになります。
タブが切り替わる気配は全くないけど順調に作成できてます。
タブのボタンをlabelで作成する
次にタブのボタンになる部分をlabelで作成します。labelの記述場所はinputタグの下に記述です。
<label for="tab1" class="tab_lab1">Tab1</label>
labelの中には「for属性」「class属性」を記述します。
for属性の値にはinputタグに記述したid名を記述。
class属性は、任意のクラス名を記述しておきます。
そしてラベルテキストの記述もしておきます。ラベルテキストはタブに表示される文字の部分です。
<section class="tab_contents">
<div class="tab_wrap">
<input id="tab1" type="radio" name="check" checked>
<label for="tab1" class="tab_lab1">Tab1</label>
<input id="tab2" type="radio" name="check">
<label for="tab2" class="tab_lab2">Tab2</label>
<input id="tab3" type="radio" name="check">
<label for="tab3" class="tab_lab3">Tab3</label>
</div>
</section>
HTMLでタブを切り替えるボタンの構造を作成したサンプルが上のHTMLです。
3つのinputタグごとの下に、それぞれlabel要素を配置してforの値をinputのidと同じにすることでラベルとチェックボックの連動をさせてます。
ここまでの作成段階でHTMLファイルの表示をブラウザで確認すると、inputタグのラジオスイッチの横にlabelで記述したラベルテキストがラベルボタンとして表示できます。
ラベルテキストをクリックして紐付けてるラジオボタンのチェックが切り替われば、HTMLでタブの切り替えができるタブ作成が成功してます。
タブに連動して切り替えるボックス作成
HTMLでタブの切り替えができるボックスを作成するための第2作成ステップは、タブに連動して切り替えるボックスの作成です。
タブの下にボックスを配置します。
inputとlabelのタブセットを作成した数のぶんだけボックスも同じ数を作成します。
それぞれのタブを切り替えるときに、連動して切り替り表示するボックスの親要素には個々のidをつけておくのを作成のポイントとして作成作業の流れを説明します。
タブと連動させるidを指定
タブに連動して切り替えるボックスは、HTMLのdivで親要素をマークアップして作り、親要素の中にタブごとに切り替わるボックスを作成します。
<div class="panels">
<div id="area1" class="panel">
</div>
</div>
タブごとに切り替わるボックスのdivにはid属性でidを記述しておきます。記述したidをCSSでセレクタにしてタブと一緒に切り替え表示できるようにするためのidです。
id指定は切り替えるタブを3つ作成した場合(複数の場合)、タブに連動して切り替えるそれぞれのボックス要素のdivに個々のid名を指定しておきます。
<div class="panels">
<div id="area1" class="panel"></div>
<div id="area2" class="panel"></div>
<div id="area3" class="panel"></div>
</div>
上のHTMLがタブに連動して切り替える3つのdivボックスにidを指定して作成したサンプル要素です。
HTMLでタブの切り替えができるボックスをパーツとして作成してるイメージですね。
タブを作成した部分の要素が「タブパーツ」と表現するとしたら、タブに連動して切り替えるボックス要素が「ボックスパーツ」
２つ合わせて「タブボックス」
のようなイメージで作成を続けます。
連動で切り替わるボックスの中身
次にタブをクリックしたら切り替わるボックスの中身を作成します。
<div class="panels">
<div id="area1" class="panel">
<ul class="panel_content">
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
</ul>
</div>
</div>
ボックスの中身になる内容は、タブ切り替えボックスを実装するwebサイトごとに異なるので、サンプルとしてulとliでリストにしたボックスの中身にしてみました。
上のHTMLではコンテンツの中身を一つ作成しただけのサンプルです。
タブが3つになる場合ならコンテンツの中身を包含する3つのdivに個々のid名を付与して作成します。class属性も指定しておくとCSSがあてやすいかと思います。
以下のHTMLがタブの部分で作成したHTMLも含めて、コンテンツの中身の全てをマークアップしたHTMLです。
<section class="tab_contents">
<div class="tab_wrap">
<input id="tab1" type="radio" name="check" checked>
<label for="tab1" class="tab_lab1">Tab1</label>
<input id="tab2" type="radio" name="check">
<label for="tab2" class="tab_lab2">Tab2</label>
<input id="tab3" type="radio" name="check">
<label for="tab3" class="tab_lab3">Tab3</label>
<div class="panels">
<div id="area1" class="panel">
<ul class="panel_content">
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
</ul>
</div>
<div id="area2" class="panel">
<ul class="panel_content">
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
</ul>
</div>
<div id="area3" class="panel">
<ul class="panel_content">
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
<li>ボックス内コンテンツ</li>
</ul>
</div>
</div>
</div>
</section>
labelタグのラベルテキスト「Tab2」をクリックしたら、for=”tab2″とinputタグのid=”tab2″が紐づいてるので、<input id=”tab2″ type=”radio name=”check”>で表示するラジオボタンにチェックが入り連動するHTML構造です。
マークアップした上のHTML構造をブラウザで表示した結果が以下の画像のようになると、タブに連動して切り替えるボックス作成の完成です。
HTMLでタブの切り替えができるボックスの構造を作成すると、HTMLでできることは終わりなのでCSSの出番です。
HTMLのタブとボックスをCSSで切り替える
HTMLで作成したタブとボックスをCSSで切り替えることができるようにします。
抑えておきたいポイント
- タブをクリックしたらボックスを表示
- ラジオボタンとボックスは非表示
タブをクリックしたらボックスを切り替える
HTMLで作成したタブをクリックしたら、divでマークアップしたボックスをタブごとに切り替えられるようにCSSのchecked擬似クラスを使います。
#tab1:checked~.panels #area1 {
display: block;
background: #e05551;
}
#tab2:checked~.panels #area2 {
display: block;
background: #dcdc3d;
}
#tab3:checked~.panels #area3 {
display: block;
background: #639aa4;
}
上記のCSSで1番上に記述したtab1のセレクタとプロパティを切り分けて説明します。
tab1:checked
tab1のタブをクリックしてチェックが入ったときに。
~.panels #area1
idのtab1を指定してる要素と同じ階層の<div class=”panels>要素の下にあるarea1のid指定があるコンテンツ要素の中身を
display: block;
ブロック要素で表示して
background: #e05551;
背景カラーを指定カラーで表示する。
このようにCSSのセレクタを指定することで、HTMLでタブの切り替えができるボックスを作成した構造は、タブを切り替えたとき、タブごとのボックスも連動して切り替わる動作にすることができます。
下の画像はtab2のタブをクリックしてtab2のボックスに切り替わって表示した画像です。
タブとボックスが切り替わる動作に問題ないですが、最終的にはチェックボックスは非表示にします。ですが非表示にすると、どのタブを見てるのか視角的に分かりづらくなります。
#tab1:checked~.tab_lab1 {
background: #e05551;
color: #242424;
}
#tab2:checked~.tab_lab2 {
background: #dcdc3d;
color: #242424;
}
#tab3:checked~.tab_lab3 {
background: #639aa4;
color: #242424;
}
タブとボックスの切り替えを視覚的に分かりやすくするためには、上のCSSのように記述します。
tab2にチェックが入ったときに、tab_lab2のクラス名で指定したラベル2の背景色をボックスの背景色と統一することで視覚的に見やすくします。
またHTMLでタブの切り替えができるボックスを作成した要素とチェックボックスを全て表示した状態でタブ切り替え確認をすると動作確認がしやすいのでおすすめです。
切り替えるボックスだけを表示する
動作確認のためタブの切り替えができる全ての要素を表示した状態にしてCSSを適用させてきましたが、動作に問題なければタブをクリックして切り替えるボックスだけを表示するようにします。
.panel {
padding: 50px;
display: none;
}
input[name="check"] {
display: none;
}
まずタブと一緒に切り替わって表示するボックスの親要素のクラス名をCSSのセレクタにしてdisplay: none;で非表示にします。display: noneと一緒にパディングを適用して、表示したときの余白も指定するといいかと思います。
そして1番表示したくないチェックボックスは、input[name=”check”]のセレクタにしてdisplay: none;で非表示にします。
今回紹介したHTMLでタブの切り替えができるボックスの作成でinput要素のチェックボックスは以下の記述です。
<input id=”tab2″ type=”radio” name=”check”>
タブ切り替えで使用したinputタグだけを非表示にしたいので、非表示にする条件として、inputタグのname属性がcheckのチェックボックスを非表示にする。というCSSセレクタにして非表示にできます。
そうすると上の画像のように、切り替えるボックスだけを表示することができて、チェックボックスも非表示になったタブの切り替えができるタブボックスを作成できます。
タブの切り替えができるボックスの仕組みを作成する作業の流れは、ここまでなので、あとはそれぞれタブとボックスのスタイルや余白をCSSでごにょごにょして、いい感じのタブボックスに仕上げます。
一応、今回のHTMLの構造にスタイルを適用したCSSを全て載せておきますので参考程度に使ってください。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-weight: bold;
}
.tab_contents {
width: 100%;
background-color: silver;
padding: 30px;
margin: 20px auto;
}
.tab_wrap {
width: 50%;
margin: 50px auto;
opacity: 0.8;
}
@media screen and (max-width:900px) {
.tab_wrap {
width: 100%;
margin: 0 auto;
opacity: 0.8;
}
}
/*タブボタンデザイン*/
.tab_lab1, .tab_lab2, .tab_lab3 {
background: #242424;
color: #fff;
padding: 15px;
}
/*タブにチェック入ったとき*/
#tab1:checked~.tab_lab1 {
background: #e05551;
color: #242424;
}
#tab2:checked~.tab_lab2 {
background: #dcdc3d;
color: #242424;
}
#tab3:checked~.tab_lab3 {
background: #639aa4;
color: #242424;
}
/*タブボタンとボックス連動*/
#tab1:checked~.panels #area1 {
display: block;
background: #e05551;
}
#tab2:checked~.panels #area2 {
display: block;
background: #dcdc3d;
}
#tab3:checked~.panels #area3 {
display: block;
background: #639aa4;
}
/*チェックボックスとボックス非表示*/
input[name="check"] {
display: none;
}
.panel {
padding: 50px;
display: none;
}
/*アニメーション設定*/
@keyframes SlideUp {
0% {
transform: translateY(50px);
/* Y軸方向に50px */
opacity: 0;
/* 透明 */
}
100% {
transform: translateY(0);
/* Y軸方向に0px */
opacity: 1;
/* 不透明 */
}
}
/*アニメーション設定end*/
/*ボックスを下から上へ*/
.panel_content {
animation-name: SlideUp;
animation-duration: 2s;
background-color: #fff;
width: 100%;
}
