teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問CSSでのタブの切り替えについて

編集履歴

質問編集履歴

6

書式の改善

2018/12/28 06:39

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -36,57 +36,73 @@
36
36
 
37
37
  <div class="tab5">
38
38
 
39
- <div class="tab-content">
39
+ <div class="tab-content">
40
40
 
41
- <input id="tab5-1" type="radio" name="tab5" checked>
41
+ <input id="tab5-1" type="radio" name="tab5" checked="checked" />
42
42
 
43
- <label for="tab5-1">1</label>
43
+ <input id="tab5-2" type="radio" name="tab5" />
44
44
 
45
- <input id="tab5-2" type="radio" name="tab5">
45
+ <input id="tab5-3" type="radio" name="tab5" />
46
46
 
47
- <label for="tab5-2">2</label>
47
+ <input id="tab5-4" type="radio" name="tab5" />
48
48
 
49
- <input id="tab5-3" type="radio" name="tab5">
49
+ <div role="tablist">
50
50
 
51
- <label for="tab5-3">3</label>
51
+ <label for="tab5-1" role="tab">1</label>
52
52
 
53
- <input id="tab5-4" type="radio" name="tab5">
53
+ <label for="tab5-2" role="tab">2</label>
54
54
 
55
- <label for="tab5-4">4</label>
55
+ <label for="tab5-3" role="tab">3</label>
56
56
 
57
- <div id="tab5-b1">
57
+ <label for="tab5-4" role="tab">4</label>
58
58
 
59
+ </div>
60
+
61
+ <div class="tab-panels">
62
+
63
+ <div id="tab5-b1" role="tabpanel">
64
+
59
- <p>コンテンツ1</p>
65
+ <p>コンテンツ1</p>
66
+
67
+ </div>
68
+
69
+ <div id="tab5-b2" role="tabpanel">
70
+
71
+ <p>コンテンツ2</p>
72
+
73
+ <p>コンテンツ2</p>
74
+
75
+ </div>
76
+
77
+ <div id="tab5-b3" role="tabpanel">
78
+
79
+ <p>コンテンツ3</p>
80
+
81
+ <p>コンテンツ3</p>
82
+
83
+ <p>コンテンツ3</p>
84
+
85
+ </div>
86
+
87
+ <div id="tab5-b4" role="tabpanel">
88
+
89
+ <p>コンテンツ4</p>
90
+
91
+ <p>コンテンツ4</p>
92
+
93
+ <p>コンテンツ4</p>
94
+
95
+ <p>コンテンツ4</p>
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+ </div>
60
102
 
61
103
  </div>
62
104
 
63
- <div id="tab5-b2">
64
105
 
65
- <p>コンテンツ2</p>
66
-
67
- <p>コンテンツ2</p>
68
-
69
- </div>
70
-
71
- <div id="tab5-b3">
72
-
73
- <p>コンテンツ3</p>
74
-
75
- <p>コンテンツ3</p>
76
-
77
- <p>コンテンツ3</p>
78
-
79
- </div>
80
-
81
- <div id="tab5-b4">
82
-
83
- <p>コンテンツ4</p>
84
-
85
- <p>コンテンツ4</p>
86
-
87
- <p>コンテンツ4</p>
88
-
89
- <p>コンテンツ4</p>
90
106
 
91
107
  </div>
92
108
 
@@ -100,98 +116,80 @@
100
116
 
101
117
  ```CSS
102
118
 
103
- .tab5 {
119
+ .tab5 #tab5-1:checked ~ [role="tablist"] label[for="tab5-1"],
104
120
 
105
- width: 100%;/*横幅はここで設定します。100%にすれば可変になります。*/
121
+ .tab5 #tab5-2:checked ~ [role="tablist"] label[for="tab5-2"],
106
122
 
107
- min-width: 320px;
123
+ .tab5 #tab5-3:checked ~ [role="tablist"] label[for="tab5-3"],
108
124
 
109
- margin: 0 auto;
125
+ .tab5 #tab5-4:checked ~ [role="tablist"] label[for="tab5-4"],
110
126
 
111
- }
127
+ .tab5 #tab5-5:checked ~ [role="tablist"] label[for="tab5-5"] {
112
128
 
113
- .tab5 .tab-content {
129
+ background: #9fb7d4;
114
130
 
115
- margin: 0 10px;
131
+ color: white;
116
132
 
117
- }
118
-
119
- .tab5 label {
120
-
121
- width: calc( ( 100% - 89px ) / 4 );
122
-
123
- }
124
-
125
- .tab5 label:hover {
126
-
127
- background: #eee;
128
-
129
- }
130
-
131
- .tab5 input:checked + label {
132
-
133
- background: #9fb7d4;
134
-
135
- color: white;
136
-
137
- padding: 5px 10px 3px 10px;
133
+ padding: 5px 10px 3px 10px;
138
-
139
- }
140
-
141
- .tab5 input {
142
-
143
- display: none;
144
-
145
- }
146
-
147
- .tab5 #tab5-b1,
148
-
149
- .tab5 #tab5-b2,
150
-
151
- .tab5 #tab5-b3,
152
-
153
- .tab5 #tab5-b4 {
154
-
155
- display: none;
156
-
157
- padding: 10px;
158
-
159
- }
160
-
161
- .tab5 #tab5-1:checked ~ #tab5-b1,
162
-
163
- .tab5 #tab5-2:checked ~ #tab5-b2,
164
-
165
- .tab5 #tab5-3:checked ~ #tab5-b3,
166
-
167
- .tab5 #tab5-4:checked ~ #tab5-b4 {
168
-
169
- display: block;
170
-
171
- border: 1px solid #9fb7d4;
172
134
 
173
135
  }
174
136
 
175
137
 
176
138
 
177
- <!--[if lt IE 9]>
139
+ .tab5 #tab5-1:checked ~ .tab-panels #tab5-b1,
178
140
 
179
- <style>
141
+ .tab5 #tab5-2:checked ~ .tab-panels #tab5-b2,
180
142
 
181
- .tab5 #tab5-b1,
143
+ .tab5 #tab5-3:checked ~ .tab-panels #tab5-b3,
182
144
 
183
- .tab5 #tab5-b2,
145
+ .tab5 #tab5-4:checked ~ .tab-panels #tab5-b4 {
184
146
 
185
- .tab5 #tab5-b3,
147
+ display: block;
186
148
 
187
- .tab5 #tab5-b4 {
188
-
189
- display: block;
149
+ border: 1px solid #9fb7d4;
190
150
 
191
151
  }
192
152
 
193
- </style>
194
153
 
154
+
155
+ .tab5 [role="tablist"] {
156
+
157
+ display: flex;
158
+
159
+ flex-wrap: wrap;
160
+
161
+ }
162
+
163
+
164
+
165
+ .tab5 [role="tablist"] > label {
166
+
195
- <![endif]-->
167
+ flex: 1 1 auto;
168
+
169
+ margin: 0;
170
+
171
+ }
172
+
173
+
174
+
175
+ .tab5 [role="tablist"] > label:not(:first-child) {
176
+
177
+ margin-left: 5px;
178
+
179
+ }
196
180
 
197
181
  ```
182
+
183
+
184
+
185
+ 上記、コードを返答をいただいたものに変更いたしました。
186
+
187
+ レスポンシブ対応にしたいのですが、スマホサイズ時にナンバー4のタブが1-3の下に回り込んでしまいます。
188
+
189
+ こちらの解決方法はありますでしょうか。
190
+
191
+
192
+
193
+ ▼現在の状態
194
+
195
+ ![イメージ説明](6519b3bd0a6743735073fc48e03b337a.png)

5

書式の改善

2018/12/28 06:38

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -118,29 +118,7 @@
118
118
 
119
119
  .tab5 label {
120
120
 
121
- display: inline-block;
122
-
123
- margin: 0;
124
-
125
- padding: 0;
126
-
127
- }
128
-
129
- .tab5 label {
130
-
131
- display: inline-block;
132
-
133
- width: 78px;
121
+ width: calc( ( 100% - 89px ) / 4 );
134
-
135
- padding: 3px 10px;
136
-
137
- cursor: pointer;
138
-
139
- background: #ddd;
140
-
141
- color: #777;
142
-
143
- margin-right: -2px;
144
122
 
145
123
  }
146
124
 

4

書式の改善

2018/12/28 06:21

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,7 @@
32
32
 
33
33
  ▼現在のコード
34
34
 
35
- ```ここに言語を入力
36
-
37
- --------------------------------------------------------------
38
-
39
- html
35
+ ```html
40
-
41
- --------------------------------------------------------------
42
36
 
43
37
  <div class="tab5">
44
38
 
@@ -100,13 +94,11 @@
100
94
 
101
95
  <!--tab5--></div>
102
96
 
103
-
104
-
105
- ----------------------------------------------------------
97
+ ```
106
-
98
+
99
+
100
+
107
- CSS
101
+ ```CSS
108
-
109
- ----------------------------------------------------------
110
102
 
111
103
  .tab5 {
112
104
 

3

書式の改善

2018/12/28 05:08

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -32,17 +32,15 @@
32
32
 
33
33
  ▼現在のコード
34
34
 
35
+ ```ここに言語を入力
36
+
35
37
  --------------------------------------------------------------
36
38
 
37
39
  html
38
40
 
39
41
  --------------------------------------------------------------
40
42
 
41
- ```ここに言語を入力
42
-
43
- コード
44
-
45
- ```<div class="tab5">
43
+ <div class="tab5">
46
44
 
47
45
  <div class="tab-content">
48
46
 
@@ -225,3 +223,5 @@
225
223
  </style>
226
224
 
227
225
  <![endif]-->
226
+
227
+ ```

2

書式の改善

2018/12/28 04:59

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,17 @@
32
32
 
33
33
  ▼現在のコード
34
34
 
35
- ----------------------------------------------------------------------------------------
35
+ --------------------------------------------------------------
36
36
 
37
37
  html
38
38
 
39
- ----------------------------------------------------------------------------------------
39
+ --------------------------------------------------------------
40
+
40
-
41
+ ```ここに言語を入力
42
+
43
+ コード
44
+
41
- <div class="tab5">
45
+ ```<div class="tab5">
42
46
 
43
47
  <div class="tab-content">
44
48
 
@@ -100,15 +104,11 @@
100
104
 
101
105
 
102
106
 
103
- --------------------------------------------------------------------------------------
107
+ ----------------------------------------------------------
104
108
 
105
109
  CSS
106
110
 
107
- --------------------------------------------------------------------------------------
111
+ ----------------------------------------------------------
108
-
109
-
110
-
111
-
112
112
 
113
113
  .tab5 {
114
114
 

1

不足情報の追加

2018/12/28 04:59

投稿

meeee
meeee

スコア12

test CHANGED
File without changes
test CHANGED
@@ -27,3 +27,201 @@
27
27
  %で指定を入れてみたのですが、うまくぴったりにすることができませんでした。
28
28
 
29
29
  変更の仕方がわかる方がいましたら、ご教授願えませんでしょうか。
30
+
31
+
32
+
33
+ ▼現在のコード
34
+
35
+ ----------------------------------------------------------------------------------------
36
+
37
+ html
38
+
39
+ ----------------------------------------------------------------------------------------
40
+
41
+ <div class="tab5">
42
+
43
+ <div class="tab-content">
44
+
45
+ <input id="tab5-1" type="radio" name="tab5" checked>
46
+
47
+ <label for="tab5-1">1</label>
48
+
49
+ <input id="tab5-2" type="radio" name="tab5">
50
+
51
+ <label for="tab5-2">2</label>
52
+
53
+ <input id="tab5-3" type="radio" name="tab5">
54
+
55
+ <label for="tab5-3">3</label>
56
+
57
+ <input id="tab5-4" type="radio" name="tab5">
58
+
59
+ <label for="tab5-4">4</label>
60
+
61
+ <div id="tab5-b1">
62
+
63
+ <p>コンテンツ1</p>
64
+
65
+ </div>
66
+
67
+ <div id="tab5-b2">
68
+
69
+ <p>コンテンツ2</p>
70
+
71
+ <p>コンテンツ2</p>
72
+
73
+ </div>
74
+
75
+ <div id="tab5-b3">
76
+
77
+ <p>コンテンツ3</p>
78
+
79
+ <p>コンテンツ3</p>
80
+
81
+ <p>コンテンツ3</p>
82
+
83
+ </div>
84
+
85
+ <div id="tab5-b4">
86
+
87
+ <p>コンテンツ4</p>
88
+
89
+ <p>コンテンツ4</p>
90
+
91
+ <p>コンテンツ4</p>
92
+
93
+ <p>コンテンツ4</p>
94
+
95
+ </div>
96
+
97
+ <!--tab-content--></div>
98
+
99
+ <!--tab5--></div>
100
+
101
+
102
+
103
+ --------------------------------------------------------------------------------------
104
+
105
+ CSS
106
+
107
+ --------------------------------------------------------------------------------------
108
+
109
+
110
+
111
+
112
+
113
+ .tab5 {
114
+
115
+ width: 100%;/*横幅はここで設定します。100%にすれば可変になります。*/
116
+
117
+ min-width: 320px;
118
+
119
+ margin: 0 auto;
120
+
121
+ }
122
+
123
+ .tab5 .tab-content {
124
+
125
+ margin: 0 10px;
126
+
127
+ }
128
+
129
+ .tab5 label {
130
+
131
+ display: inline-block;
132
+
133
+ margin: 0;
134
+
135
+ padding: 0;
136
+
137
+ }
138
+
139
+ .tab5 label {
140
+
141
+ display: inline-block;
142
+
143
+ width: 78px;
144
+
145
+ padding: 3px 10px;
146
+
147
+ cursor: pointer;
148
+
149
+ background: #ddd;
150
+
151
+ color: #777;
152
+
153
+ margin-right: -2px;
154
+
155
+ }
156
+
157
+ .tab5 label:hover {
158
+
159
+ background: #eee;
160
+
161
+ }
162
+
163
+ .tab5 input:checked + label {
164
+
165
+ background: #9fb7d4;
166
+
167
+ color: white;
168
+
169
+ padding: 5px 10px 3px 10px;
170
+
171
+ }
172
+
173
+ .tab5 input {
174
+
175
+ display: none;
176
+
177
+ }
178
+
179
+ .tab5 #tab5-b1,
180
+
181
+ .tab5 #tab5-b2,
182
+
183
+ .tab5 #tab5-b3,
184
+
185
+ .tab5 #tab5-b4 {
186
+
187
+ display: none;
188
+
189
+ padding: 10px;
190
+
191
+ }
192
+
193
+ .tab5 #tab5-1:checked ~ #tab5-b1,
194
+
195
+ .tab5 #tab5-2:checked ~ #tab5-b2,
196
+
197
+ .tab5 #tab5-3:checked ~ #tab5-b3,
198
+
199
+ .tab5 #tab5-4:checked ~ #tab5-b4 {
200
+
201
+ display: block;
202
+
203
+ border: 1px solid #9fb7d4;
204
+
205
+ }
206
+
207
+
208
+
209
+ <!--[if lt IE 9]>
210
+
211
+ <style>
212
+
213
+ .tab5 #tab5-b1,
214
+
215
+ .tab5 #tab5-b2,
216
+
217
+ .tab5 #tab5-b3,
218
+
219
+ .tab5 #tab5-b4 {
220
+
221
+ display: block;
222
+
223
+ }
224
+
225
+ </style>
226
+
227
+ <![endif]-->