回答編集履歴

3

コード修正

2023/06/02 23:49

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -19,7 +19,6 @@
19
19
  .btn {
20
20
  right: calc(10vw - (100vw - 100%) / 2);
21
21
  }
22
-
23
22
  .container {
24
23
  width: 80vw;
25
24
  }

2

コード修正

2023/06/02 23:48

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -11,7 +11,6 @@
11
11
  }
12
12
  .container {
13
13
  width: 80%;
14
- margin: 0 auto;
15
14
  }
16
15
  ```
17
16
  あるいは、幅をvwで指定したい場合は、`100vw - 100%` でスクロールバーの幅が計算できるので、それを利用して、

1

コードの追記

2023/06/02 23:47

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -1,13 +1,12 @@
1
1
  ボタンの位置を`right: 10vw;`で指定していますが、
2
- fixed はスクロールバーを除いた画面を基準に配置します。
2
+ fixed はスクロールバーを除いた画面を基準に配置します。
3
3
  `right: 0;`と設定すればスクロールバーがあるときは、スクロールバーの左に位置することからもわかります。
4
- それに対して、`.container`は`width: 80vw;`とvw単位で幅を設定しています。vwの幅はスクロールバーも含む幅になります。
4
+ それに対して、`.container`は`width: 80vw;`とvw単位で幅を設定しています。vwはスクロールバーも含む幅になります。
5
- そのため、スクロールバーの有無によって、`.container`は変わらないのに、 ボタンの位置は変わるので、両者にずれが生じています。
5
+ そのため、スクロールバーの有無によって、`.container`の幅は変わらないのに、 ボタンの位置は変わるので、両者にずれが生じています。
6
6
 
7
7
  対策としては、単位をvwではなく%(スクロールバーを除いた幅になる)で指定すればいいでしょう。
8
8
  ```css
9
9
  .btn {
10
- position: fixed;
11
10
  right: 10%;
12
11
  }
13
12
  .container {
@@ -15,3 +14,14 @@
15
14
  margin: 0 auto;
16
15
  }
17
16
  ```
17
+ あるいは、幅をvwで指定したい場合は、`100vw - 100%` でスクロールバーの幅が計算できるので、それを利用して、
18
+
19
+ ```css
20
+ .btn {
21
+ right: calc(10vw - (100vw - 100%) / 2);
22
+ }
23
+
24
+ .container {
25
+ width: 80vw;
26
+ }
27
+ ```