ＨＴＭＬのＤＩＶタグを2列レスポンシブ対応で、横並びにする方法はどうすればいいですか？

Question

質問を見てくださりありがとうございます。

下記のようなＨＴＭＬのコードのbox1とbox2を横並びにしてレスポンシブ対応（スマホ・タブレット
）して綺麗に横並びにする最適な方法はどうすればいいですか？
また、ウィンドウサイズが縮まっても、box2が段落ちしないようにするにはどうすればいいですか？
ご回答よろしくお願い致します。

    <div class="wrapper">
       <div class="box1">
       </div>
       <div class="box2">
       </div>
    </div>

Answer 1

HTMLだけではなくて、レイアウトやデザインはCSSで記述していくことになります。
私であれば、CSS3から利用できるFlexBoxという機能を利用して、以下のように書きます。

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; 
}

.box {
  background-color: #555555;
  color: white;
  width: 200px;
  margin: 5px;
  padding: 12px;
}

Comments

[退会済みユーザー]

ありがとうございます。
幅が縮まった際にもう一つのボックスが段落ちしないようにするにはどうすればいいですか？

[saba1024]

その場合は、私が指定している`flex-wrap: wrap;`を`flex-wrap: no-wrap;`に修正すれば大丈夫です。
この辺り、本当に解決方法が山ほど有るので、もしまだCSSを勉強されていないのでしたら、HTMLとCSSをセットで勉強されたほうが最終的に楽になると思います。

HTML、CSS、JavaScriptは簡単に色々実験できるサービスが有るので色々そこで試してみると見えてくると思います。
例えば
https://jsfiddle.net
※ログインして作成したHTMLなどを保存すると一般公開されてしまうのでお気をつけ下さい。
保存せずに普通に使う分には何の問題もありません。

[退会済みユーザー]

box1, box2をwidth50%にしてもいけますか？

Answer 2

ボックスの幅を可変にしてみてはどうでしょうか。
ウィンドウがどんなサイズになっても段落ちしなくなりますよ。

レイアウトについてはsadaさんと同じくflexboxを使用。

<div class="wrapper">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

.wrapper {
  display: flex;
  justify-content: space-around;
}

.box1,
.box2 {
  width: 40%;
  height: 100px;
  background-color: silver;
}

デモ：codepen

max-widthで最大幅を指定すればボックスが大きくなりすぎるのを防ぐこともできます。

.wrapper {
  display: flex;
  justify-content: space-around;
}

.box1,
.box2 {
  width: 40%;
  max-width: 400px;  /*最大幅を指定*/
  height: 100px;
  background-color: silver;
}

デモ：codepen

【参考】

• flexbox | mdn
• もう迷わない！CSS Flexboxの使い方を徹底解説
• 【CSS】max-widthとmin-widthの使い方まとめ

Answer 3

「質問者が1日前に「まだ回答を求めています」と言っています。」と出ていたので回答します。

---

ウィンドウサイズが縮まっても、box2が段落ちしないようにするにはどうすればいいですか？

と、YoYuYさんのご回答のコメント

box1, box2をwidth50%にしてもいけますか？

から、同じサイズのアイテムで分割したい、ということかな、と思いました。
フレックスでも可能ですが、グリッドレイアウトの方がいいかもしれないですね。

サンプル

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; 
}