解決済み

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

  • すぐに回答を!
  • 質問No.9620197
  • 閲覧数77
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 75% (51/68)

レシポンシブの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を勉強し始めの初心者です。ソースをわかりやすく教えて頂くと助かります。
よろしくお願いいたします。

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

  • 回答No.1

ベストアンサー率 69% (921/1319)

他カテゴリのカテゴリマスター
とりあえずHTML内部に記述されてる「style="~"」の部分を全削除して…

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

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

お礼率 75% (51/68)

ありがとうございました。うまくいきました
投稿日時 - 2019-05-28 13:26:05
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ