CSSで横並びレイアウトを作る基本｜スマホでも崩れない配置方法

ホームページを作っていると、

このような悩みはとても多いですよね。

そこでこの記事では、CSS初心者の方でも分かるように、
スマホでも崩れにくい横並びレイアウトの作り方を解説します。

横並びレイアウトは、基本の考え方を知れば安定して作ることができるので、ぜひ参考にしてくださいね！

CSSで横並びレイアウトが崩れるよくある原因

まずは、CSSで横並びレイアウトが崩れるよくある原因から確認していきましょう！

横幅の合計が画面を超えている

子要素を横に並べすぎると、
合計の横幅が画面より大きくなります。

paddingやmarginも含めて考えないと、
はみ出しやすくなります。

固定幅（px）を使っている

.box {
  width: 400px;
}

パソコンでは問題なくても、
スマホでは画面に入りきりません。

スマホ対応を考えていない

常に横並びのままだと、
画面がせまいスマホでは限界があります。

横並びレイアウトの基本的な考え方

次は、横並びレイアウトの基本的な考え方をお伝えします。

横並びを作るときは、次の3点が大切です。

• 親要素が「並べる役」
• 子要素が「幅を持つ」
• スマホでは無理に並べない

この考え方を押さえるだけで、失敗が減ります。

一番おすすめの方法｜flexboxで横並びを作る

それでは、一番おすすめの方法をご紹介します。

今のCSSで、横並びに一番使われているのが flexbox です。

.parent {
  display: flex;
}

これだけで、中の要素が横に並びます。

初心者でも使いやすく、スマホ対応もしやすい方法です。

flexboxで横並びを作る基本コード

次に、flexboxで横並びを作る基本コードをお伝えします。

2つの要素を横に並べる

.parent {
  display: flex;
}

.child {
  width: 50%;
}

これで、2つの要素が半分ずつ並びます。

間隔をあけて並べる

.parent {
  display: flex;
  gap: 10px;
}

gapを使うと、きれいに間隔をあけられます。

スマホで縦並びに切り替える方法（重要）

ここでは、スマホで縦並びに切り替える方法をお伝えします。

スマホでは、横並びをやめた方が見やすい場合が多いです。

@media screen and (max-width: 768px) {
  .parent {
    flex-direction: column;
  }
}

これで、

• パソコン：横並び
• スマホ：縦並び

に切り替えられます。

無理に横並びを続けない のが、崩れないポイントです。

floatを使った横並び（今はおすすめしない）

補足として、floatを使った横並びの方法をお伝えします。

.box {
  float: left;
}

昔はよく使われていましたが、

• 管理がむずかしい
• スマホ対応が大変

という理由で、今はflexboxの方が使いやすいです。

よくある失敗と直し方

よくある失敗と直し方をお伝えします。

横並びの数が多すぎる

幅指定が合っていない

marginで無理やり調整している

初心者向け！横並びレイアウトのまとめ（コピペ用）

最後に、横並びレイアウトのまとめをご紹介します。

基本の横並び

.parent {
  display: flex;
}

横幅を指定する場合

.child {
  width: 50%;
}

スマホ対応

@media screen and (max-width: 768px) {
  .parent {
    flex-direction: column;
  }
}

まとめ

CSSで横並びレイアウトを作る基本｜スマホでも崩れない配置方法はいかがでしたでしょうか？

CSSで横並びレイアウトを作るポイントは、

この3つだけです。

横並びはよく使う分、基本を知っているかどうかで差が出ますよ。

ぜひ、ご自身のホームページで試してみてくださいね！