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

編集履歴

質問編集履歴

1

2022/01/12 13:18

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -1,163 +1,165 @@
1
- ### 前提・実現したいこと
2
- 標題をしたいのですが、レスポンシブ時に、毎回、カードの大きさを調整している現状があります。
3
- 大きさを変えずに(コードを書くもじ)を減らしたい
4
-
5
- ### 試したこと
6
- containerのmax-widthをgoogle ツールで確認しながら調整していましたが、こんなにめんどくさい書き方は
7
- あまりよろしくないと判断し、ほかのアイデアがないかと思い、質問しました。
8
-
9
- 回転させた状態にはしたいと感じています。
10
- レスポンシブ時(特にスマホ時)は縦長はUI目線でさけたいです。、
11
-
12
- ### 該当のソースコード
13
-
14
- ```HTML
15
- <!DOCTYPE html>
16
- <html>
17
- <head>
18
- <title></title>
19
- <link rel="stylesheet" href="/asset/css/destyle.css">
20
- <link rel="stylesheet" href="/asset/css/style.css">
21
- </head>
22
- <body>
23
- <div class="skills-inner">
24
- <h2 class="skills-tt ttl-adjust">Skills</h2><!-- /.about-ttl -->
25
- <div class="skills-container">
26
- <ul class="skills_list" role="list">
27
- <li class="skills_item pc-skills pc-skills_front passive">
28
- <h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
29
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
30
- <a href=""></a>
31
- </li><!-- /.skills_item -->
32
- <!--2-->
33
- <li class="skills_item pc-skills pc-skills_back active">
34
- <h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
35
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
36
- <p class="skills-desc_back">★</p><!-- /.skills-desc -->
37
- <a href=""></a>
38
- </li><!-- /.skills_item -->
39
- </ul><!-- /.skills_list -->
40
- <ul class="skills_list" role="list">
41
- <li class="skills_item pc-skills pc-skills_front passive">
42
- <h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
43
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
44
- <a href=""></a>
45
- </li><!-- /.skills_item -->
46
- <!--2-->
47
- <li class="skills_item pc-skills pc-skills_back active">
48
- <h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
49
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
50
- <p class="skills-desc_back"></p><!-- /.skills-desc -->
51
- <a href=""></a>
52
- </li><!-- /.skills_item -->
53
- </ul><!-- /.skills_list -->
54
- <ul class="skills_list" role="list">
55
- <li class="skills_item pc-skills pc-skills_front passive">
56
- <h3 class="pc-skills_ttl">JQuery</h3><!-- /.pc-skills_ttl -->
57
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
58
- <a href=""></a>
59
- </li><!-- /.skills_item -->
60
- <!--2-->
61
- <li class="skills_item pc-skills pc-skills_back active">
62
- <h3 class="pc-skills_ttl">J</h3><!-- /.pc-skills_ttl -->
63
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
64
- <p class="skills-desc_back">★</p><!-- /.skills-desc -->
65
- <a href=""></a>
66
- </li><!-- /.skills_item -->
67
- </ul><!-- /.skills_list -->
68
- <ul class="skills_list" role="list">
69
- <li class="skills_item pc-skills pc-skills_front passive">
70
- <h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
71
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
72
- <a href=""></a>
73
- </li><!-- /.skills_item -->
74
- <!--2-->
75
- <li class="skills_item pc-skills pc-skills_back active">
76
- <h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
77
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
78
- <p class="skills-desc_back">★</p><!-- /.skills-desc -->
79
- <a href=""></a>
80
- </li><!-- /.skills_item -->
81
- </ul><!-- /.skills_list -->
82
- <ul class="skills_list" role="list">
83
- <li class="skills_item pc-skills pc-skills_front passive">
84
- <h3 class="pc-skills_ttl">o</h3><!-- /.pc-skills_ttl -->
85
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
86
- <a href=""></a>
87
- </li><!-- /.skills_item -->
88
- <!--2-->
89
- <li class="skills_item pc-skills pc-skills_back active">
90
- <h3 class="pc-skills_ttl">W</h3><!-- /.pc-skills_ttl -->
91
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
92
- <p class="skills-desc_back">★</p><!-- /.skills-desc -->
93
- <a href=""></a>
94
- </li><!-- /.skills_item -->
95
- </ul><!-- /.skills_list -->
96
- <ul class="skills_list" role="list">
97
- <li class="skills_item pc-skills pc-skills_front passive">
98
- <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
99
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
100
- <a href=""></a>
101
- </li><!-- /.skills_item -->
102
- <!--2-->
103
- <li class="skills_item pc-skills pc-skills_back active">
104
- <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
105
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
106
- <p class="skills-desc_back">★★★☆☆</p><!-- /.skills-desc -->
107
- <a href=""></a>
108
- </li><!-- /.skills_item -->
109
- </ul><!-- /.skills_list -->
110
- <ul class="skills_list" role="list">
111
- <li class="skills_item pc-skills pc-skills_front passive">
112
- <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
113
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
114
- <a href=""></a>
115
- </li><!-- /.skills_item -->
116
- <!--2-->
117
- <li class="skills_item pc-skills pc-skills_back active">
118
- <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
119
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
120
- <p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
121
- <a href=""></a>
122
- </li><!-- /.skills_item -->
123
- </ul><!-- /.skills_list -->
124
- <ul class="skills_list" role="list">
125
- <li class="skills_item pc-skills pc-skills_front passive">
126
- <h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
127
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
128
- <a href=""></a>
129
- </li><!-- /.skills_item -->
130
- <!--2-->
131
- <li class="skills_item pc-skills pc-skills_back active">
132
- <h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
133
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
134
- <p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
135
- <a href=""></a>
136
- </li><!-- /.skills_item -->
137
- </ul><!-- /.skills_list -->
138
- <ul class="skills_list" role="list">
139
- <li class="skills_item pc-skills pc-skills_front passive">
140
- <h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
141
- <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
142
- <a href=""></a>
143
- </li><!-- /.skills_item -->
144
- <!--2-->
145
- <li class="skills_item pc-skills pc-skills_back active">
146
- <h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
147
- <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
148
- <p class="skills-desc_back">★☆☆☆☆</p><!-- /.skills-desc -->
149
- <a href=""></a>
150
- </li><!-- /.skills_item -->
151
- </ul><!-- /.skills_list -->
152
- </div><!-- /.skills-container -->
153
- </div><!-- /.container -->
154
- <!-- /.skills -->
155
- <script src="./asserts/js/jquery-3.6.0.min.js"></script>
156
- <script src="./asserts/js/script.js"></script>
157
- </body>
158
- </html>
159
- ```
160
-
161
-
162
- ### 補足情報（FW/ツールのバージョンなど）
163
- [CSS,JS](https://jsfiddle.net/yrox0spm/1/)
1
+ ### 前提・実現したいこと
2
+ 標題をしたいのですが、レスポンシブ時に、毎回、カードの大きさを調整している現状があります。
3
+ 大きさを変えずに(コードを書くもじ)を減らしたい
4
+
5
+ ### 試したこと
6
+ containerのmax-widthをgoogle ツールで確認しながら調整していましたが、こんなにめんどくさい書き方は
7
+ あまりよろしくないと判断し、ほかのアイデアがないかと思い、質問しました。
8
+
9
+ 回転させた状態にはしたいと感じています。
10
+ レスポンシブ時(特にスマホ時)は縦長はUI目線でさけたいです。、
11
+
12
+ ### 該当のソースコード
13
+
14
+ ```HTML
15
+ <!DOCTYPE html>
16
+ <html>
17
+ <head>
18
+ <title></title>
19
+ <link rel="stylesheet" href="/asset/css/destyle.css">
20
+ <link rel="stylesheet" href="/asset/css/style.css">
21
+ </head>
22
+ <body>
23
+ <div class="skills-inner">
24
+ <h2 class="skills-tt ttl-adjust">Skills</h2><!-- /.about-ttl -->
25
+ <div class="skills-container">
26
+ <ul class="skills_list" role="list">
27
+ <li class="skills_item pc-skills pc-skills_front passive">
28
+ <h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
29
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
30
+ <a href=""></a>
31
+ </li><!-- /.skills_item -->
32
+ <!--2-->
33
+ <li class="skills_item pc-skills pc-skills_back active">
34
+ <h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
35
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
36
+ <p class="skills-desc_back">★</p><!-- /.skills-desc -->
37
+ <a href=""></a>
38
+ </li><!-- /.skills_item -->
39
+ </ul><!-- /.skills_list -->
40
+ <ul class="skills_list" role="list">
41
+ <li class="skills_item pc-skills pc-skills_front passive">
42
+ <h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
43
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
44
+ <a href=""></a>
45
+ </li><!-- /.skills_item -->
46
+ <!--2-->
47
+ <li class="skills_item pc-skills pc-skills_back active">
48
+ <h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
49
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
50
+ <p class="skills-desc_back"></p><!-- /.skills-desc -->
51
+ <a href=""></a>
52
+ </li><!-- /.skills_item -->
53
+ </ul><!-- /.skills_list -->
54
+ <ul class="skills_list" role="list">
55
+ <li class="skills_item pc-skills pc-skills_front passive">
56
+ <h3 class="pc-skills_ttl">JQuery</h3><!-- /.pc-skills_ttl -->
57
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
58
+ <a href=""></a>
59
+ </li><!-- /.skills_item -->
60
+ <!--2-->
61
+ <li class="skills_item pc-skills pc-skills_back active">
62
+ <h3 class="pc-skills_ttl">J</h3><!-- /.pc-skills_ttl -->
63
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
64
+ <p class="skills-desc_back">★</p><!-- /.skills-desc -->
65
+ <a href=""></a>
66
+ </li><!-- /.skills_item -->
67
+ </ul><!-- /.skills_list -->
68
+ <ul class="skills_list" role="list">
69
+ <li class="skills_item pc-skills pc-skills_front passive">
70
+ <h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
71
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
72
+ <a href=""></a>
73
+ </li><!-- /.skills_item -->
74
+ <!--2-->
75
+ <li class="skills_item pc-skills pc-skills_back active">
76
+ <h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
77
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
78
+ <p class="skills-desc_back">★</p><!-- /.skills-desc -->
79
+ <a href=""></a>
80
+ </li><!-- /.skills_item -->
81
+ </ul><!-- /.skills_list -->
82
+ <ul class="skills_list" role="list">
83
+ <li class="skills_item pc-skills pc-skills_front passive">
84
+ <h3 class="pc-skills_ttl">o</h3><!-- /.pc-skills_ttl -->
85
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
86
+ <a href=""></a>
87
+ </li><!-- /.skills_item -->
88
+ <!--2-->
89
+ <li class="skills_item pc-skills pc-skills_back active">
90
+ <h3 class="pc-skills_ttl">W</h3><!-- /.pc-skills_ttl -->
91
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
92
+ <p class="skills-desc_back">★</p><!-- /.skills-desc -->
93
+ <a href=""></a>
94
+ </li><!-- /.skills_item -->
95
+ </ul><!-- /.skills_list -->
96
+ <ul class="skills_list" role="list">
97
+ <li class="skills_item pc-skills pc-skills_front passive">
98
+ <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
99
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
100
+ <a href=""></a>
101
+ </li><!-- /.skills_item -->
102
+ <!--2-->
103
+ <li class="skills_item pc-skills pc-skills_back active">
104
+ <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
105
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
106
+ <p class="skills-desc_back">★★★☆☆</p><!-- /.skills-desc -->
107
+ <a href=""></a>
108
+ </li><!-- /.skills_item -->
109
+ </ul><!-- /.skills_list -->
110
+ <ul class="skills_list" role="list">
111
+ <li class="skills_item pc-skills pc-skills_front passive">
112
+ <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
113
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
114
+ <a href=""></a>
115
+ </li><!-- /.skills_item -->
116
+ <!--2-->
117
+ <li class="skills_item pc-skills pc-skills_back active">
118
+ <h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
119
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
120
+ <p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
121
+ <a href=""></a>
122
+ </li><!-- /.skills_item -->
123
+ </ul><!-- /.skills_list -->
124
+ <ul class="skills_list" role="list">
125
+ <li class="skills_item pc-skills pc-skills_front passive">
126
+ <h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
127
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
128
+ <a href=""></a>
129
+ </li><!-- /.skills_item -->
130
+ <!--2-->
131
+ <li class="skills_item pc-skills pc-skills_back active">
132
+ <h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
133
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
134
+ <p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
135
+ <a href=""></a>
136
+ </li><!-- /.skills_item -->
137
+ </ul><!-- /.skills_list -->
138
+ <ul class="skills_list" role="list">
139
+ <li class="skills_item pc-skills pc-skills_front passive">
140
+ <h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
141
+ <div class="pc-skills_img"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
142
+ <a href=""></a>
143
+ </li><!-- /.skills_item -->
144
+ <!--2-->
145
+ <li class="skills_item pc-skills pc-skills_back active">
146
+ <h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
147
+ <div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
148
+ <p class="skills-desc_back">★☆☆☆☆</p><!-- /.skills-desc -->
149
+ <a href=""></a>
150
+ </li><!-- /.skills_item -->
151
+ </ul><!-- /.skills_list -->
152
+ </div><!-- /.skills-container -->
153
+ </div><!-- /.container -->
154
+ <!-- /.skills -->
155
+ <script src="./asserts/js/jquery-3.6.0.min.js"></script>
156
+ <script src="./asserts/js/script.js"></script>
157
+ </body>
158
+ </html>
159
+ ```
160
+
161
+
162
+ ### 補足情報（FW/ツールのバージョンなど）
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