CSSでのタブの切り替えについて

2018/12/27 10:56

kei344さまご返答くださり、ありがとうございます。コードは以下になります。 ------------------------------------------------------------------------------------------------------------------------- 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"> <p>コンテンツ1</p> </div> <div id="tab5-b2"> <p>コンテンツ2</p> <p>コンテンツ2</p> </div> <div id="tab5-b3"> <p>コンテンツ3</p> <p>コンテンツ3</p> <p>コンテンツ3</p> </div> <div id="tab5-b4"> <p>コンテンツ4</p> <p>コンテンツ4</p> <p>コンテンツ4</p> <p>コンテンツ4</p> </div> </div> </div> ------------------------------------------------------------------------------------------------------------------------- CSS ------------------------------------------------------------------------------------------------------------------------- .tab5 { width: 100%;/*横幅はここで設定します。100%にすれば可変になります。*/ min-width: 320px; margin: 0 auto; } .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; }

2018/12/27 11:17

質問は編集できるので適宜追記してください。あと「CSSフレームワーク」は本件とどのように関係しますか？

kei344

2018/12/27 11:17

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

yoshinavi

2018/12/27 11:44

適用している「CSSフレームワーク」は何でしょうか？

2018/12/28 04:47

mts10806様ありがとうございます。コーディング自体素人のため、CSSフレームワークの意味を取り違えて設定しておりました。こちらは、使用しておりません。純粋に上記の参考サイトのコードを記載して幅の調整がうまくいかないという問題点でつまづいております。

2018/12/28 04:47

kei344様アドバイスくださり、ありがとうございます。ご指摘通り、追記して編集いたしました。使い勝手がわかっておらず、至らぬ点があり申し訳ありません。

2018/12/28 04:48

yoshinavi様コーディング自体素人のため、CSSフレームワークの意味を取り違えて設定しておりました。こちらは、使用しておりません。純粋に上記の参考サイトのコードを記載して幅の調整がうまくいかないという問題点でつまづいております。

2018/12/28 04:49

コード部分は選択して<code>ボタンを押してコードブロックにしてください。そのまま貼り付けるとインデントがなくなったりスペースが詰められたりして正しく質問者さんのコードを再現確認に利用できませんので

2018/12/28 05:00

mts10806様改めてコードブロックに入れました！重ね重ね、ご指摘くださりありがとうございます。

2018/12/28 05:03 編集

あ、できればHTMLとCSSはわけていただければと。 <code>ボタンを押すと「ここに言語名を入力」と出るのでそこに下記のような感じにしてください。（Lhankor_Mhyさんの回答のコードのような感じになります） HTML↓ ```html ``` CSS↓ ```css ```

2018/12/28 05:08

mts10806様ありがとうございます。お教えいただいた通り、記載ができました！初歩的なことにも関わらず、丁寧にご対応くださりありがとうございます；o；

2018/12/28 05:17

いえ。マークダウンは馴染みがない人には敷居は高いと思います。質問テンプレートもあまり親切ではないですしね。質問投稿画面の左下の「MarkDown記法を使うと・・・」のタブをクリックすると機能確認を行えますので、適宜見てみてください。

2018/12/28 06:43

mts10806様何から何まで、ご丁寧にお教えくださりありがとうございます。今後は、なるべくお答えいただく方にわかりやすい形で質問できるよう努めます！「MarkDown記法を使うと・・・」の箇所も参考にいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

Flex で作ってみます

HTML
1<div class="tab5">
2 <div class="tab-content">
3  <input id="tab5-1" type="radio" name="tab5" checked="checked" />
4  <input id="tab5-2" type="radio" name="tab5" />
5  <input id="tab5-3" type="radio" name="tab5" />
6  <input id="tab5-4" type="radio" name="tab5" />
7  <div role="tablist">
8   <label for="tab5-1" role="tab">1</label>
9   <label for="tab5-2" role="tab">2</label>
10   <label for="tab5-3" role="tab">3</label>
11   <label for="tab5-4" role="tab">4</label>
12  </div>
13  <div class="tab-panels">
14   <div id="tab5-b1" role="tabpanel">
15    <p>コンテンツ1</p>
16   </div>
17   <div id="tab5-b2" role="tabpanel">
18    <p>コンテンツ2</p>
19    <p>コンテンツ2</p>
20   </div>
21   <div id="tab5-b3" role="tabpanel">
22    <p>コンテンツ3</p>
23    <p>コンテンツ3</p>
24    <p>コンテンツ3</p>
25   </div>
26   <div id="tab5-b4" role="tabpanel">
27    <p>コンテンツ4</p>
28    <p>コンテンツ4</p>
29    <p>コンテンツ4</p>
30    <p>コンテンツ4</p>
31   </div>
32  </div>
33 </div>
34</div>

CSS変更分

CSS
1.tab5 #tab5-1:checked ~ [role="tablist"] label[for="tab5-1"],
2.tab5 #tab5-2:checked ~ [role="tablist"] label[for="tab5-2"],
3.tab5 #tab5-3:checked ~ [role="tablist"] label[for="tab5-3"],
4.tab5 #tab5-4:checked ~ [role="tablist"] label[for="tab5-4"],
5.tab5 #tab5-5:checked ~ [role="tablist"] label[for="tab5-5"] {
6  background: #9fb7d4;
7  color: white;
8  padding: 5px 10px 3px 10px;
9}
10
11.tab5 #tab5-1:checked ~ .tab-panels #tab5-b1,
12.tab5 #tab5-2:checked ~ .tab-panels #tab5-b2,
13.tab5 #tab5-3:checked ~ .tab-panels #tab5-b3,
14.tab5 #tab5-4:checked ~ .tab-panels #tab5-b4 {
15  display: block;
16  border: 1px solid #9fb7d4;
17}
18
19.tab5 [role="tablist"] {
20  display: flex;
21  flex-wrap: wrap;
22}
23
24.tab5 [role="tablist"] > label {
25  flex: 1 1 auto;
26  margin: 0;
27}
28
29.tab5 [role="tablist"] > label:not(:first-child) {
30  margin-left: 5px;
31}

投稿2018/12/28 06:19

x_x

総合スコア13749

2018/12/28 06:42

ご返答くださり、ありがとうございます！お教えていただいた回答と同じコードに変更し、質問内容のコードを変更いたしました。幅を合わせることができたのですが、スマホサイズに可変した際1-3の下にナンバー4のタブが入り込んでしまうという現象（質問欄に現在の状態を画像にて添付）が起きているのですが、この現象を解消するためにはどういう指定が必要でしょうか。

x_x

2018/12/28 06:46

flex-wrap: wrap; これを消せば折り返さなくなりますが、幅が足りていないのでしょうか？

2018/12/28 07:27

x_x様ありがとうございます。スマホ時のサイズともに全て解決いたしました。本当に助かりました！ありがとうございます > <

行動規範の内容に同意します

css
1.tab5 label {
2	width: calc(25% - 22px);
3}

コメントを受けて追記

コードのご提示があったので、それに合わせて変更しました。
サンプル

css
1.tab5 label {
2    width: calc( ( 100% - 89px ) / 4 );
3}

投稿2018/12/27 10:48

編集2018/12/28 01:53

総合スコア36104

2018/12/27 10:58

ご回答くださり、ありがとうございます。ご指示くださった通り、変更してみたのですが幅がかわりませんでした。他との兼ね合いで変更されていないのかもしれないです・・

2018/12/27 13:57

追加した場所はどこでしょうか？ CSSの最後に追加して欲しいのですが。

2018/12/28 01:53

追記しました。

2018/12/28 05:26 編集

追記くださり、ありがとうございます。タブ自体の幅は広がったのですが、横幅が足りずスマホサイズで確認した場合のタブが、右端のみ大きくなってしまうという現象が起きております。参考で載せた現在の画像に近い状態。変更した際のコードは以下になります。 ```CSS .tab5 { width: 100%;/*横幅はここで設定します。100%にすれば可変になります。*/ min-width: 320px; margin: 0 auto; } .tab5 .tab-content { margin: 0 10px; } .tab5 label { width: calc( ( 100% - 89px ) / 4 ); } .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; }  ```

2018/12/28 06:00

.tab5 label { display: inline-block; width: 78px; padding: 3px 10px; cursor: pointer; background: #ddd; color: #777; margin-right: -2px; } という部分がなくなっているようですが、変更されたのでしょうか？

2018/12/28 06:04

Lhankor_Mhy様抜けてしまっていたので、現在追記いたしました。ただ、状態がかわりませんでした。

2018/12/28 06:06

以前の質問でも書きましたが、あなたが*実際に動かしている*コードがないと、解決は難しいです。なぜかというと、たとえば、「ウチのバナナが赤いのですがなぜですか？」という質問して、回答者が「こちらのバナナは黄色いですね」という解答がついている中で、質問者が実はりんごを見ていた！、みたいな状況に近いからです。なので、コードを変更する場合は、質問を編集して、回答者と質問者が同じものを見るようにするのが、解決への早道です。

2018/12/28 06:08

繰り返しになりますが、回答のコードは、CSSの最後に追加して欲しいのです。なぜならば、同じスタイルの記述があった場合、（細かい話を省くと）後から書いたものが優先されるからです。

2018/12/28 06:33

Lhankor_Mhy様丁寧にご説明くださり、ありがとうございます。元の質問内容をアップデートするのではなく、質問でのやり取り欄にて変更箇所をお伝えするものだと勘違いしておりました。大変申し訳ありません。

2018/12/28 06:37

ああ、すみません。そちらはコメントが入れ違いになってしまいました。質問者様がコードをいじっている過程で変更したのかと思ったのです。勘違いで削除されたのなら、それはそれでいいです。