回答編集履歴

2

コード追加

2019/12/11 14:18

投稿

hatena19
hatena19

score106

test CHANGED
@@ -17,3 +17,119 @@
17
17
  上記のヒントを参考にWEB検索してできるところまで作成してください。
18
18
 
19
19
  そして行き詰ったら、その時点でのHTML、CSSを提示して、どこがどのようにうまくいかないかを質問してください。
20
+
21
+
22
+
23
+ 追記
24
+
25
+ ---
26
+
27
+ コードとレイアウトの画像が提示されたので、ご希望のレイアウトをgridで実現する場合のコード例
28
+
29
+
30
+
31
+ ```html
32
+
33
+ <div class="content">
34
+
35
+ <div class="item1">1</div>
36
+
37
+ <div class="item3">3</div>
38
+
39
+ <div class="item2">2</div>
40
+
41
+ </div>
42
+
43
+ ```
44
+
45
+ ```scss
46
+
47
+ .content{
48
+
49
+ display:grid;
50
+
51
+ grid-template-rows: auto auto auto;
52
+
53
+ grid-template-columns: 1fr 300px;
54
+
55
+ grid-gap: 10px;
56
+
57
+ .item1{
58
+
59
+ grid-row: 1;
60
+
61
+ grid-column: 1;
62
+
63
+ height:300px;
64
+
65
+ background-color: #ff8e8e;
66
+
67
+ }
68
+
69
+ .item2{
70
+
71
+ grid-row: 1 / 3;
72
+
73
+ grid-column: 2;
74
+
75
+ width: 300px;
76
+
77
+ background-color: #996cff;
78
+
79
+ }
80
+
81
+ .item3{
82
+
83
+ grid-row: 2;
84
+
85
+ grid-column: 1;
86
+
87
+ height:300px;
88
+
89
+ background-color: #8fe470;
90
+
91
+ }
92
+
93
+ }
94
+
95
+
96
+
97
+ @media (max-width:768px) {
98
+
99
+ .content{
100
+
101
+ .item1{
102
+
103
+ grid-row: 1;
104
+
105
+ grid-column: 1 / 3;
106
+
107
+ }
108
+
109
+ .item2{
110
+
111
+ grid-row: 2;
112
+
113
+ grid-column: 1 / 3;
114
+
115
+ width: 100%;
116
+
117
+ height: 300px;
118
+
119
+ }
120
+
121
+ .item3{
122
+
123
+ grid-row: 3;
124
+
125
+ grid-column: 1 / 3;
126
+
127
+ }
128
+
129
+ }
130
+
131
+ }
132
+
133
+ ```
134
+
135
+ [動作確認用サンプル](https://codepen.io/hatena19/pen/KKwzxNY)

1

コード追加

2019/12/11 12:39

投稿

hatena19
hatena19

score106

test CHANGED
@@ -17,209 +17,3 @@
17
17
  上記のヒントを参考にWEB検索してできるところまで作成してください。
18
18
 
19
19
  そして行き詰ったら、その時点でのHTML、CSSを提示して、どこがどのようにうまくいかないかを質問してください。
20
-
21
-
22
-
23
- 追記
24
-
25
- ---
26
-
27
- コードとレイアウトの画像が提示されたので、ご希望のレイアウトをgridで実現する場合のコード例
28
-
29
-
30
-
31
- ```html
32
-
33
- <div class="content">
34
-
35
- <div class="item1">1</div>
36
-
37
- <div class="item2">2</div>
38
-
39
- <div class="item3">3</div>
40
-
41
- </div>
42
-
43
- ```
44
-
45
- ```scss
46
-
47
- .content{
48
-
49
- display:grid;
50
-
51
- grid-template-rows: auto auto auto;
52
-
53
- grid-template-columns: 1fr 300px;
54
-
55
- grid-gap: 10px;
56
-
57
- .item1{
58
-
59
- grid-row: 1;
60
-
61
- grid-column: 1;
62
-
63
- height:300px;
64
-
65
- background-color: #ff8e8e;
66
-
67
- }
68
-
69
- .item2{
70
-
71
- grid-row: 1 / 3;
72
-
73
- grid-column: 2;
74
-
75
- width: 300px;
76
-
77
- background-color: #996cff;
78
-
79
- }
80
-
81
- .item3{
82
-
83
- grid-row: 2;
84
-
85
- grid-column: 1;
86
-
87
- height:300px;
88
-
89
- background-color: #8fe470;
90
-
91
- }
92
-
93
- }
94
-
95
-
96
-
97
- @media (max-width:768px) {
98
-
99
- .content{
100
-
101
- .item1{
102
-
103
- grid-row: 1;
104
-
105
- grid-column: 1 / 3;
106
-
107
- }
108
-
109
- .item2{
110
-
111
- grid-row: 2;
112
-
113
- grid-column: 1 / 3;
114
-
115
- width: 100%;
116
-
117
- height: 300px;
118
-
119
- }
120
-
121
- .item3{
122
-
123
- grid-row: 3;
124
-
125
- grid-column: 1 / 3;
126
-
127
- }
128
-
129
- }
130
-
131
- }
132
-
133
- ```
134
-
135
- [動作確認用サンプル](https://codepen.io/hatena19/pen/KKwzxNY)
136
-
137
-
138
-
139
- 下記のような書き方もできます。
140
-
141
- grid-template-areas を使います。こちらの方が視覚的にレイアウトが把握しやすいと思います。
142
-
143
-
144
-
145
- ```scss
146
-
147
- .content{
148
-
149
- display:grid;
150
-
151
- grid-template-rows: auto auto auto;
152
-
153
- grid-template-columns: 1fr 300px;
154
-
155
- grid-template-areas:
156
-
157
- "area1 area2"
158
-
159
- "area3 area2";
160
-
161
- grid-gap: 10px;
162
-
163
- .item1{
164
-
165
- grid-area: area1;
166
-
167
- height:300px;
168
-
169
- background-color: #ff8e8e;
170
-
171
- }
172
-
173
- .item2{
174
-
175
- grid-area: area2;
176
-
177
- width: 300px;
178
-
179
- background-color: #996cff;
180
-
181
- }
182
-
183
- .item3{
184
-
185
- grid-area: area3;
186
-
187
- height:300px;
188
-
189
- background-color: #8fe470;
190
-
191
- }
192
-
193
- }
194
-
195
-
196
-
197
- @media (max-width:768px) {
198
-
199
- .content{
200
-
201
- grid-template-areas:
202
-
203
- "area1 area1"
204
-
205
- "area2 area2"
206
-
207
- "area3 area3";
208
-
209
-
210
-
211
- .item2{
212
-
213
- width: 100%;
214
-
215
- height: 300px;
216
-
217
- }
218
-
219
- }
220
-
221
- }
222
-
223
- ```
224
-
225
- [動作確認用サンプル](https://codepen.io/hatena19/pen/dyPMQBp)