質問編集履歴
1
書式改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,39 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
現在レスポンシブ対応のwebサイトを開発しています。
|
|
6
|
-
|
|
7
|
-
要素順序を以下にしたいため、レイアウトをgrid-area-templateで実装しています。
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
●PC画面
|
|
12
|
-
|
|
13
|
-
BOX1 BOX2
|
|
14
|
-
|
|
15
|
-
BOX3 BOX4
|
|
16
|
-
|
|
17
|
-
BOX5
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
●スマホ画面
|
|
22
|
-
|
|
23
|
-
BOX1
|
|
24
|
-
|
|
25
|
-
BOX3
|
|
26
|
-
|
|
27
|
-
BOX5
|
|
28
|
-
|
|
29
|
-
BOX2
|
|
30
|
-
|
|
31
|
-
BOX4
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
5
|
+
以下のようにgrid内に改ページを入れたいのですが、何か方法はあるでしょうか。
|
|
36
|
-
|
|
37
|
-
解決できず困っている状況です。
|
|
38
6
|
|
|
39
7
|
|
|
40
8
|
|
|
@@ -51,8 +19,6 @@
|
|
|
51
19
|
<head>
|
|
52
20
|
|
|
53
21
|
<meta charset="utf-8">
|
|
54
|
-
|
|
55
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
56
22
|
|
|
57
23
|
<title>CSS Grid</title>
|
|
58
24
|
|
|
@@ -166,38 +132,6 @@
|
|
|
166
132
|
|
|
167
133
|
|
|
168
134
|
|
|
169
|
-
@media screen and (max-width: 480px) {
|
|
170
|
-
|
|
171
|
-
.container {
|
|
172
|
-
|
|
173
|
-
height: 600px;
|
|
174
|
-
|
|
175
|
-
width: auto;
|
|
176
|
-
|
|
177
|
-
display: grid;
|
|
178
|
-
|
|
179
|
-
grid-template-columns: 100%;
|
|
180
|
-
|
|
181
|
-
grid-template-rows: auto;
|
|
182
|
-
|
|
183
|
-
grid-template-areas:
|
|
184
|
-
|
|
185
|
-
"b1"
|
|
186
|
-
|
|
187
|
-
"b3"
|
|
188
|
-
|
|
189
|
-
"b5"
|
|
190
|
-
|
|
191
|
-
"b2"
|
|
192
|
-
|
|
193
|
-
"b4";
|
|
194
|
-
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
135
|
|
|
202
136
|
|
|
203
137
|
```
|
|
@@ -214,6 +148,4 @@
|
|
|
214
148
|
|
|
215
149
|
|
|
216
150
|
|
|
217
|
-
このレイアウトを実現するにはgrid-areaしか難しいかと思っているんが、
|
|
218
|
-
|
|
219
151
|
何か方法があればご教示いただけると幸いです。
|