teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTMLに関する質問grid or flexを使って、横3列を2列にしたい

編集履歴

質問編集履歴

1

2022/01/12 13:18

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -1,325 +1,165 @@
1
1
  ### 前提・実現したいこと
2
-
3
2
  標題をしたいのですが、レスポンシブ時に、毎回、カードの大きさを調整している現状があります。
4
-
5
3
  大きさを変えずに(コードを書くもじ)を減らしたい
6
4
 
7
-
8
-
9
5
  ### 試したこと
10
-
11
6
  containerのmax-widthをgoogle ツールで確認しながら調整していましたが、こんなにめんどくさい書き方は
12
-
13
7
  あまりよろしくないと判断し、ほかのアイデアがないかと思い、質問しました。
14
8
 
15
-
16
-
17
9
  回転させた状態にはしたいと感じています。
18
-
19
10
  レスポンシブ時(特にスマホ時)は縦長はUI目線でさけたいです。、
20
-
21
-
22
11
 
23
12
  ### 該当のソースコード
24
13
 
25
-
26
-
27
14
  ```HTML
28
-
29
15
  <!DOCTYPE html>
30
-
31
16
  <html>
32
-
33
17
  <head>
34
-
35
18
  <title></title>
36
-
37
19
  <link rel="stylesheet" href="/asset/css/destyle.css">
38
-
39
20
  <link rel="stylesheet" href="/asset/css/style.css">
40
-
41
21
  </head>
42
-
43
22
  <body>
44
-
45
23
  <div class="skills-inner">
46
-
47
24
  <h2 class="skills-tt ttl-adjust">Skills</h2><!-- /.about-ttl -->
48
-
49
25
  <div class="skills-container">
50
-
51
26
  <ul class="skills_list" role="list">
52
-
53
27
  <li class="skills_item pc-skills pc-skills_front passive">
54
-
55
28
  <h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
56
-
57
29
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
58
-
59
30
  <a href=""></a>
60
-
61
31
  </li><!-- /.skills_item -->
62
-
63
32
  <!--2-->
64
-
65
33
  <li class="skills_item pc-skills pc-skills_back active">
66
-
67
34
  <h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
68
-
69
35
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
70
-
71
36
  <p class="skills-desc_back">★</p><!-- /.skills-desc -->
72
-
73
37
  <a href=""></a>
74
-
75
38
  </li><!-- /.skills_item -->
76
-
77
39
  </ul><!-- /.skills_list -->
78
-
79
40
  <ul class="skills_list" role="list">
80
-
81
41
  <li class="skills_item pc-skills pc-skills_front passive">
82
-
83
42
  <h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
84
-
85
43
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
86
-
87
44
  <a href=""></a>
88
-
89
45
  </li><!-- /.skills_item -->
90
-
91
46
  <!--2-->
92
-
93
47
  <li class="skills_item pc-skills pc-skills_back active">
94
-
95
48
  <h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
96
-
97
49
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
98
-
99
50
  <p class="skills-desc_back"></p><!-- /.skills-desc -->
100
-
101
51
  <a href=""></a>
102
-
103
52
  </li><!-- /.skills_item -->
104
-
105
53
  </ul><!-- /.skills_list -->
106
-
107
54
  <ul class="skills_list" role="list">
108
-
109
55
  <li class="skills_item pc-skills pc-skills_front passive">
110
-
111
56
  <h3 class="pc-skills_ttl">JQuery</h3><!-- /.pc-skills_ttl -->
112
-
113
57
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
114
-
115
58
  <a href=""></a>
116
-
117
59
  </li><!-- /.skills_item -->
118
-
119
60
  <!--2-->
120
-
121
61
  <li class="skills_item pc-skills pc-skills_back active">
122
-
123
62
  <h3 class="pc-skills_ttl">J</h3><!-- /.pc-skills_ttl -->
124
-
125
63
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
126
-
127
64
  <p class="skills-desc_back">★</p><!-- /.skills-desc -->
128
-
129
65
  <a href=""></a>
130
-
131
66
  </li><!-- /.skills_item -->
132
-
133
67
  </ul><!-- /.skills_list -->
134
-
135
68
  <ul class="skills_list" role="list">
136
-
137
69
  <li class="skills_item pc-skills pc-skills_front passive">
138
-
139
70
  <h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
140
-
141
71
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
142
-
143
72
  <a href=""></a>
144
-
145
73
  </li><!-- /.skills_item -->
146
-
147
74
  <!--2-->
148
-
149
75
  <li class="skills_item pc-skills pc-skills_back active">
150
-
151
76
  <h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
152
-
153
77
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
154
-
155
78
  <p class="skills-desc_back">★</p><!-- /.skills-desc -->
156
-
157
79
  <a href=""></a>
158
-
159
80
  </li><!-- /.skills_item -->
160
-
161
81
  </ul><!-- /.skills_list -->
162
-
163
82
  <ul class="skills_list" role="list">
164
-
165
83
  <li class="skills_item pc-skills pc-skills_front passive">
166
-
167
84
  <h3 class="pc-skills_ttl">o</h3><!-- /.pc-skills_ttl -->
168
-
169
85
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
170
-
171
86
  <a href=""></a>
172
-
173
87
  </li><!-- /.skills_item -->
174
-
175
88
  <!--2-->
176
-
177
89
  <li class="skills_item pc-skills pc-skills_back active">
178
-
179
90
  <h3 class="pc-skills_ttl">W</h3><!-- /.pc-skills_ttl -->
180
-
181
91
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
182
-
183
92
  <p class="skills-desc_back">★</p><!-- /.skills-desc -->
184
-
185
93
  <a href=""></a>
186
-
187
94
  </li><!-- /.skills_item -->
188
-
189
95
  </ul><!-- /.skills_list -->
190
-
191
96
  <ul class="skills_list" role="list">
192
-
193
97
  <li class="skills_item pc-skills pc-skills_front passive">
194
-
195
98
  <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
196
-
197
99
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
198
-
199
100
  <a href=""></a>
200
-
201
101
  </li><!-- /.skills_item -->
202
-
203
102
  <!--2-->
204
-
205
103
  <li class="skills_item pc-skills pc-skills_back active">
206
-
207
104
  <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
208
-
209
105
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
210
-
211
106
  <p class="skills-desc_back">★★★☆☆</p><!-- /.skills-desc -->
212
-
213
107
  <a href=""></a>
214
-
215
108
  </li><!-- /.skills_item -->
216
-
217
109
  </ul><!-- /.skills_list -->
218
-
219
110
  <ul class="skills_list" role="list">
220
-
221
111
  <li class="skills_item pc-skills pc-skills_front passive">
222
-
223
112
  <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
224
-
225
113
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
226
-
227
114
  <a href=""></a>
228
-
229
115
  </li><!-- /.skills_item -->
230
-
231
116
  <!--2-->
232
-
233
117
  <li class="skills_item pc-skills pc-skills_back active">
234
-
235
118
  <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
236
-
237
119
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
238
-
239
120
  <p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
240
-
241
121
  <a href=""></a>
242
-
243
122
  </li><!-- /.skills_item -->
244
-
245
123
  </ul><!-- /.skills_list -->
246
-
247
124
  <ul class="skills_list" role="list">
248
-
249
125
  <li class="skills_item pc-skills pc-skills_front passive">
250
-
251
126
  <h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
252
-
253
127
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
254
-
255
128
  <a href=""></a>
256
-
257
129
  </li><!-- /.skills_item -->
258
-
259
130
  <!--2-->
260
-
261
131
  <li class="skills_item pc-skills pc-skills_back active">
262
-
263
132
  <h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
264
-
265
133
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
266
-
267
134
  <p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
268
-
269
135
  <a href=""></a>
270
-
271
136
  </li><!-- /.skills_item -->
272
-
273
137
  </ul><!-- /.skills_list -->
274
-
275
138
  <ul class="skills_list" role="list">
276
-
277
139
  <li class="skills_item pc-skills pc-skills_front passive">
278
-
279
140
  <h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
280
-
281
141
  <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
282
-
283
142
  <a href=""></a>
284
-
285
143
  </li><!-- /.skills_item -->
286
-
287
144
  <!--2-->
288
-
289
145
  <li class="skills_item pc-skills pc-skills_back active">
290
-
291
146
  <h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
292
-
293
147
  <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
294
-
295
148
  <p class="skills-desc_back">★☆☆☆☆</p><!-- /.skills-desc -->
296
-
297
149
  <a href=""></a>
298
-
299
150
  </li><!-- /.skills_item -->
300
-
301
151
  </ul><!-- /.skills_list -->
302
-
303
152
  </div><!-- /.skills-container -->
304
-
305
153
  </div><!-- /.container -->
306
-
307
154
  <!-- /.skills -->
308
-
309
155
  <script src="./asserts/js/jquery-3.6.0.min.js"></script>
310
-
311
156
  <script src="./asserts/js/script.js"></script>
312
-
313
157
  </body>
314
-
315
158
  </html>
316
-
317
159
  ```
318
160
 
319
161
 
320
-
321
-
322
-
323
162
  ### 補足情報（FW/ツールのバージョンなど）
324
-
325
163
  [CSS,JS](https://jsfiddle.net/yrox0spm/1/)
164
+ ### 追記
165
+ ![現状(https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/0c7b36ad-1c02-41e5-8e1a-3e569669fb45.png)
HTMLCSS
HTMLCSS