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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

820閲覧

bodyのwidthサイズ変更されたら中のdivのwidthサイズも変更したい

Kimsehwa

総合スコア312

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/05 06:47

編集2021/07/05 06:56

scrollとかでdocument.bodyのwidthサイズが変わると、それに従って中にあるdivのサイズもレスポンシブに縮小するようにしたいです。

現在はキャプチャーのようになってます。

イメージ説明

これを実現するにあたって以下の質問があります。

  1. 実現するにはResizeObserverを使うしかない?

ResizeObserverのWebApiでdocument.bodyを検知してwidthサイズが変わるたびに中のdivサイズも変更すると実現できそうですが、これ以外によい方法がないかアドバイスいただきたいです。

  1. 1番の方法で実装するためには

1番の方法で実装するためには、変更前のdocument.body.width / 中のdiv.width の結果を保存しておいて(hoge変数に保存したとして)
変更後の document.body.widthと掛け算(document.body.widt x hoge)する方法でしょうか?
それ以外の方法がありましたらアドバイスいただきたいです。

自分のコードは以下の貼っておきます。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <!-- --> 5 <style type="text/css"> 6 * { 7 margin: 0; 8 padding: 0; 9 box-sizing: border-box; 10 } 11 12 body { 13 width: 100vw; 14 height: 100vh; 15 display: flex; 16 justify-content: center; 17 align-items: center; 18 } 19 20 .parent { 21 width: 676px; 22 height: 380px; 23 } 24 .area { 25 width: auto; 26 height: 100%; 27 background-color: rgba(0, 0, 0, 0.2); 28 overflow: hidden; 29 position: relative; 30 } 31 32 .area__box { 33 position: absolute; 34 width: 200px; 35 height: 124px; 36 background-color: red; 37 cursor: move; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="parent"> 43 <div class="area"> 44 <div class="area__box"></div> 45 </div> 46 </div> 47 48 <script type="text/javascript"> 49 let containerGlobalWidth; 50 let containerGlobalHeight; 51 let containerGlobalLeft; 52 let containerGlobalTop; 53 let containerGlobalRight; 54 let containerGlobalBottom; 55 56 let boxGlobalLeft; 57 let boxGlobalTop; 58 let boxGlobalRight; 59 let boxGlobalBottom; 60 const container = document.querySelector(".area"); 61 const box = container.querySelector(".area__box"); 62 63 const resizeObserver = new ResizeObserver(entries => { 64 const { 65 left: containerLeft2, 66 top: containerTop2, 67 right: containerRight2, 68 bottom: containerBottom2 69 } = container.getBoundingClientRect(); 70 71 const { 72 left: boxLeft2, 73 top: boxTop2, 74 right: boxRight2, 75 bottom: boxBottom2 76 } = box.getBoundingClientRect(); 77 78 containerGlobalLeft = containerLeft2; 79 containerGlobalTop = containerTop2; 80 containerGlobalRight = containerRight2; 81 containerGlobalBottom = containerBottom2; 82 83 boxGlobalLeft = boxLeft2; 84 boxGlobalTop = boxTop2; 85 boxGlobalRight = boxRight2; 86 boxGlobalBottom = boxBottom2; 87 }); 88 89 resizeObserver.observe(document.body); 90 91 const { 92 width: containerWidth, 93 height: containerHeight, 94 left: containerLeft, 95 top: containerTop, 96 right: containerRight, 97 bottom: containerBottom 98 } = container.getBoundingClientRect(); 99 containerGlobalWidth = containerWidth; 100 containerGlobalHeight = containerHeight; 101 containerGlobalLeft = containerLeft; 102 containerGlobalTop = containerTop; 103 containerGlobalRight = containerRight; 104 containerGlobalBottom = containerBottom; 105 106 const { 107 width: boxWidth, 108 height: boxHeight 109 } = box.getBoundingClientRect(); 110 111 let isDragging = null; 112 let originLeft = null; 113 let originTop = null; 114 let originX = null; 115 let originY = null; 116 box.addEventListener("mousedown", e => { 117 isDragging = true; 118 originX = e.clientX; 119 originY = e.clientY; 120 originLeft = box.offsetLeft; 121 originTop = box.offsetTop; 122 }); 123 124 document.addEventListener("mouseup", e => { 125 isDragging = false; 126 }); 127 128 document.addEventListener("mousemove", e => { 129 if (isDragging) { 130 const diffX = e.clientX - originX; 131 const diffY = e.clientY - originY; 132 133 const endOfXPoint = containerGlobalWidth - boxWidth; //★★ 134 const endOfYPoint = containerGlobalHeight - boxHeight; //★★ 135 136 const leftMax = Math.max(0, originLeft + diffX); 137 const leftMin = Math.min(leftMax, endOfXPoint); 138 const leftWithPx = `${leftMin}px`; 139 140 const topMax = Math.max(0, originTop + diffY); 141 const topMin = Math.min(topMax, endOfYPoint); 142 const topWithPx = `${topMin}px`; 143 144 box.style.left = leftWithPx; 145 box.style.top = topWithPx; 146 } 147 }); 148 </script> 149 </body> 150</html>

検索できるキーワードでも教えていただければ、幸いです。
よろしくおねがいします。

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

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

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

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

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

Lhankor_Mhy

2021/07/05 06:59

body { width: 100vw; } なのですから、中の div も vw で指定すればいいのではないかな、と思うのですが、何か意図がありますか?
Kimsehwa

2021/07/05 08:08

コメントありがとうございます。 下に2つのdomがありますが、両方ともvwをつければ?ということでしょうか? div.areaに関しては flex centerを使いたかったことと div.area下にあるdivはx,y座標が外れてしまったので使えませんでした。
Lhankor_Mhy

2021/07/05 09:12 編集

ちょっと、ご質問の意味が分からなくなりました。 「中にあるdiv」とは .parent のことではないのですね?
guest

回答1

0

すみません、質問が読み取れていないかもしれないですが、以下のようにすればいいのではないかな、と思いました。

css

1 .parent { 2 /*width: 676px;*/ 3 width: 50vw; 4 height: 380px; 5 }

投稿2021/07/05 09:34

Lhankor_Mhy

総合スコア36960

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問