タブで画面を切り替える方法上級編
～タブで画面を切り替える方法上級編～
前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていって より実践で使える形にしていきます。
前回の記事はこちら↓↓になります。
レベル1 前回の初級編のスタイルシートと記事中の記述
・スタイルシート
<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>
・記事中
<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>
レベル2 前回の見た目
メニュー部分
写真部分
レシピ部分
それぞれをクリックすると専用の画面が開きますがまだまだお粗末なので今回はそれを修正していきます。
レベル3 ラジオボタンの〇を消す
まずはラジオボタンの〇を消していきます。
まずは全体を$<div class="box">%lt;/div>で囲みます。<div class="box"< 記事中の記述全部 </div>
このclass="box"内のinput="radio"の部分のdisplayを非表示(none)にします。
.box input { display: none; }
これはスタイルシート(CSS)に記述します。
すると見た目は次のように変わります。
メニュー部分
写真部分
レシピ部分
レベル4 タブ同士の隙間をなくす
次は要素同士の隙間をなくしていきます。
2つの要素の隙間をなくしてみた HTML,CSS復習14 - ★うつ病の一人暮らし★外で働かないで生きていく
ここでも説明していますがまず大元の枠
<div class="box"></div>
のフォントを初期化します。
スタイルシートに次のように追加します。
.box {font-size:0px;}
それから他のクラスのfontを元に戻します。
.tabwaku{font-size:16px;}
.wakut{font-size:16px;}
これもスタイルシートに追加します。
すると見た目は次のように変わります。
メニュー部分
写真部分
レシピ部分
レベル5 スマホの枠内でもうまく表示できるようにする
このままでもパソコンで見たらうまく表示されていると思いますがスマホで見ると枠からはみ出したりしてるので スマホでも枠内にきちんとおさまるようにしていきます。
まず親クラスであるboxクラスにdisplay:flex; flex-wrap: wrap;を追加します。widthを％表示する時に使います。
.box{
display:flex;
flex-wrap;
}
次にタブクラスのtabwakuのdisplay:inline-block;を削除してwidthを次のように修正します。
・修正前
.tabwaku{
width:150px;
display:inline-block;
}
・修正後
.tabwaku{
width: calc(100% / 3);
}
全体の幅を100%にして3つタブがあるので3で割っています。
次に内容の枠のクラスwakutのwidthも100%表示にします。
・修正前
div.wakut{
width:450px;
}
・修正後
div.wakut{
width: 100%;
}
すると見た目は次のように変わります。
メニュー部分
写真部分
レシピ部分
レベル6 一つのタブだけ予め選択状態にしておく
今回は写真タブを選択状態にしてみます。
記事中の表示に次のようにcheckedを追加するだけです。
・修正前
<input id="picture" type="radio" name="onaji1 ">
・修正後
<input id="picture" type="radio" name="onaji1 checked">
すると見た目は次のように変わります。
メニュー部分
写真部分
レシピ部分
レベル7 タブにマウスがのった時の装飾をする
クラス名:hover{ }を使ってタブの背景色などを変えます。
今回は適当に背景、文字色共に赤色にしてみます笑
cursor:pointer:でマウスがそこに乗った時に反応するようになります。
スタイルシートに次のように追加します。
.tabwaku:hover {
background-color: red;
color: red;
cursor: pointer;
}
すると見た目変わりませんがマウスが乗った時にタブの背景などが変わります。
メニュー部分
写真部分
レシピ部分
レベル8 うまく表示できました
タップした時赤色なのでみにくいですがうまくいきました笑
レベル9 スタイルシートと記事中の表示のまとめ
・スタイルシート
<style>
.box{
font-size: 0px;
display:flex;
flex-wrap: wrap;
}
.box input
{ display: none; }
.tabwaku{
border:2px solid aquamarine;
font-size:16px;
width: calc(100% / 3);
margin: 0 auto;
height:50px;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
}
div.wakut{
display: none;
border:2px solid hotpink;
font-size:16px;
width:100%;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;
}
.tabwaku:hover {
background-color: red;
color: red;
cursor: pointer;
}
#menu:checked ~ #content1{ display: block;}
#picture:checked ~ #content2{ display: block;}
#recipe:checked ~ #content3{ display: block;}
</style>
・記事中
<div class="box"> <input id="menu" type="radio" name="onaji1"> <label for="menu" class="tabwaku">メニュー</label> <input id="picture" type="radio" name="onaji1" checked> <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> </div>
レベル10 提供
レベル11 困った
スマホで表示したらタブが３つ並んで表示されないので方法を調べたりしてます。
レベル12 スマホだけ表示画面を変えてみる
@media only screen and (max-width : 767px){
.tabwaku { width:85px; }
}
画面のサイズが767pxを超える場合widthを85pxに固定してみます。
うまくいきました！
