こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

レシポンシブのtab型メニューで困ってます

レシポンシブのtab型メニューが上手くできなくて困ってます。
希望は、表示する枠の高さは固定、表示するリストが多くなれば縦のスクロールバーが自動的に表示される、レシポンシブに対応です。jQueryが上手く動かなくなる可能性があるのでCSSのみで動くソースがネット上に掲載されていたものを自分流にアレンジしてみました。作成後Google Chromeのデヴェロッパーツールでレシポンシブを検証すると、縦のスクロールバーは一瞬表示されますがマウスを適当に動かすと消えて機能しません。ソースは以下です。
html
<div class="tab5">
<div class="tab-content">
<input id="tab5-1" type="radio" name="tab5" checked>
<label for="tab5-1">1</label>
<input id="tab5-2" type="radio" name="tab5">
<label for="tab5-2">2</label>
<input id="tab5-3" type="radio" name="tab5">
<label for="tab5-3">3</label>
<input id="tab5-4" type="radio" name="tab5">
<label for="tab5-4">4</label>
<div id="tab5-b1" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ1</p>
</div>
<div id="tab5-b2" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ2</p>
<p>コンテンツ2</p>
</div>
<div id="tab5-b3" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ3</p>
<p>コンテンツ3</p>
<p>コンテンツ3</p>
</div>
<div id="tab5-b4" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ4</p>
<p>コンテンツ4</p>
<p>コンテンツ4</p>
<p>コンテンツ4</p>
</div>
<!--tab-content--></div>
<!--tab5--></div>


css
.tab5{
width: 100%;
min-width: 320px;
margin : 0px auto 20pt;
}
.tab5 .tab-content{
margin: 0 10px;
}
.tab5 label{
display: inline-block;
margin: 0;
padding: 0;
}
.tab5 label{
display: inline-block;
width: 78px;
padding: 3px 10px;
cursor: pointer;
background: #ddd;
color: #777;
margin-right: -2px;
}
.tab5 label:hover{
background: #eee;
}
.tab5 input:checked + label{
background: #9fb7d4;
color: white;
padding: 5px 10px 3px 10px;
}
.tab5 input{
display: none;
}
.tab5 #tab5-b1,
.tab5 #tab5-b2,
.tab5 #tab5-b3,
.tab5 #tab5-b4{
display: none;
padding: 10px;
}
.tab5 #tab5-1:checked ~ #tab5-b1,
.tab5 #tab5-2:checked ~ #tab5-b2,
.tab5 #tab5-3:checked ~ #tab5-b3,
.tab5 #tab5-4:checked ~ #tab5-b4{
display: block;
border: 1px solid #9fb7d4;
}
また、html中の style="width: 100%;height : 100px;overflow-x: hidden;"をcssに記述したいのですがどこに付加していいのかわかりません。
htmlを勉強し始めの初心者です。ソースをわかりやすく教えて頂くと助かります。
よろしくお願いいたします。

投稿日時 - 2019-05-26 08:19:07

QNo.9620197

すぐに回答ほしいです

質問者が選んだベストアンサー

とりあえずHTML内部に記述されてる「style="~"」の部分を全削除して…

.tab-content > div { width:100%; height:100px; overflow:auto; }

~以上の記述例に倣ったスタイルを適当な箇所に追記してみてください。

投稿日時 - 2019-05-27 16:26:33

お礼

ありがとうございました。うまくいきました

投稿日時 - 2019-05-28 13:26:05

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問