回答編集履歴
2
calcがいらないので、そのように修正
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ビュー系単位とcalc使うのが一番簡単かと
|
|
1
|
+
ビュー系単位~~とcalc~~使うのが一番簡単かと
|
|
2
2
|
|
|
3
3
|
```css
|
|
4
4
|
|
|
@@ -6,11 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
position: relative;
|
|
8
8
|
|
|
9
|
-
width:
|
|
9
|
+
width: 90vw; /* vwは、ビューの横幅に対して%をとることができる単位 */
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
margin: 50vh auto 0; /* vhはビューの高さに対して%をとることができる単位 */
|
|
12
|
-
|
|
13
|
-
margin: 50% 5vw 0;
|
|
14
12
|
|
|
15
13
|
}
|
|
16
14
|
|
|
@@ -24,8 +22,10 @@
|
|
|
24
22
|
|
|
25
23
|
width: 100%;
|
|
26
24
|
|
|
27
|
-
height: 45vw; /* 親が、90vwの
|
|
25
|
+
height: 45vw; /* 親が、90vwなので、その半分の45vw */
|
|
28
26
|
|
|
29
27
|
}
|
|
30
28
|
|
|
31
29
|
```
|
|
30
|
+
|
|
31
|
+
calcいらんですね。
|
1
数値が微妙にずれていたので、修正
test
CHANGED
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
|
|
19
19
|
position: absolute;
|
|
20
20
|
|
|
21
|
-
top: -4
|
|
21
|
+
top: -45vw; /* 親が、90vwの状態かつiframeが、横幅に対して、半分の高さで、真ん中に寄せたいため */
|
|
22
22
|
|
|
23
23
|
left: 0;
|
|
24
24
|
|
|
25
25
|
width: 100%;
|
|
26
26
|
|
|
27
|
-
height: 4
|
|
27
|
+
height: 45vw; /* 親が、90vwの横幅の状態のため、その半分の45vw */
|
|
28
28
|
|
|
29
29
|
}
|
|
30
30
|
|