みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ブラウザの幅を狭くしてもレイアウトが崩れない方法

ブラウザのサイズを縮小すると画像のようにレイアウトが崩れます。

ウェブ製作の学習をしている初心者です。

現在wrap(container)を1000pxに設定しています。

せめてmin-width: 900pxあたりまではレイアウトが崩れず縮小できるようにしたいと思っています。(スマホ、タブレット用のレスポンシブデザイン”にする必要はなく単にPC上でブラウザの画面を狭くしたケースについての話です。)


現在以下のような記述をしています。ログイン画面なので縦スクロールはなく画面の幅いっぱいに使えます。

レイアウトもうまく並んでくれず、混乱している状態です。
画像ロゴ、フォーム、ログインボタンをきれいに横並びにして、画面の縦横中央にもってきたいと考えています。ちから技でなんとかしたのですが、ブラウザ画面を少し縮小すると崩れてしまいます。

どなたかウェブ制作のできる方いらっしゃいましたら訂正、指摘等を下さい。
宜しくお願いします。




<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;
}

投稿日時 - 2019-04-19 14:20:38

QNo.9608363

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

レスポンシブデザインを取らずに画面縮小で問題無いのであれば楽にできますよ。

画面サイズが変わった時のイベントで以下を実行する。

var nRit = 画面サイズを計算して縮小率をセットする
$("#container").css("transform-origin", "top left");
$("#container").css("transform", "scale(" + nRit + ")");

投稿日時 - 2019-05-16 18:51:40

あなたにオススメの質問