Webサイトを作るときによく使われるレイアウトの1つに「2カラムレイアウト」があります。左右に分かれたシンプルな構成ながら、情報を整理しやすく、ブログや企業サイトなど幅広く活用されています。
この記事では、2カラムレイアウトの基本構造やデザインの考え方、実際に使えるHTMLとCSSのコード例を丁寧に解説します。初心者でもコピー＆ペーストで使える内容なので、これからWeb制作を始めたい方にもおすすめです。
2カラムレイアウトは、画面を左右に分けて構成するデザイン手法です。一般的には左側にナビゲーションやメニュー、右側にメインコンテンツを配置します。
まずは基本となる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">
<aside class="sidebar">
<h2>サイドバー</h2>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</aside>
<main class="main-content">
<h1>メインコンテンツ</h1>
<p>ここに記事の内容が入ります。</p>
</main>
</div>
</body>
</html>
HTMLに合わせて、CSSで左右に並べるレイアウトを作ります。
/* style.css */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.sidebar {
width: 30%;
padding: 20px;
background-color: #f5f5f5;
}
.main-content {
width: 70%;
padding: 20px;
background-color: #ffffff;
}
このように、display: flexを使うと、親要素内で横並びのレイアウトを簡単に実現できます。
スマホやタブレットでも見やすくするためには、レスポンシブ対応が欠かせません。以下のようにCSSを追加します。
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar, .main-content {
width: 100%;
}
}
これにより、画面幅が狭い時には縦並びになり、スマートフォンでも快適に表示されます。
2カラムレイアウトをより魅力的に見せるには、以下のポイントを意識するとよいでしょう。
例：
.sidebar {
background-color: #f0f0f0;
border-right: 1px solid #ddd;
}
.main-content h1 {
font-size: 1.8rem;
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-bottom: 20px;
}
.sidebar {
flex: 0 0 300px;
}
.main-content {
flex: 1;
}
flex: 1でメイン部分を自動で広げられるので、画面サイズに応じた調整が可能になります。
2カラムレイアウトは、HTMLとCSSの基礎を押さえるには最適なテーマです。実際に手を動かしながら学べば、Web制作の理解がぐっと深まります。この記事のコードをベースに、自分なりのカスタマイズを試してみてください。
今後の発展としては、以下のようなことにも挑戦できます。
Web制作の第一歩として、2カラムレイアウトをぜひマスターしてください！