- 締切済み
ブラウザの幅を狭くしてもレイアウトが崩れない方法
ブラウザのサイズを縮小すると画像のようにレイアウトが崩れます。 ウェブ製作の学習をしている初心者です。 現在wrap(container)を1000pxに設定しています。 せめてmin-width: 900pxあたりまではレイアウトが崩れず縮小できるようにしたいと思っています。（スマホ、タブレット用のレスポンシブデザイン”にする必要はなく単にＰＣ上でブラウザの画面を狭くしたケースについての話です。） 現在以下のような記述をしています。ログイン画面なので縦スクロールはなく画面の幅いっぱいに使えます。 レイアウトもうまく並んでくれず、混乱している状態です。 画像ロゴ、フォーム、ログインボタンをきれいに横並びにして、画面の縦横中央にもってきたいと考えています。ちから技でなんとかしたのですが、ブラウザ画面を少し縮小すると崩れてしまいます。 どなたかウェブ制作のできる方いらっしゃいましたら訂正、指摘等を下さい。 宜しくお願いします。 <HTML> <div id="container"> <!--↓main contents↓--> <main> <!-- ↓login-box↓ --> <div id="login-box"> <img src="img/logo2.jpg" alt="ロゴマーク"> <!--↓form login↓--> <form action="index.php" method="post"> <fieldset id="login"> <p><input autofocus type="text" name="login_id" value="'>"placeholder="ユーザーID" minlength="4" maxlength="50" required></p> <p><input type="password" name="pass" value=" ''> placeholder="パスワード" minlength="5" maxlength="20" required></p> <p id="login"><input type="submit" name="login" value="ログイン"> </p> </fieldset> </form> <!--↑form login↑--> </div> <!--↑login-box↑ --> </main> <!--↑main contents↑--> </div> <!--↑container↑--> ---------------------------------------------------- CSS /*↓maincontents↓*/ main fieldset { position: relative; } #login-box { display: flex; justify-content: center; align-items: center; } #login-box form { width: 380px; margin-left: 20px; } #login-box form p:nth-of-type(3) { display: inline-block; position: relative; } #login-box form input[type="submit"] { width: 70px; height: 70px; background-color: #ec9000; }
- blueletter12345
- お礼率27% (26/94)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kozax05
- ベストアンサー率100% (2/2)
レスポンシブデザインを取らずに画面縮小で問題無いのであれば楽にできますよ。 画面サイズが変わった時のイベントで以下を実行する。 var nRit = 画面サイズを計算して縮小率をセットする $("#container").css("transform-origin", "top left"); $("#container").css("transform", "scale(" + nRit + ")");
