CSSのレイアウト基本パターンを完全ガイド！初心者でもわかる2カラム・3カラムの作り方
生徒
「先生、ホームページってよく左右にメニューがあって真ん中に内容があるデザインを見ますけど、あれってどうやって作るんですか？」
先生
「とても良い質問ですね。実は、CSSを使って『カラムレイアウト』を作ることで実現できます。代表的なのは2カラムや3カラムです。」
生徒
「カラムってなんですか？」
先生
「カラムは日本語で『列』のことです。文章やメニューを左右に分けたり、真ん中にメインの内容を置いたりする配置のことを指します。実際の例を見てみましょう！」
1. レイアウトの基本パターンとは？
Webサイトのデザインには、よく使われる「基本のレイアウトパターン」があります。特に有名なのが「2カラムレイアウト」と「3カラムレイアウト」です。これはページを2つや3つの縦の列に分けて配置する方法です。
例えば2カラムでは「左にメニュー、右に本文」といった形が一般的です。3カラムなら「左にメニュー、真ん中に本文、右に広告や追加情報」といった配置になります。新聞や雑誌を思い浮かべるとイメージしやすいです。
2. 2カラムレイアウトの作り方
まずは一番シンプルな2カラムレイアウトから始めましょう。CSSで横に2つの箱を並べるだけで実現できます。
<style>
.container {
display: flex;
}
.sidebar {
width: 30%;
background: lightgray;
padding: 10px;
}
.main {
width: 70%;
background: white;
padding: 10px;
}
</style>
<div class="container">
<div class="sidebar">サイドメニュー</div>
<div class="main">本文エリア</div>
</div>
display: flex;を使うと、子要素を横に並べることができます。左側のサイドバーに30%、右側の本文エリアに70%の幅を指定してバランスをとっています。
3. 3カラムレイアウトの作り方
次に、3カラムレイアウトです。真ん中にメインコンテンツ、左右に補足情報やメニューを配置する形になります。
<style>
.container3 {
display: flex;
}
.left {
width: 20%;
background: lightblue;
padding: 10px;
}
.center {
width: 60%;
background: white;
padding: 10px;
}
.right {
width: 20%;
background: lightgreen;
padding: 10px;
}
</style>
<div class="container3">
<div class="left">左サイドバー</div>
<div class="center">メインコンテンツ</div>
<div class="right">右サイドバー</div>
</div>
3カラムの場合、左右に20%ずつ、真ん中に60%を割り当てるのが基本です。バランスよく配置されるので、多くのWebサイトで採用されています。
4. レイアウトを作るときの考え方
カラムレイアウトを考えるときは、見た目だけでなく「情報の優先順位」を意識することが大切です。例えば：
- 一番見てもらいたい内容は中央に配置する
- 補足情報や広告は左右に配置する
- ナビゲーションメニューは左に置くと使いやすい
こうすることで、ユーザーが迷わず情報を見つけられるようになります。
5. 2カラムと3カラムを使い分けるポイント
「2カラム」と「3カラム」には、それぞれ向いている使い方があります。
2カラムはシンプルなので、ブログや企業サイトの基本ページに向いています。一方、3カラムは情報量が多いニュースサイトやポータルサイトに適しています。
また、画面の広さや見やすさも考慮して選びましょう。特にスマートフォンでは画面が狭いため、2カラムの方が適している場合が多いです。
6. 背景色や境界線で見やすくする工夫
カラムをただ並べるだけだと、どこからどこまでが区切りなのか分かりにくくなることがあります。そんなときは、背景色を変えたり、境界線をつけたりすると分かりやすくなります。
<style>
.box {
display: flex;
}
.box div {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div class="box">
<div>左カラム</div>
<div>中央カラム</div>
<div>右カラム</div>
</div>
このように、見た目を調整するだけでも「読みやすさ」が格段に上がります。
