---
title: "FlexboxとGridとは？レイアウトを整えるCSSの基礎"
description: "要素を横に並べたい場合はFlexbox、格子状に組みたい場合はGridが向いています。この二つのCSSレイアウト手法が何を得意とするのか、違いと使い分けの判断基準を、初めての方でも迷わないよう整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-flexbox-grid"
markdown: "https://giga-site.com/articles/what-is-flexbox-grid/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# FlexboxとGridとは？レイアウトを整えるCSSの基礎

要素をきれいに横並びにしたい、格子状に並べたい。そんなときに使うのがFlexboxとGridです。この記事では、二つの仕組みがそれぞれ何を得意とするのか、違いと向き不向きを比べながら、初心者がレイアウトを組むときに迷わないための判断材料を分かりやすく説明します。

> Source HTML: https://giga-site.com/articles/what-is-flexbox-grid
> Article index: https://giga-site.com/articles/index.md

## FlexboxとGridの位置づけ

FlexboxとGridは、どちらもCSSで要素の配置を整えるための仕組みです。昔のように余白や回り込みで無理やり並べる必要がなくなり、レイアウトが格段に組みやすくなりました。

ざっくり言うと、Flexboxは一方向に並べるのが得意、Gridは縦横の格子で配置するのが得意です。この基本的な役割の違いを押さえると使い分けが見えてきます。

## Flexboxの考え方

Flexboxは、親要素にdisplayをflexと指定すると、その中の子要素が一列に並びます。横並びにも縦並びにもでき、要素間の間隔や余りの分配を柔軟に調整できます。

ナビゲーションメニューやボタンの並び、カードを横一列に並べる場面で力を発揮します。一方向に整列させたいときの第一候補と考えてよいでしょう。

## 実務ではどこで関係する？

Flexboxは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

FlexboxとGridについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## Gridの考え方

Gridは、行と列からなる格子を定義し、その升目に要素を配置する仕組みです。displayをgridと指定し、列や行の数とサイズを決めて使います。

写真ギャラリーやダッシュボード、ページ全体の大枠など、縦横の両方向をきっちり整えたいレイアウトに向いています。二次元の配置をまとめて設計できるのが強みです。

## 使い分けの手順

どちらを使うか迷ったときの判断の流れを示します。

1. 並べたいものが一方向(横一列または縦一列)かを考える
2. 一方向ならFlexboxを選ぶ
3. 縦横の両方を揃えたい格子状ならGridを選ぶ
4. 大枠をGridで組み、その中の小さな並びをFlexboxで整える組み合わせも検討する
5. 実際に表示して崩れがないか確認する

## 両方を組み合わせる

FlexboxとGridはどちらか一方だけを使うものではありません。実務ではページ全体の構造をGridで作り、その中のカード内のボタン配置などをFlexboxで整える、といった併用がよく行われます。

それぞれの得意分野を活かして組み合わせると、複雑なレイアウトも見通しよく作れます。最初は無理に使い分けようとせず、一方向ならFlex、格子ならGridという目安から始めれば十分です。

## レイアウトの確認を素早く共有

レイアウトは画面サイズによって見え方が変わるため、実際の表示で確かめながら調整するのが確実です。試作を関係者に見てもらう機会も多くなります。

ギガサイト便はHTMLやCSSを含むZIPをドロップするだけで共有URLを発行でき、CDNのエッジ配信で表示も速く、同じURLのまま中身を差し替えられます。レイアウトの試作をその場で共有し、フィードバックを受けながら更新を回せます。

## よくある質問

### FlexboxとGridはどちらを先に覚えるべきですか

まずは一方向の並びに使うFlexboxから覚えると実用的です。メニューやボタンの横並びなど使う場面が多く、感覚をつかみやすいためです。慣れたらGridで二次元配置に広げるとよいでしょう。

### 横並びはFlexboxでもGridでもできますか

どちらでも可能です。単純に一列に並べるだけならFlexboxが手軽ですが、列幅をきっちり揃えたい場合はGridのほうが管理しやすいこともあります。目的に合わせて選んでください。

### FlexboxとGridは一緒に使えますか

使えます。ページの大枠をGridで組み、その中の細かな並びをFlexboxで整えるといった併用が一般的です。それぞれの得意分野を活かすと複雑なレイアウトも整えやすくなります。

### 古いブラウザでも使えますか

現在主流のブラウザはどちらも広く対応しています。ごく古い環境を考慮する必要がある場合のみ注意が必要ですが、一般的な制作では問題なく利用できると考えてよいでしょう。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "FlexboxとGridとは？レイアウトを整えるCSSの基礎",
  "description": "要素を横に並べたい場合はFlexbox、格子状に組みたい場合はGridが向いています。この二つのCSSレイアウト手法が何を得意とするのか、違いと使い分けの判断基準を、初めての方でも迷わないよう整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-flexbox-grid",
  "url": "https://giga-site.com/articles/what-is-flexbox-grid",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "FlexboxとGridはどちらを先に覚えるべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まずは一方向の並びに使うFlexboxから覚えると実用的です。メニューやボタンの横並びなど使う場面が多く、感覚をつかみやすいためです。慣れたらGridで二次元配置に広げるとよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "横並びはFlexboxでもGridでもできますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "どちらでも可能です。単純に一列に並べるだけならFlexboxが手軽ですが、列幅をきっちり揃えたい場合はGridのほうが管理しやすいこともあります。目的に合わせて選んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "FlexboxとGridは一緒に使えますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "使えます。ページの大枠をGridで組み、その中の細かな並びをFlexboxで整えるといった併用が一般的です。それぞれの得意分野を活かすと複雑なレイアウトも整えやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "古いブラウザでも使えますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "現在主流のブラウザはどちらも広く対応しています。ごく古い環境を考慮する必要がある場合のみ注意が必要ですが、一般的な制作では問題なく利用できると考えてよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```