質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2629閲覧

position fixedで固定した要素が、スクロールバーによって?じゃっかんずれてしまうのを解決したい。

Okt

総合スコア21

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/06/02 14:49

実現したいこと

画面の右上にボタンをfixedとして固定するのですが、画面の縦方向へのコンテンツが増え、スクロールバーが現れた瞬間に少しずれてしまいます。スクロールバーのあるないに関わらず、ボタンのポジションを固定したいです。

前提

ウェブサイトの模写をしていてこの問題に出会いました。それを超簡略化したものが以下のコードです。この問題を可視化するため、ボタンをクリックすると「main」の縦幅が画面の表示の2倍に広がるようにしました。クリックするまでは、ちゃんとそろっているのですが、「main」が広がった途端に、ボタンがじゃっかん内側に寄ってしまいます。スクロールバーが現れるせいなのかな?と思うのですが、どなたかこれの解決策を教えてくださいませんか。JavaScriptを使わなければならない場合でも結構です。

発生している問題・エラーメッセージ

上記の通りです。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>Document</title> 9</head> 10<body> 11 <button class="btn" onclick="document.querySelector('.main').classList.toggle('expand')">ボタン</button> 12 <header class="container header"> 13 <div>ヘッダー</div> 14 </header> 15 <main class="container main"> 16 <div>メイン</div> 17 </main> 18 <footer class="container footer"> 19 <div>フッター</div> 20 </footer> 21</body> 22</html>

css

1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7.btn { 8 background-color: white; 9 border: 1px solid black; 10 width: 60px; 11 height: 30px; 12 position: fixed; 13 top: 0; 14 right: 10vw; 15 cursor: pointer; 16} 17 18.container { 19 width: 80vw; 20 margin: 0 auto; 21} 22.container.header { 23 background-color: antiquewhite; 24 height: 100px; 25} 26.container.main { 27 background-color: aquamarine; 28 height: 300px; 29} 30.container.main.expand { 31 height: 200vh; 32} 33.container.footer { 34 background-color: blueviolet; 35 height: 100px; 36}/*# sourceMappingURL=style.css.map */

試したこと

JavaScriptで、スクロールバーが現れたら、ボタンのrightの数値を状況に合わせて変える、というようなものを考えましたが、お恥ずかしながらまだそれを自力で書けるレベルにありません。

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ボタンの位置をright: 10vw;で指定していますが、
fixed はスクロールバーを除いた画面幅を基準に配置します。
right: 0;と設定すればスクロールバーがあるときは、スクロールバーの左に位置することからもわかります。
それに対して、.containerwidth: 80vw;とvw単位で幅を設定しています。vwはスクロールバーも含む幅になります。
そのため、スクロールバーの有無によって、.containerの幅は変わらないのに、 ボタンの位置は変わるので、両者にずれが生じています。

対策としては、単位をvwではなく%(スクロールバーを除いた幅になる)で指定すればいいでしょう。

css

1.btn { 2 right: 10%; 3} 4.container { 5 width: 80%; 6}

あるいは、幅をvwで指定したい場合は、100vw - 100% でスクロールバーの幅が計算できるので、それを利用して、

css

1.btn { 2 right: calc(10vw - (100vw - 100%) / 2); 3} 4.container { 5 width: 80vw; 6}

投稿2023/06/02 22:53

編集2023/06/02 23:49
hatena19

総合スコア33795

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Okt

2023/06/03 11:10

ありがとうございます。 そういうことか!と本当に勉強になります。 書いてくださった解説を読んでいると質問した以上のことが学べて本当に意義深いです。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問