CSSで要素を横並びにしたい場合の選択肢 floatからの卒業：2025年版・モダンCSSレイアウト完全ガイド

2015年に公開した以下の記事：

では、当時主流だったfloatベースのレイアウトを、登場間もないFlexboxで置き換える方法を紹介しました。あれから10年。CSSはさらに進化し、レイアウト手法の選択肢も広がりました。

この記事では、過去の方法を振り返りつつ、2025年現在におけるベストなCSSレイアウト手法を紹介します。

2015年当時の課題と解決策（おさらい）

/* floatベースの2カラムレイアウト */
.container {
  overflow: hidden;
}
.sidebar {
  float: left;
  width: 30%;
}
.content {
  float: right;
  width: 70%;
}

clearfixの導入が必須
要素の順序制御が難しい
レスポンシブ対応が煩雑

そこで登場したのが Flexbox。

.container {
  display: flex;
}
.sidebar {
  width: 30%;
}
.content {
  flex: 1;
}

これは当時としては革新的でした。

そして現在：より強力なCSSレイアウト3本柱

1. Flexbox（1次元の整列）

💡 特徴

主軸（行または列）に沿った要素の並びを制御
要素間のスペース分配や中央揃えが簡単
要素の順序変更も容易（order）

✅ 向いている場面

ナビゲーションバー
ボタン群の並び
モバイルでの縦並び調整

❌ 注意点

2次元（行+列）の複雑なレイアウトには不向き

📄 HTML+CSSサンプル

See the Pen Flexbox（1次元の整列） by marumo (@maru0014) on CodePen.

<nav class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

.nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background-color: #eee;
}

2. Grid（2次元のレイアウト）

💡 特徴

行・列を同時に設計できる2次元レイアウトシステム
要素を明示的に配置できる（grid-area, grid-template-areas）

🔧 主なプロパティとその役割

display: grid; : 要素をグリッドコンテナとして定義します。
grid-template-columns / grid-template-rows : 列と行のサイズ・数を指定します。
- 例：grid-template-columns: 200px 1fr; → 左列が固定幅、右列が残りを自動使用
grid-template-areas : 名前付きエリアによるレイアウト設計。
grid-area : 各子要素に配置するエリアを割り当てます。
gap : グリッドの行・列間のスペース。

✅ 向いている場面

ページ全体の構造設計（ヘッダー・サイドバー・メイン・フッター）
カード型レイアウト

❌ 注意点

単純な横並びにはFlexboxの方が簡潔

📄 HTML+CSSサンプル

See the Pen Grid（2次元のレイアウト） by marumo (@maru0014) on CodePen.

<div class="grid-layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.grid-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

3. Container Queries（次世代レスポンシブ）

💡 特徴

親コンテナのサイズに応じて子要素のスタイルを切り替える
コンポーネントベース設計と相性抜群

✅ 向いている場面

再利用可能なUIコンポーネント
親コンテナごとに異なるレイアウトが必要な場面

❌ 注意点

古いブラウザでは未対応（最新ブラウザでは広く対応中）

📄 HTML+CSSサンプル

See the Pen Container Queries（次世代レスポンシブ） by marumo (@maru0014) on CodePen.

<div class="card-list">
  <div class="card">
    <img src="img1.jpg" alt="">
    <div>
      <h3>Card Title 1</h3>
      <p>Some description text.</p>
    </div>
  </div>
  <div class="card">
    <img src="img2.jpg" alt="">
    <div>
      <h3>Card Title 2</h3>
      <p>Another description text.</p>
    </div>
  </div>
</div>

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  container-type: inline-size;
}

.card {
  container: inline-size;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
}

@container (min-width: 500px) {
  .card {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
  .card img {
    width: 100%;
    height: auto;
  }
}

モダンCSSの使い分け指針

手法	向いている用途
Flexbox	横並び・縦並びの整列
Grid	ページ全体やセクションの配置設計
Container Queries	コンポーネントのサイズ依存スタイル