HTMLで要素を横並びにする方法【初心者向け完全ガイド】

🎯 この記事で分かること

• Flexboxを使った横並び配置
• CSS Gridを使った横並び配置
• inline-blockを使った横並び配置
• それぞれの使い分け方

---

1. Flexbox を使う方法【おすすめ!】

最も現代的で使いやすい方法です。迷ったらこれを使いましょう!

基本の書き方

<div class="container">
  <div class="box">ボックス1</div>
  <div class="box">ボックス2</div>
  <div class="box">ボックス3</div>
</div>

.container {
  display: flex; /* これだけで横並びに! */
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

よく使うFlexboxのプロパティ

.container {
  display: flex;
  
  /* 横並びの方向 */
  flex-direction: row; /* 左から右(デフォルト) */
  
  /* 要素間の隙間 */
  gap: 20px;
  
  /* 要素の配置 */
  justify-content: space-between; /* 均等配置 */
  
  /* 縦方向の配置 */
  align-items: center; /* 中央揃え */
  
  /* 折り返し */
  flex-wrap: wrap; /* はみ出たら次の行へ */
}

Flexboxのメリット

• ✅ シンプルで分かりやすい
• ✅ レスポンシブ対応が簡単
• ✅ 縦方向の中央揃えも楽々
• ✅ 要素の順序を変更できる

---

2. CSS Grid を使う方法

複雑なレイアウトに最適な方法です。

基本の書き方

<div class="grid-container">
  <div class="box">ボックス1</div>
  <div class="box">ボックス2</div>
  <div class="box">ボックス3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列に分割 */
  gap: 20px;
}

.box {
  height: 100px;
  background-color: #e74c3c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

よく使うGridのパターン

/* パターン1: 等幅で3列 */
grid-template-columns: repeat(3, 1fr);

/* パターン2: 固定幅で並べる */
grid-template-columns: 200px 200px 200px;

/* パターン3: 自動で詰める */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* パターン4: 異なる幅で配置 */
grid-template-columns: 2fr 1fr 1fr;

Gridのメリット

• ✅ 複雑な2次元レイアウトに強い
• ✅ カード型レイアウトに最適
• ✅ レスポンシブが柔軟

---

3. inline-block を使う方法【古い方法】

昔ながらの方法ですが、知っておくと便利なこともあります。

基本の書き方

<div class="inline-container">
  <div class="inline-box">ボックス1</div>
  <div class="inline-box">ボックス2</div>
  <div class="inline-box">ボックス3</div>
</div>

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}

注意点

• ⚠️ 要素間に謎の隙間ができる(HTMLの改行が原因)
• ⚠️ 縦方向の揃えが難しい
• ⚠️ レスポンシブ対応が面倒

---

🤔 どれを使えばいいの?

使い分けの目安

用途	おすすめ方法
シンプルな横並び	Flexbox
ナビゲーションメニュー	Flexbox
カード型レイアウト	Grid
複雑な2次元レイアウト	Grid
古いブラウザ対応が必要	inline-block

迷ったら...

まずはFlexboxを使いましょう!
90%のケースはFlexboxで解決できます。

---

📱 レスポンシブ対応の例

スマホとPCで表示を切り替える方法です。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  flex: 1 1 300px; /* 最小幅300px、それ以上は伸びる */
}

/* スマホサイズでは縦並びに */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .box {
    width: 100%;
  }
}

---

まとめ

• Flexbox: シンプルで使いやすい、まずはこれ!
• Grid: 複雑なレイアウトに最適
• inline-block: 古い方法、特別な理由がなければ使わない

HTMLの横並び表示は、FlexboxとGridをマスターすれば怖いものなしです!

ぜひ実際にコードを書いて試してみてください 💪

---

参考リンク

• MDN - Flexbox
• MDN - CSS Grid