締切済み

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

  • 困ってます
  • 質問No.9608363
  • 閲覧数80
  • ありがとう数0
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 15% (6/40)

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

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

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

回答 (全1件)

  • 回答No.1

ベストアンサー率 100% (2/2)

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

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

var nRit = 画面サイズを計算して縮小率をセットする
$("#container").css("transform-origin", "top left");
$("#container").css("transform", "scale(" + nRit + ")");
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ