ID非公開

2021/10/25 18:08

44回答

画面を小さくしていって、max-width: 1000px;を過ぎたらbox1とbox2のwidthが100%になるようにしたいのですが、上手くできませんので教えて頂きたいです。

HTML、CSS91閲覧xmlns="http://www.w3.org/2000/svg">50

ベストアンサー

1

1人がナイス!しています

ID非公開

質問者2021/10/26 13:36

詳細を書いて頂き本当にありがとうございます! 同じようにやって見たところ、画面を小さくしていく途中、レイアウトが崩れることは無くなりました! ありがとうございます! しかし、box1とbox2のwidthが600pxのまま維持されず段々画面縮小とともに小さくなって言ってしまいます。 画面からはみ出ても良いので、box1と2は画面中央で繋がったまま、600pxのままというのは可能でしょうか?

画像

ThanksImg質問者からのお礼コメント

何日も躓いていたので本当に助かりました。 ありがとうございます!

お礼日時:10/26 18:56

その他の回答(3件)

1

>max-width: 1000px;を過ぎたらbox1とbox2のwidthが100%になるようにしたいのですが、上手くできませんので教えて頂きたいです。 >この方法だとmax-width: 1000px;を過ぎたらbox1とbox2のwidthを100%には出来たのですが、画面を小さくしていく途中でbox2がbox1の下にズレてしまいます。 box1とbox2のwidthを100%にしたら合計で「100%+100%=200%」になります、つまりウインドウからハミ出でるのは分かってますよね? 完全コピペで表示を確認して下さい。 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <!-- metaタグでcharsetをUTF-8に設定しています。 (モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。 --> <TITLE></TITLE> <style> .FlexContainer001 { display:flex; justify-content: space-between; } #box1{ display: block; background-color: red; width: 600px; min-width: 600px; height: 200px; margin-left: 168px; margin-right: -50px; } #box2{ display: block; background-color: blue; width: 600px; min-width: 600px; height: 200px; margin-left: -50px; margin-right: 168px; } @media (max-width: 1000px) { #box1,#box2{ width: 100%; min-width: 100%; margin: 0; } } </style> </head> <body> <div id = "wrapper" class="FlexContainer001" > <div id = "box1"> </div><!-- box1 --> <div id = "box2"> </div><!-- box2 --> </div><!-- wrapper --> </body> </html> もし フロントエンドをガッツリやりたいなら、下記を参考に実用的なWebページを実際に作ってみると良いでしょう。 なお プロとアマチュアでは方向性が違います、もし プロを目指すならピクセル・パーフェクトを希求して下さい。 実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19& 「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。 Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。 (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。 PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。 具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。 「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。 「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。 タブレット:『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。 スマホ:『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』 解像度を変更したら必ずリロードして下さい。

1人がナイス!しています

1

「1000pxを過ぎたら」とは、1000pxを上回ったらということですか?下回ったらということですか? 1000px以下だと、width:100%が効いているので、上下へのズレは確認できませんが、1000pxを超えて1451px周辺までは、上下へのズレが確認できます。直したいのはここですか?

1人がナイス!しています

この返信は削除されました

1

横スクロールを出したいという事でしょうか?

1人がナイス!しています

ID非公開

質問者2021/10/25 19:01

返信ありがとうございます。 横スクロールではなく、box1とbox2の場所や大きさを維持したまま画面を縮小していき、max-width:1000px;を過ぎたらbox1とbox2のwidthを100%にしたいのです。 このままだと画面を小さくしていくとbox2がbox1の下にズレてしまいます。 レイアウトが崩れるという表現があっているかも知れません。 分かりにくくて申し訳ございません。