回答編集履歴
5
コードの変更。何度もすみません。。
answer
CHANGED
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
const GROUP_NUM = 3;
|
|
54
54
|
|
|
55
55
|
const COLORS = [ // この配列は都合上あるものなので気にしなくていいです。
|
|
56
|
-
["ff0000","
|
|
56
|
+
["ff0000","dd0000"]
|
|
57
|
-
,["0000ff","
|
|
57
|
+
,["0000ff","0000dd"]
|
|
58
|
-
,["00ff00","
|
|
58
|
+
,["00ff00","00dd00"]
|
|
59
59
|
];
|
|
60
60
|
|
|
61
61
|
for(let i=0; i < GROUP_NUM; i++){
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
ちなみに、その仕様がなければdivで囲むだけで済みます。
|
|
97
97
|
|
|
98
98
|
```html
|
|
99
|
-
<div class="wrapper">
|
|
99
|
+
<div id="red" class="wrapper">
|
|
100
100
|
<div class="chld">
|
|
101
101
|
要素1
|
|
102
102
|
</div>
|
|
@@ -105,16 +105,25 @@
|
|
|
105
105
|
</div>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
|
-
<div class="wrapper">
|
|
108
|
+
<div id="blue" class="wrapper">
|
|
109
109
|
<div class="chld">
|
|
110
110
|
要素3
|
|
111
111
|
</div>
|
|
112
112
|
<div class="chld">
|
|
113
113
|
要素4
|
|
114
114
|
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div id="green" class="wrapper">
|
|
115
118
|
<div class="chld">
|
|
116
119
|
要素5
|
|
117
120
|
</div>
|
|
121
|
+
<div class="chld">
|
|
122
|
+
要素6
|
|
123
|
+
</div>
|
|
124
|
+
<div class="chld">
|
|
125
|
+
要素7
|
|
126
|
+
</div>
|
|
118
127
|
</div>
|
|
119
128
|
```
|
|
120
129
|
|
|
@@ -133,17 +142,28 @@
|
|
|
133
142
|
background-color: #888888;
|
|
134
143
|
}
|
|
135
144
|
|
|
145
|
+
.chld:last-child {
|
|
146
|
+
margin-bottom: 0;
|
|
147
|
+
}
|
|
148
|
+
|
|
136
149
|
.wrapper {
|
|
137
150
|
margin: 4vh 5vw;
|
|
138
151
|
padding: 2vh 5vw;
|
|
139
152
|
z-index: -1;
|
|
140
|
-
background-image: url(http://placehold.jp/5x5.png);
|
|
141
153
|
background-repeat: repeat;
|
|
142
154
|
}
|
|
143
155
|
|
|
144
|
-
|
|
156
|
+
#red {
|
|
145
|
-
|
|
157
|
+
background-image: url(http://placehold.jp/ff0000/dd0000/50x50.png);
|
|
146
158
|
}
|
|
159
|
+
|
|
160
|
+
#blue {
|
|
161
|
+
background-image: url(http://placehold.jp/0000ff/0000dd/50x50.png);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
#green {
|
|
165
|
+
background-image: url(http://placehold.jp/00ff00/00dd00/50x50.png);
|
|
166
|
+
}
|
|
147
167
|
```
|
|
148
168
|
|
|
149
169
|
長々と失礼しました。参考になれば幸いです。m(_ _)m
|
4
コードの編集
answer
CHANGED
|
@@ -19,9 +19,16 @@
|
|
|
19
19
|
<div class="chld group-2">
|
|
20
20
|
要素4
|
|
21
21
|
</div>
|
|
22
|
+
|
|
22
|
-
<div class="chld group-
|
|
23
|
+
<div class="chld group-3">
|
|
23
24
|
要素5
|
|
24
25
|
</div>
|
|
26
|
+
<div class="chld group-3">
|
|
27
|
+
要素6
|
|
28
|
+
</div>
|
|
29
|
+
<div class="chld group-3">
|
|
30
|
+
要素7
|
|
31
|
+
</div>
|
|
25
32
|
```
|
|
26
33
|
|
|
27
34
|
```css
|
3
コードの編集
answer
CHANGED
|
@@ -43,12 +43,18 @@
|
|
|
43
43
|
|
|
44
44
|
```js
|
|
45
45
|
var nth = 0;
|
|
46
|
-
const GROUP_NUM =
|
|
46
|
+
const GROUP_NUM = 3;
|
|
47
47
|
|
|
48
|
+
const COLORS = [ // この配列は都合上あるものなので気にしなくていいです。
|
|
49
|
+
["ff0000","880088"]
|
|
48
|
-
|
|
50
|
+
,["0000ff","000088"]
|
|
51
|
+
,["00ff00","008800"]
|
|
52
|
+
];
|
|
49
53
|
|
|
50
|
-
|
|
54
|
+
for(let i=0; i < GROUP_NUM; i++){
|
|
51
55
|
|
|
56
|
+
let n = document.getElementsByClassName("group-"+(i+1)).length;
|
|
57
|
+
|
|
52
58
|
let css =
|
|
53
59
|
`div:nth-of-type(${nth+1})::before {
|
|
54
60
|
content: "";
|
|
@@ -58,13 +64,14 @@
|
|
|
58
64
|
width: 90vw;
|
|
59
65
|
height: calc(calc(${n} * 10vh) + calc(${n-1} * 6vh) + 4vh);
|
|
60
66
|
z-index: -1;
|
|
61
|
-
background-image: url(http://placehold.jp/
|
|
67
|
+
background-image: url(http://placehold.jp/${COLORS[i][0]}/${COLORS[i][1]}/50x50.png);
|
|
62
68
|
background-repeat: repeat;
|
|
63
69
|
}`;
|
|
64
70
|
|
|
65
71
|
document.head.innerHTML += "<style>"+css+"</style>";
|
|
66
72
|
nth += n;
|
|
67
73
|
}
|
|
74
|
+
|
|
68
75
|
```
|
|
69
76
|
|
|
70
77
|
本当はcss(またはsassとか？)だけで済ましたかったのですが、私の力不足でjsに頼ってしまいました…すみません。。
|
2
css編集
answer
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
let n = document.getElementsByClassName("group-"+i).length;
|
|
51
51
|
|
|
52
52
|
let css =
|
|
53
|
-
`
|
|
53
|
+
`div:nth-of-type(${nth+1})::before {
|
|
54
54
|
content: "";
|
|
55
55
|
position: absolute;
|
|
56
56
|
top: -2vh;
|
1
コード編集
answer
CHANGED
|
@@ -83,10 +83,10 @@
|
|
|
83
83
|
|
|
84
84
|
```html
|
|
85
85
|
<div class="wrapper">
|
|
86
|
-
<div class="chld
|
|
86
|
+
<div class="chld">
|
|
87
87
|
要素1
|
|
88
88
|
</div>
|
|
89
|
-
<div class="chld
|
|
89
|
+
<div class="chld">
|
|
90
90
|
要素2
|
|
91
91
|
</div>
|
|
92
92
|
</div>
|