～タブで画面を切り替える方法初級編～

今回はタブで画面を切り替える方法を説明していきます。

また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。

他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。

今回は初級編なので最低限の機能だけです。

レベル1 ラジオボタンを作成する

まずはラジオボタンを作成していきます。

今回はメニュー、写真、レシピと画面が切り替わるようにしていきます。

ラジオボタンなのでtype="radio"を使います。

またidとnameには好きな名前を入れておきます。ただしnameは全て同じ名前にします。

<input id="menu" type="radio" name="onaji1">
<input id="picture" type="radio" name="onaji1">
<input id="recipe" type="radio" name="onaji1">

実際の見た目は次のようになります。

レベル2 ラジオボタンに名前をつける

これだけだとラジオボタンがポツポツと並んでいるだけなのでこれに名前（ラベル)をつけていきます。

label for="好きな名前"　classは全部同じ名前をつけておきます。

ここでいうクラスはスタイルシートのクラスのことです。

通常だとdiv class="tagwaku"などとする所ですがこの場合は次のように記述します。

<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

レベル3 タブ自体の枠を作る

私の自作ツール　(クリック→枠のスタイルシートを自動で作れるツール←クリック)を使うだけです。

自動ツールで出てきたスタイルシートにdisplay:inline-block;を追加して要素を横並びにするだけです。

ここでレベル1でつけたclass="tagwaku"と同じクラス名を書きます。

.tabwaku{
border:2px solid aquamarine;
width:150px;
height:50px;
margin: 0 auto;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
display : inline-block; 
}

記事中には次のように記述します。


<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

実際には次のように表示されます。

メニュー写真レシピ

レベル4 タブをクリックした時にでてくる枠を作る

次にタブを押した時に出てくる枠を作ります。

これも私の自作ツール　(枠のスタイルシートを自動で作れるツール)を使うだけです。

タブの一つの幅が150pxなので幅を450px、高さを適当に300pxにしておきます。

また枠はタブがクリックされるまでは非表示にするのでdisplay: none;を追加します

div.wakut{
display:none;
border:2px solid hotpink;
width:450px;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;}

記事中には次のように記述します。

<div class="wakut" id="content1">メニュー部分</div>
<div class="wakut" id="content2">写真部分</div>
<div class="wakut" id="content3">レシピ部分</div>

実際にはdisplay:noneにしているので何も見えません。

レベル5 タブとその内容部分を連結させる

タブのidと内容部分のidに注目してそれぞれ対応させるように記述します。

タブのメニューとその内容のidを対応させます。

<input id="menu" type="radio" name="onaji1">

<div class="wakut" id="content1">メニュー部分</div>

上記のid="menu”とid="content"を対応させて次のように記述します。

#menu:checked ~ #content1{display:block;}

まずいったんdisplayを非表示noneにしてるのでタブが選択された時に表示させるためにblockにします。

またシャープ(#)はCSSではidを表します。

さらに対応させるためにはCSSでは~を使います。

#menu:checkedでもしmenuタブが選択されていたらという意味になります。

同じように写真タブとレシピタブも記述すると次のようになります。

   #menu:checked ~ #content1{ display: block; } 
   #picture:checked ~ #content2{ display: block; }
   #recipe:checked ~ #content3 { display: block; }

レベル6 ここまでをまとめて書く

記事中

<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

<div class="wakut" id="content1">メニュー部分</div>
<div class="wakut" id="content2">写真部分</div>
<div class="wakut" id="content3">レシピ部分</div>

スタイルシート

<style>

.tabwaku{
border:2px solid aquamarine;
width:150px;
height:50px;
margin: 0 auto;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
display : inline-block;
}

div.wakut{
display: none;
border:2px solid hotpink;
width:450px;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;}

#menu:checked ~ #content1{ display: block; }
#picture:checked ~ #content2{ display: block; }
#recipe:checked ~ #content3{ display: block; }

</style>

実際には次のように表示されます。

メニュー写真レシピ

メニュー部分

写真部分

レシピ部分

それぞれクリックすることで内容が入れ替わります。

次回は上級編としてより実践で使える形に装飾していきます。