画面を小さくした時にレイアウトが崩れる

Question

画面の大きさを変えてもレイアウトは変わらないようにしたいです

ここに質問の内容を詳しく書いてください。
HTMLとCSSでwebページを作成しているのですが、画面を小さくするとレイアウトが崩れてしまうのでレイアウトが崩れないようにしたいです。

画面を小さくするとレイアウトが崩れる

 <div class="main-content">
      <div class="box-1">
        <h1>会社案内</h1>
      </div>
      <div class="box-2">
        <h1>事業案内</h1>
      </div>
    </div>

.main-content{
	height: 500px;
	width: 100%;
}

.main-content h1{
	color: black;
}

.box-1{
	display: inline-block;
	width: 500px;
	height: 500px;
	background-color: red;
}

.box-2{
	display: inline-block;
	width: 500px;
	height: 500px;
	background-color: blue;
}

このように維持したい

このようにズレなくしたい

Comments

[yuuyu]

質問文の表記（コード部分）が崩れているので、一度見直してください。
また、「レイアウトが崩れ」るとのことですが、具体的にどういう表示を希望されているのか、具体的に記述してください。

[退会済みユーザー]

修正しました。よろしくお願いします

Answer 1

flex でやるのでしたら^^

.main-content{
    height: 500px;
    width: 100%;
    display: flex; /* 追加 */
    justify-content: flex-start;  /* 追加 */
}
.main-content div {
    width: 50%;
    max-width: 500px;
    height: 500px;
} /* divの共通設定をまとめます */
.box-1{
    background-color: red;
}
.box-2{
    background-color: blue;
}

flexのより詳しい使い方

Comments

[退会済みユーザー]

教えていただきありがとうございます！flexを勉強してからまたホームページ制作をしていきたいと思います

Answer 2

幅を小さくしても、会社案内と事業案内は横並びのままにしたいということでしょうか。

.box-1{
    display: inline-block;
    width: 50%;
    max-width: 500px;
    height: 500px;
    background-color: red;
}

.box-2{
    display: inline-block;
    width: 50%;
    max-width: 500px;
    height: 500px;
    background-color: blue;
}

---

以下、補足。（他の人の回答をみて）

width は実際は左右マージン分を50%から引いておく必要アリ。

width: calc(50% - 20px);

inline-block で横並びさせるより、felx を使って横並びしたほうがいいと思います。

Comments

[退会済みユーザー]

はい。わかりました。flexの勉強をしてからまたホームページ制作したいと思います。親切にありがとうございます

Answer 3

はみ出しても良い場合：
.main-contentのwidthを1000px+margin（500pxの箱が2つ＋二つの箱の間にあるmargin）
はみ出したくない場合：
.box-1,.box-2のwidthをmin(50% - margin, 500px);（箱が2つなのでサイズの50% - margin幅、もしくは500pxのどちらか小さい方）

上記の設定に大きさにすると横並びになると思います。
なお、marginとはboxのmarginで、デフォルトでは5pxほどあると思いますが、詳しくは開発者ツール等で確認してください。

Comments

[退会済みユーザー]

親切にありがとうございます。
flexの使い方を勉強してからflexで挑戦してみたいと思います。

Answer 4

普通は.box-1、.box-2のdisplay:inline-blockをやめて
.main-contentに display: flex;を設定しますね
（inline-blockのせいで余計な空白が入ってますしね）

Comments

[yambejp]

あとは画面が小さくなったときどうしたいかによります

[退会済みユーザー]

はい。flexを勉強してからまたホームページ制作していきたいと思います。ご指摘ありがとうございます。