前回はボタンアニメーションのカスタマイズについて紹介しました。
今回は２カラムのレイアウトについて紹介したいと思います。
 |
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本） 価格:747円 (2024/12/16 23:17時点) 感想(2件) |
Webデザインの基本！2カラムレイアウトの作り方とポイント
Webデザインを始めるとよく目にする「2カラムレイアウト」。これは左右に分かれた構造のデザインで、多くのサイトで使われています。この記事では、2カラムレイアウトについて、具体例や作り方、メリット・注意点を解説します。画像や参考リンクも載せているので、ぜひ活用してください！
1. 2カラムレイアウトって何？
まず、「2カラムレイアウト」の基本からいきましょう。
カラムとは？
カラム（column）は「列」という意味。2カラムレイアウトは、画面を左右に2つの列に分けたデザインのことです。
たとえば：
- 左側にメインのコンテンツ（記事や情報）
- 右側にサイドバー（おすすめ記事や広告）
このように、役割が分かれているのが特徴です。
よくある2カラムの例
- ブログ：記事が左、プロフィールや関連リンクが右
- ECサイト：商品情報が左、カテゴリや検索フィルターが右
2カラムのデザインは、情報を整理して見やすくするのにピッタリなんです。
2. 2カラムレイアウトのメリット
情報が整理される
画面を左右に分けることで、情報をわかりやすく配置できます。
例：
- 左側に「メインの情報」
- 右側に「補足情報」
こうすると、どこを見ればいいか一目でわかります。
どんなデバイスでも対応しやすい
レスポンシブデザイン（スマホやタブレット対応）にも適していて、各カラムを縦に並べるだけで調整が簡単です。
デザインの幅が広がる
2カラムにすることで、
- サイドバーを目立たせたい
- メインコンテンツに集中させたい
など、工夫がしやすくなります。
3. 2カラムレイアウトの作り方
ここからは具体的にどうやって作るか説明します。HTMLとCSSを使った簡単な例を紹介します。
HTMLの基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2カラムレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<main class="main-content">
<h1>メインコンテンツ</h1>
<p>ここに記事や情報を入れます。</p>
</main>
<aside class="sidebar">
<h2>サイドバー</h2>
<p>ここに関連情報やリンクを置きます。</p>
</aside>
</div>
</body>
</html>
CSSの基本スタイル
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.main-content {
flex: 3;
margin-right: 20px;
}
.sidebar {
flex: 1;
background-color: #f1f1f1;
padding: 15px;
border-radius: 8px;
}
これをブラウザで開けば、2カラムのレイアウトが完成です。
ポイント
.containerにdisplay: flex;を指定して横並びにするflex: 3とflex: 1で左右の幅を調整する
4. 2カラムレイアウトの応用例
レスポンシブ対応
スマホやタブレットでも見やすくするために、メディアクエリを追加します。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.main-content {
margin-right: 0;
}
}
これで画面幅が狭くなると、カラムが縦に並ぶようになります。
色やフォントを工夫する
- サイドバーを目立たせたいときは背景色を変える
- メインコンテンツを見やすくするためにフォントサイズを調整
例えば：
.sidebar {
background-color: #e3f2fd;
color: #01579b;
}
.main-content {
font-size: 18px;
}
5. 2カラムレイアウトの注意点
情報の優先順位を考える
どの情報をメインに見せたいかを意識して配置しましょう。サイドバーに重要な情報を詰め込みすぎると、どちらがメインかわからなくなることも。
スペースの使い方
左右のカラムの幅をバランスよく調整することが大事です。片方に情報を詰め込みすぎると、全体の見た目が崩れます。
モバイル対応を忘れない
今はスマホで閲覧する人が多いので、レスポンシブデザインは必須です。
6. 参考リンク
7. まとめ
2カラムレイアウトはシンプルで使いやすく、多くのサイトで採用されているデザインです。HTMLとCSSを使えば簡単に作れるので、この記事を参考にぜひチャレンジしてみてください！
分からないところがあれば、画像やリンクを見てもう一度確認してみると良いですよ。あなたのWebデザインの一歩が楽しくなることを願っています！
以上が２カラムのレイアウトについてでした。
次回はタイル型のレイアウトについて紹介します。
