回答編集履歴

2

修正

2021/10/24 01:45

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
  width:100%;
16
16
 
17
- max-width:1300px;
17
+ max-width:1100px;
18
18
 
19
-
19
+ margin:0 auto;
20
20
 
21
-
21
+
22
22
 
23
23
 
24
24
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  #container .item{
28
28
 
29
- width:200px;
29
+ width:180px;
30
30
 
31
31
 
32
32
 
@@ -92,19 +92,13 @@
92
92
 
93
93
 
94
94
 
95
- }
96
-
97
-
98
-
99
-
100
-
101
95
  ```
102
96
 
103
97
 
104
98
 
105
99
  ```ここに言語を入力
106
100
 
107
- <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
101
+ <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
108
102
 
109
103
 
110
104
 

1

コード短くした

2021/10/24 01:45

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
@@ -1,6 +1,108 @@
1
- </head>
1
+ ```ここに言語を入力
2
2
 
3
- <body>
3
+ /*共通*/
4
+
5
+ #container {
6
+
7
+ display:flex;
8
+
9
+ justify-content:center;
10
+
11
+ align-items:center;
12
+
13
+ flex-wrap:wrap;
14
+
15
+ width:100%;
16
+
17
+ max-width:1300px;
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+ }
26
+
27
+ #container .item{
28
+
29
+ width:200px;
30
+
31
+
32
+
33
+ }
34
+
35
+
36
+
37
+ img{
38
+
39
+ width:100%;
40
+
41
+ max-width:100%;
42
+
43
+ height:auto;
44
+
45
+ vertical-align: bottom;
46
+
47
+ }
48
+
49
+ /*タブレット*/
50
+
51
+ @media screen and (min-width:768px) and ( max-width:1024px) {
52
+
53
+ /* 画面サイズが768pxから1024pxまではここを読み込む */
54
+
55
+ #container {
56
+
57
+ background:gray; /*動作チェックのカラー*/
58
+
59
+
60
+
61
+
62
+
63
+ }
64
+
65
+ #container .item {
66
+
67
+ width:220px;
68
+
69
+
70
+
71
+
72
+
73
+ }
74
+
75
+
76
+
77
+
78
+
79
+ /*スマホ*/
80
+
81
+ @media screen and (max-width: 767px) {
82
+
83
+ #container {
84
+
85
+ background:lemonchiffon;/*動作チェックのカラー*/
86
+
87
+
88
+
89
+ }
90
+
91
+
92
+
93
+
94
+
95
+ }
96
+
97
+
98
+
99
+
100
+
101
+ ```
102
+
103
+
104
+
105
+ ```ここに言語を入力
4
106
 
5
107
  <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
6
108
 
@@ -46,174 +148,22 @@
46
148
 
47
149
  <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
48
150
 
151
+ <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
152
+
153
+ <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
154
+
155
+ <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
156
+
157
+ <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu012.jpg"></div>
158
+
49
159
 
50
160
 
51
161
  </div>
52
162
 
53
- <script>
54
-
55
- $(function() {
56
-
57
- var wall = new Freewall("#container");
58
-
59
- wall.fitWidth();
60
-
61
- });
62
-
63
163
 
64
-
65
- -->
66
-
67
- </body>
68
-
69
- </html>
70
164
 
71
165
 
72
166
 
73
- #container {
167
+ ```
74
168
 
75
- display:flex;
76
-
77
- flex-wrap:wrap;
78
-
79
- width:100%;
80
-
81
- padding-left:23px;
82
-
83
- }
84
-
85
- #container .item img {
86
-
87
- background: rgb(135, 199, 135);
88
-
89
- width:300px;
90
-
91
- height:auto;
92
-
93
- vertical-align: bottom;
94
-
95
-
96
-
97
-
98
-
99
- }
100
-
101
- img{
102
-
103
- max-width:100%;
104
-
105
- height:auto;
106
-
107
- vertical-align: bottom;
108
-
109
- }
110
-
111
- /*スマホ (595以下のブラウザ)*/
112
-
113
- @media screen and (max-width: 596px) {
114
-
115
-
116
-
117
- #container {
118
-
119
-
120
-
121
- flex-direction: column;
122
-
123
-
124
-
125
- }
126
-
127
- #container .item img{
128
-
129
- max-width:100%;
130
-
131
- min-width:100%;
132
-
133
- width:340px;
134
-
135
- margin-bottom:200px;
136
-
137
-
138
-
139
- }
140
-
141
-
142
-
143
- }
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
- /*スマホ*/
156
-
157
- @media screen and (max-width: 767px) {
158
-
159
-
160
-
161
- #container .item img{
162
-
163
- max-width:100%;
164
-
165
- min-width:100%;
166
-
167
- width:290px;
168
-
169
-
170
-
171
- }
172
-
173
- #container {
174
-
175
- flex-wrap:wrap;
176
-
177
- margin-left:40px;
178
-
179
- }
180
-
181
- }
182
-
183
- /*タブレット*/
184
-
185
- @media screen and (min-width:768px) and ( max-width:1024px) {
186
-
187
- /* 画面サイズが768pxから1024pxまではここを読み込む */
188
-
189
- #container {
190
-
191
- flex-wrap:wrap;
192
-
193
- width:100%;
194
-
195
- background: #000;
196
-
197
-
198
-
199
- }
200
-
201
- #container .item img {
202
-
203
- width:220px;
204
-
205
- flex-wrap:wrap;
206
-
207
-
208
-
209
-
210
-
211
- }
212
-
213
-
214
-
215
- https://codepen.io/niconic73027793/pen/jOLyOYp
216
-
217
-
218
-
219
- こんな感じでね。
169
+ こんな感じでしょう