回答編集履歴
3
細かい変更
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
おそらくrelativeだと、ブラウザ間での要素の配置の仕方の違いによって影響を受けてしまうので、あまりうまくいかないと思います。
|
|
5
|
+
おそらくrelativeだけだと、ブラウザ間での要素の配置の仕方の違いによって影響を受けてしまうので、あまりうまくいかないと思います。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
##1つ目の方法 : position: absolute;を親要素に指定
|
|
13
|
+
##1つ目の方法 : position: (absolute|relative);を親要素に指定、position: absolute;を子要素に指定
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
@@ -24,6 +24,8 @@
|
|
|
24
24
|
|
|
25
25
|
4つの図形を一つの要素(親要素)に入れ、その親要素の左上を基準に4つの図形の位置を決める、という方法です。
|
|
26
26
|
|
|
27
|
+
リンク先によると親要素のpositionはstatic以外である必要があるので、relativeかabsoluteを設定しましょう。下記コードではabsoluteを設定しました。relativeを設定する場合はtop、leftを設定しないことでstaticと同等とみなすことができます。
|
|
28
|
+
|
|
27
29
|
|
|
28
30
|
|
|
29
31
|
```lang-html
|
2
言葉足らずなところを補強・追加
test
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
おそらくrelativeだと、ブラウザ間での要素の配置の仕方の違いによって影響を受けてしまうので、あまりうまくいかないと思います。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
絶対にrelativeである必要性があるならばすみません、お手上げということにさせて下さい。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
5
13
|
##1つ目の方法 : position: absolute;を親要素に指定
|
|
6
14
|
|
|
7
15
|
|
1
変な形で投稿してしまったので整形
test
CHANGED
|
@@ -1,8 +1,138 @@
|
|
|
1
|
+
2つ方法を思いつきましたが、どちらにせよposition: absolute;を使うことになりました。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
|
-
##1つ目の方法 : position: absolute
|
|
5
|
+
##1つ目の方法 : position: absolute;を親要素に指定
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
2
|
-
|
|
9
|
+
[CSS : positionの「absolute」「relative」「fixed」のリファレンス](http://www.css-lecture.com/log/css/037.html)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
3
|
-
|
|
13
|
+
を参考にしました。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
4
|
-
|
|
17
|
+
4つの図形を一つの要素(親要素)に入れ、その親要素の左上を基準に4つの図形の位置を決める、という方法です。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
5
|
-
|
|
21
|
+
```lang-html
|
|
22
|
+
|
|
23
|
+
<!DOCTYPE html>
|
|
24
|
+
|
|
25
|
+
<html>
|
|
26
|
+
|
|
27
|
+
<head>
|
|
28
|
+
|
|
29
|
+
<meta charset="UTF-8">
|
|
30
|
+
|
|
31
|
+
<title>隣接する4つの図形 方法1</title>
|
|
32
|
+
|
|
33
|
+
<style>
|
|
34
|
+
|
|
35
|
+
#parent {
|
|
36
|
+
|
|
37
|
+
position: absolute;
|
|
38
|
+
|
|
39
|
+
top: 100px;
|
|
40
|
+
|
|
41
|
+
left: 100px;
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#red {
|
|
46
|
+
|
|
47
|
+
position: absolute;
|
|
48
|
+
|
|
49
|
+
background-color: red;
|
|
50
|
+
|
|
51
|
+
top: 0px;
|
|
52
|
+
|
|
53
|
+
left: 0px;
|
|
54
|
+
|
|
55
|
+
height: 250px;
|
|
56
|
+
|
|
57
|
+
width: 250px;
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#blue {
|
|
62
|
+
|
|
63
|
+
position: absolute;
|
|
64
|
+
|
|
65
|
+
background-color: blue;
|
|
66
|
+
|
|
67
|
+
top: 250px;
|
|
68
|
+
|
|
69
|
+
left: 0px;
|
|
70
|
+
|
|
71
|
+
height: 250px;
|
|
72
|
+
|
|
73
|
+
width: 250px;
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
#green {
|
|
78
|
+
|
|
79
|
+
position: absolute;
|
|
80
|
+
|
|
81
|
+
background-color: green;
|
|
82
|
+
|
|
83
|
+
top: 0px;
|
|
84
|
+
|
|
85
|
+
left: 250px;
|
|
86
|
+
|
|
87
|
+
height: 250px;
|
|
88
|
+
|
|
89
|
+
width: 250px;
|
|
90
|
+
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
#yellow {
|
|
94
|
+
|
|
95
|
+
position: absolute;
|
|
96
|
+
|
|
97
|
+
background-color: yellow;
|
|
98
|
+
|
|
99
|
+
top: 250px;
|
|
100
|
+
|
|
101
|
+
left: 250px;
|
|
102
|
+
|
|
103
|
+
height: 250px;
|
|
104
|
+
|
|
105
|
+
width: 250px;
|
|
106
|
+
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
</style>
|
|
110
|
+
|
|
111
|
+
</head>
|
|
112
|
+
|
|
113
|
+
<body>
|
|
114
|
+
|
|
115
|
+
<div id="parent">
|
|
116
|
+
|
|
117
|
+
<div id="red"></div>
|
|
118
|
+
|
|
119
|
+
<div id="blue"></div>
|
|
120
|
+
|
|
121
|
+
<div id="green"></div>
|
|
122
|
+
|
|
123
|
+
<div id="yellow"></div>
|
|
124
|
+
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
</body>
|
|
128
|
+
|
|
129
|
+
</html>
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
ただしcssで記述している分図形のサイズ等を変更するのは面倒です。(変更したら位置も変更する必要あり)
|
|
6
136
|
|
|
7
137
|
|
|
8
138
|
|
|
@@ -28,7 +158,7 @@
|
|
|
28
158
|
|
|
29
159
|
<meta charset="UTF-8">
|
|
30
160
|
|
|
31
|
-
<title>隣接する4つの図形</title>
|
|
161
|
+
<title>隣接する4つの図形 方法2</title>
|
|
32
162
|
|
|
33
163
|
<script>
|
|
34
164
|
|
|
@@ -42,7 +172,7 @@
|
|
|
42
172
|
|
|
43
173
|
screen = document.getElementById("screen");
|
|
44
174
|
|
|
45
|
-
screen.style.
|
|
175
|
+
screen.style.width = window.innerWidth + "px";
|
|
46
176
|
|
|
47
177
|
screen.style.height = window.innerHeight + "px";
|
|
48
178
|
|
|
@@ -108,13 +238,11 @@
|
|
|
108
238
|
|
|
109
239
|
screen.addEventListener("click",function(e){
|
|
110
240
|
|
|
111
|
-
console.log("c");
|
|
112
|
-
|
|
113
|
-
squares["red"].style.left = e.x + "px";
|
|
241
|
+
squares["red"].style.left = e.x + "px";
|
|
114
|
-
|
|
242
|
+
|
|
115
|
-
squares["red"].style.top = e.y + "px";
|
|
243
|
+
squares["red"].style.top = e.y + "px";
|
|
116
|
-
|
|
244
|
+
|
|
117
|
-
setPosition();
|
|
245
|
+
setPosition();
|
|
118
246
|
|
|
119
247
|
},false);
|
|
120
248
|
|
|
@@ -148,10 +276,22 @@
|
|
|
148
276
|
|
|
149
277
|
実行後、適当なところをクリックすると4つの正方形が移動しますが、移動後の位置は何かしらの親要素によって決めるのではなく、赤い正方形を基準に決めています。
|
|
150
278
|
|
|
279
|
+
(方法1ではjsを入れたくなかったのであえて省きましたが、クリックイベントで親要素の位置を変えれば同じ挙動になります。)
|
|
280
|
+
|
|
151
281
|
|
|
152
282
|
|
|
153
283
|
つまり赤い正方形をjavascriptで別な適当な場所に配置しても、setPosition関数によってそこを基準にその他の正方形が配置し直されるので、常に互いに接するようになるわけです。
|
|
154
284
|
|
|
155
285
|
|
|
156
286
|
|
|
287
|
+
これは赤い正方形の変更に対して比較的強いですが、方法1と違い個別に設定するのは少し面倒になります。
|
|
288
|
+
|
|
289
|
+
4つの図形が全て同じならオススメの方法です。
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
|
|
157
|
-
まぁ、書いてきながら力技ですね。最後の手段でしょう。
|
|
293
|
+
まぁ、書いておきながらなんですが、力技ですね。最後の手段でしょう。
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
(長文失礼しました。m(_ _)m)
|