2カラムレイアウトの基本
Webページではメインコンテンツの左右どちらかにサイドバーを配置した2カラム（2段組）のレイアウトが多く使われています。2カラムのレイアウトを作成するにはいくつかの方法がありますが、ここではフレックスボックス（フレキシブルボックス）を使った方法を解説します。
フレックスボックスは従来のfloatプロパティを使った方法に比べシンプルに記述することができます。そのため、比較的簡単にレイアウトを作成できたり、PCでは横並び、スマホでは縦に並べるといったレスポンシブデザインも簡単に作ることができます。
2カラムレイアウトの基本
2カラムのレイアウトを作成する場合、ヘッダーの下にメインコンテンツとサイドコンテンツの２つのグループを作り、それぞれのグループをフレックスボックスを使って横に並べます。図で表すと次のようになります。
このようなレイアウトの場合、HTMLの記述は次のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<!-- ヘッダーの内容を入力 -->
</header>
<div id="contents">
<div class="main">
<!-- メインコンテンツの内容を入力 -->
</div>
<div class="sub">
<!-- サイドメニューの内容を入力-->
</div>
</div>
<footer>
<!-- フッターの内容を入力 -->
</footer>
</div>
</body>
</html>
CSSで「display: flex」を指定
上記のHTMLをそのまま表示すると、メインコンテンツとサイドメニューは縦一列に表示されてしまいます。これを横に並べて表示するには、「main」と「sub」の親要素である「#contents」に対して、CSSのdisplayプロパティでflexを指定します。また、「main」と「sub」のクラスにはそれぞれの横幅を指定します。
#container {
/* ページ全体の横幅 */
width: 1000px;
/* 左右のマージンをautoにすることで中央配置 */
margin: 0 auto;
}
header {
/* ヘッダーの横幅 */
width: 100%;
}
#contents {
/* main + subの横幅 */
width: 100%;
/* コンテンツを横に並べる指定 */
display: flex;
}
.main {
/* mainの横幅 */
width: 700px;
}
.sub {
/* subの横幅 */
width: 300px;
}
footer {
/* フッターの横幅 */
width: 100%;
}
可変レイアウトにする（可変幅 ＋ 固定幅）
上記のCSSはメインコンテンツとサイドメニューがそれぞれ固定幅で指定されています。これを、たとえばサイドメニューを固定幅として、メインコンテンツはディスプレイのサイズによって変化する可変幅とするにはmainクラスの横幅指定を削除して「flex: 1」を追加します。また、ページ全体の横幅も可変幅とするために「width」から「max-width」に変更します。mainクラスに「max-width」や「min-width」を指定して、可変する範囲を指定することもできます。
#container {
/* ページ全体の横幅（max-widthに変更） */
max-width: 1000px;
/* 左右のマージンをautoにすることで中央配置 */
margin: 0 auto;
}
header {
/* ヘッダーの横幅 */
max-width: 100%;
}
#contents {
/* main + subの横幅 */
width: 100%;
/* コンテンツを横に並べる指定 */
display: flex;
}
.main {
/* 「flex: 1」を指定して可変幅 */
flex: 1;
}
.sub {
/* subの横幅 */
width: 300px;
}
footer {
/* フッターの横幅 */
max-width: 100%;
}レスポンシブデザインにする
フレックスボックスを使って横並びにしたコンテンツをスマホなどでは縦に並べたデザインとしたい場合には、CSSのメディアクエリを使い、「display: flex」を「display: block」に変更します。また、それぞれのコンテンツの横幅などをデザインに合わせて調整します。
たとえば、ディスプレイの横幅が850pxよりも小さい場合に縦に並べるには次のように記述します。
#container {
/* ページ全体の横幅（max-widthに変更） */
max-width: 1000px;
/* 左右のマージンをautoにすることで中央配置 */
margin: 0 auto;
}
header {
/* ヘッダーの横幅 */
max-width: 100%;
}
#contents {
/* main + subの横幅 */
width: 100%;
/* コンテンツを横に並べる指定 */
display: flex;
}
/* メディアクエリで「display: block」を指定 */
@media screen and (max-width: 850px) {
#contents {
display: block;
}
}
.main {
/* 「flex: 1」を指定して可変幅 */
flex: 1;
}
/* 850pxよりも小さい場合の横幅 */
@media screen and (max-width: 850px) {
.main {
width: 100%;
}
}
.sub {
/* subの横幅 */
width: 300px;
}
/* 850pxよりも小さい場合の横幅 */
@media screen and (max-width: 850px) {
.sub {
width: 100%;
}
}
footer {
/* フッターの横幅 */
max-width: 100%;
}
