teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

cssタグ更新

2017/08/15 07:47

投稿

holic
holic

スコア134

answer CHANGED
@@ -1,61 +1,81 @@
1
1
  ul.wrapper要素に-ms-grid-columns,-ms-grid-rowsを追記しました。
2
- しかしこのベンダープレフィックスのタグにはrepeatが使えないために要素となる数値は決め打ち入力ることになりました
2
+ しかしこのベンダープレフィックスのタグにはrepeatが使えないようです
3
3
  更新後のcssを記述します。
4
4
 
5
5
 
6
6
  ```css
7
+ *{
8
+ padding:0;
9
+ margin:0;
10
+ }
11
+
7
- ul.wrapper {
12
+ ul.grid_area {
8
13
  width: 1000px;
9
14
  margin:0 auto;
10
15
  display: grid;
11
16
  display: -ms-grid;
12
17
  grid-template-columns: repeat(6, 1fr);
13
- -ms-grid-columns: 159px 159px 159px 159px 159px 159px;
18
+ -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
14
19
  grid-gap: 10px;
15
20
  /*grid-auto-rows: minmax(100px, auto);*/
16
- -ms-grid-rows: 159px 159px 159px;
21
+ -ms-grid-rows: 1fr 1fr 1fr;
17
22
  list-style: none;
18
23
  }
19
- ul.wrapper li{
24
+ ul.grid_area li{
20
25
  background: #ccc;
21
26
  }
22
- ul.wrapper li img{
27
+ ul.grid_area li img{
28
+ display: block;
23
- max-width: 100%;display: block;
29
+ max-width: 100%;
24
30
  }
25
31
 
26
32
 
27
33
  /*IE10*/
28
34
  @media all and (-ms-high-contrast:none) {
29
- ul.wrapper li {
35
+ ul.grid_area{
30
- margin: 5px;
36
+ margin-top: -5px;
37
+ margin-bottom: -5px;
31
38
  }
39
+ ul.grid_area li {
40
+ margin: 5px;
41
+ }
32
42
  }
33
43
 
34
44
  /*IE11*/
35
45
  @media all and (-ms-high-contrast:none) {
36
- *::-ms-backdrop, ul.wrapper li {
46
+ *::-ms-backdrop,
47
+ ul.grid_area{
48
+ margin-top: -5px;
49
+ margin-bottom: -5px;
50
+ }
51
+ ul.grid_area li {
37
- margin: 5px;
52
+ margin: 5px;
38
- }
53
+ }
39
54
  }
40
55
 
41
56
  /*EDGE*/
57
+ _:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area {
58
+ margin-top: -5px;
59
+ margin-bottom: -5px;
60
+ }
61
+
42
- _:-ms-lang(x), _::-webkit-meter-bar,ul.wrapper li {
62
+ _:-ms-lang(x), _::-webkit-meter-bar,ul.grid_area li {
43
63
  margin: 5px;
44
64
  }
45
65
 
46
- li:nth-child(1) {
66
+ ul.grid_area li:nth-child(1) {
47
67
  grid-column: 1;
48
68
  -ms-grid-column: 1;
49
69
  grid-row: 1;
50
70
  -ms-grid-row: 1;
51
71
  }
52
- li:nth-child(2) {
72
+ ul.grid_area li:nth-child(2) {
53
73
  grid-column: 2;
54
74
  -ms-grid-column: 2;
55
75
  grid-row: 1;
56
76
  -ms-grid-row: 1;
57
77
  }
58
- li:nth-child(3) {
78
+ ul.grid_area li:nth-child(3) {
59
79
  grid-column: 3/5;
60
80
  -ms-grid-column: 3;
61
81
  -ms-grid-column-span:2;
@@ -63,20 +83,20 @@
63
83
  -ms-grid-row: 1;
64
84
  -ms-grid-row-span:2;
65
85
  }
66
- li:nth-child(4) {
86
+ ul.grid_area li:nth-child(4) {
67
87
  grid-column: 5;
68
88
  -ms-grid-column: 5;
69
89
  grid-row: 1;
70
90
  -ms-grid-row: 1;
71
91
  }
72
- li:nth-child(5) {
92
+ ul.grid_area li:nth-child(5) {
73
93
  grid-column: 6;
74
94
  -ms-grid-column: 6;
75
95
  grid-row: 1;
76
96
  -ms-grid-row: 1;
77
97
 
78
98
  }
79
- li:nth-child(6) {
99
+ ul.grid_area li:nth-child(6) {
80
100
  grid-column: 1/3;
81
101
  -ms-grid-column: 1;
82
102
  -ms-grid-column-span:2;
@@ -84,19 +104,19 @@
84
104
  -ms-grid-row: 2;
85
105
  -ms-grid-row-span:2;
86
106
  }
87
- li:nth-child(7) {
107
+ ul.grid_area li:nth-child(7) {
88
108
  grid-column: 3;
89
109
  -ms-grid-column: 3;
90
110
  grid-row: 3;
91
111
  -ms-grid-row: 3;
92
112
  }
93
- li:nth-child(8) {
113
+ ul.grid_area li:nth-child(8) {
94
114
  grid-column: 4;
95
115
  -ms-grid-column: 4;
96
116
  grid-row: 3;
97
117
  -ms-grid-row: 3;
98
118
  }
99
- li:nth-child(9) {
119
+ ul.grid_area li:nth-child(9) {
100
120
  grid-column: 5/7;
101
121
  -ms-grid-column: 5;
102
122
  -ms-grid-column-span:2;
@@ -104,8 +124,7 @@
104
124
  -ms-grid-row: 2;
105
125
  -ms-grid-row-span:2;
106
126
  }
127
+
107
128
  ```
108
129
 
109
- ul.wrapperのwidthを変える場合は-ms-grid-columns,-ms-grid-rowsの数値も記述し直さなければならないのがネックですね。表示的にはこれで解決しました。
110
-
111
130
  もしバグがありましたらなんなりと申してください、よろしくお願いします。

1

記入ミスを更新

2017/08/15 07:47

投稿

holic
holic

スコア134

answer CHANGED
@@ -13,7 +13,7 @@
13
13
  -ms-grid-columns: 159px 159px 159px 159px 159px 159px;
14
14
  grid-gap: 10px;
15
15
  /*grid-auto-rows: minmax(100px, auto);*/
16
- -ms-grid-rows: 159px 159px 159px 159px 159px 159px;
16
+ -ms-grid-rows: 159px 159px 159px;
17
17
  list-style: none;
18
18
  }
19
19
  ul.wrapper li{