このページの目的
Webサイトで最も基本的なレイアウトである「多段カラム（2カラム、3カラムなど）」の作り方を学びます。レスポンシブにも対応できる、モダンな手法をマスターしましょう。
grid_viewよく使うカラムレイアウトの種類
まずは、Webサイトでよく使われる代表的なカラム構成を理解しましょう。
- 2カラムレイアウト：ブログなどでよく見られる「メインコンテンツ＋サイドバー」の構成や、ECサイトの商品一覧などでも使われます。
- 3カラムレイアウト：トップページなどで「3つの特徴」や「サービス紹介」を並べる際に多用されます。
- カード型レイアウト：複数のカードをグリッド状に並べるレイアウト。カラム数の指定や折り返しが重要になります。
build実装方法①：Flexboxを使う
display: flex;は、横並びのレイアウトを作るための最も基本的な方法です。
2カラム（メイン＋サイドバー）の例
メインコンテンツが可変幅、サイドバーが固定幅の、最も一般的な2カラムレイアウトです。
<!-- HTML -->
<div class="flex-container">
<main class="main-content">メインコンテンツ</main>
<aside class="sidebar">サイドバー</aside>
</div>
<!-- CSS -->
.flex-container {
display: flex;
gap: 30px; /* カラム間の余白 */
}
.main-content {
flex: 1; /* 残りのスペースをすべて使う */
}
.sidebar {
flex: 0 0 300px; /* 幅を300pxに固定（伸びない・縮まない） */
}3カラム（均等幅）の例
3つの特徴を均等に並べるレイアウトです。
<!-- HTML -->
<div class="flex-container">
<div class="flex-item">特徴1</div>
<div class="flex-item">特徴2</div>
<div class="flex-item">特徴3</div>
</div>
<!-- CSS -->
.flex-container {
display: flex;
gap: 20px;
}
.flex-item {
flex: 1; /* すべての子要素が均等にスペースを分け合う */
}build実装方法②：Gridを使う
display: grid;は、Flexboxよりもさらに強力な、二次元（行と列）のレイアウトシステムです。
3カラム（均等幅）の例
Flexboxの例と同じレイアウトをGridで実現します。より少ないコードで記述できます。
<!-- HTML -->
<div class="grid-container">
<div class="grid-item">特徴1</div>
<div class="grid-item">特徴2</div>
<div class="grid-item">特徴3</div>
</div>
<!-- CSS -->
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3つの均等なカラムを作成 */
gap: 20px;
}warningよくある間違いと対策
- Flexboxでサイドバーが縮んでしまう
- サイドバー側のアイテムに
flex-shrink: 0;または一括指定flex: 0 0 300px;を指定し、縮まないように設定します。 - Gridでアイテムの高さが揃わない
- デフォルトではGridアイテムは中身の高さに合わせて可変します。高さを揃えたい場合は、アイテムに
align-self: stretch;を指定するか、コンテナのalign-items: stretch;（デフォルト値）を確認します。
devicesレスポンシブ対応のポイント
メディアクエリを使い、スマートフォンなどの小さい画面ではカラムを解除して縦積みにします。
/* モバイル表示（768px以下）の場合 */
@media (max-width: 768px) {
/* Flexboxの場合 */
.flex-container {
flex-direction: column;
}
.sidebar {
flex-basis: auto; /* 固定幅を解除 */
flex-shrink: 1; /* 必要に応じて縮むように戻す */
}
/* Gridの場合 */
.grid-container {
grid-template-columns: 1fr; /* 1カラムに変更 */
}
}