質問編集履歴

2

cssタグ修正

2017/08/15 07:45

投稿

holic
holic

スコア134

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  <body>
40
40
 
41
- <ul class="wrapper">
41
+ <ul class="grid_area">
42
42
 
43
43
  <li><img src="http://placehold.it/540x540/27709b/ffffff/?text=[No1]"></li>
44
44
 
@@ -76,7 +76,7 @@
76
76
 
77
77
 
78
78
 
79
- ul.wrapper {
79
+ ul.grid_area {
80
80
 
81
81
  width: 1000px;
82
82
 
@@ -98,13 +98,13 @@
98
98
 
99
99
  }
100
100
 
101
- ul.wrapper li{
101
+ ul.grid_area li{
102
102
 
103
103
  background: #ccc;
104
104
 
105
105
  }
106
106
 
107
- ul.wrapper li img{
107
+ ul.grid_area li img{
108
108
 
109
109
  max-width: 100%;display: block;
110
110
 
@@ -118,7 +118,7 @@
118
118
 
119
119
  @media all and (-ms-high-contrast:none) {
120
120
 
121
- ul.wrapper li {
121
+ ul.grid_area li {
122
122
 
123
123
  margin: 5px;
124
124
 
@@ -132,7 +132,7 @@
132
132
 
133
133
  @media all and (-ms-high-contrast:none) {
134
134
 
135
- *::-ms-backdrop, ul.wrapper li {
135
+ *::-ms-backdrop, ul.grid_area li {
136
136
 
137
137
  margin: 5px;
138
138
 
@@ -144,7 +144,7 @@
144
144
 
145
145
  /*EDGE*/
146
146
 
147
- _:-ms-lang(x), _::-webkit-meter-bar,ul.wrapper li {
147
+ _:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
148
148
 
149
149
  margin: 5px;
150
150
 
@@ -152,7 +152,7 @@
152
152
 
153
153
 
154
154
 
155
- li:nth-child(1) {
155
+ ul.grid_area li:nth-child(1) {
156
156
 
157
157
  grid-column: 1;
158
158
 
@@ -164,7 +164,7 @@
164
164
 
165
165
  }
166
166
 
167
- li:nth-child(2) {
167
+ ul.grid_area li:nth-child(2) {
168
168
 
169
169
  grid-column: 2;
170
170
 
@@ -176,7 +176,7 @@
176
176
 
177
177
  }
178
178
 
179
- li:nth-child(3) {
179
+ ul.grid_area li:nth-child(3) {
180
180
 
181
181
  grid-column: 3/5;
182
182
 
@@ -192,7 +192,7 @@
192
192
 
193
193
  }
194
194
 
195
- li:nth-child(4) {
195
+ ul.grid_area li:nth-child(4) {
196
196
 
197
197
  grid-column: 5;
198
198
 
@@ -204,7 +204,7 @@
204
204
 
205
205
  }
206
206
 
207
- li:nth-child(5) {
207
+ ul.grid_area li:nth-child(5) {
208
208
 
209
209
  grid-column: 6;
210
210
 
@@ -218,7 +218,7 @@
218
218
 
219
219
  }
220
220
 
221
- li:nth-child(6) {
221
+ ul.grid_area li:nth-child(6) {
222
222
 
223
223
  grid-column: 1/3;
224
224
 
@@ -234,7 +234,7 @@
234
234
 
235
235
  }
236
236
 
237
- li:nth-child(7) {
237
+ ul.grid_area li:nth-child(7) {
238
238
 
239
239
  grid-column: 3;
240
240
 
@@ -246,7 +246,7 @@
246
246
 
247
247
  }
248
248
 
249
- li:nth-child(8) {
249
+ ul.grid_area li:nth-child(8) {
250
250
 
251
251
  grid-column: 4;
252
252
 
@@ -258,7 +258,7 @@
258
258
 
259
259
  }
260
260
 
261
- li:nth-child(9) {
261
+ ul.grid_area li:nth-child(9) {
262
262
 
263
263
  grid-column: 5/7;
264
264
 
@@ -274,14 +274,6 @@
274
274
 
275
275
  }
276
276
 
277
- li:nth-child(10) {
278
-
279
- /*grid-column: 2;*/
280
-
281
- /*grid-row: 3;*/
282
-
283
- }
284
-
285
277
  ```
286
278
 
287
279
 

1

タイトル修正

2017/08/15 07:45

投稿

holic
holic

スコア134

test CHANGED
@@ -1 +1 @@
1
- css グリッドレイアウトをEdge/IE10/IE11でも対応させるためにはどうすればよいでしょうか?
1
+ css グリッドレイアウトdisplay: grid;)をIE10/IE11でも対応させるためにはどうすればよいでしょうか?
test CHANGED
@@ -8,8 +8,6 @@
8
8
 
9
9
  ![イメージ説明](43fdb2cb85c995498d160998e434a488.jpeg)
10
10
 
11
-
12
-
13
11
  cssグリッドレイアウトを下記の記事を参考に設置してみました。
14
12
 
15
13
  [CSS Grid Layout を極める!(場面別編)](http://qiita.com/kura07/items/486c19045aab8090d6d9)