サイト作成フレックスボックスを使ってカラムレイアウトをする方法

サイト作成をする際にフレックスボックスを使ってカラムレイアウトする方法を説明した記事になります。 2カラムレイアウトと3カラムレイアウトの掲載をしています。

カラムレイアウト
1. ２カラムのサイトイメージ
制作
まとめ

カラムレイアウト

そもそもカラムってなんだ？となると分からなくなってしまうので、まずはカラムのイメージをご説明します。

２カラムのサイトイメージ

ヘッダー

メイン

フッター

普段観覧しているサイトをよく見てみると、左にメインの本文があり右にメニューなどが表示されているか、もしくは左にメニューなどがあり右にメインの本文がある場合が多いと思います。このように横方向に何列のコンテンツを表示するかをカラム数として数えます。

3カラムのサイトイメージ

ヘッダー

メニュー1

メイン

メニュー2

フッター

このようにサイドバーが２つあってメインがある３カラムのサイトもよくあります。

制作

HTML/CSSの基本的なサイト作成の方法、CSSの外部ファイル読み込みなどが分からないと先に進めないと思うので、その場合はこちらの記事を参考にしてみてください。

HTML/CSSでホームページを作成しよう開発準備編

この記事ではそのような人向けにまず何から始めればHTML/CSSでサイトを作ることができるのかを解説しています。

２カラムのHTML/CSSソース

さて、サイトのどこにどのようなコンテンツを作るかはご自身で自由に決めて頂くとして、真っ白な状態から２カラムのサイトを作る場合です。

＜HTML ソース＞

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>２カラムのサイト</title>
  <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
  <header>ヘッダー</header>
  <div class="container">
   <main>メイン</main>
   <nav>メニュー</nav>
  </div>
  <footer>フッター</footer>
 </body>
</html>

＜CSS ソース＞

body {
 margin: 0;
}

header,
footer {
 background: pink;
}

.container {
 display: flex;
}
main {
 flex: 2;
 background: yellow;
}
nav {
 flex: 1;
 background: limegreen;
}

<ブラウザの表示>

こちらをクリックして別ページで確認できます

メインとメニューの割合

上の例では、フレックスボックス子要素のプロパティ flex を使い、余白を 2 : 1 の割合で main と nav に振り分けています。サイドバーが固定幅の方が良いという場合は以下のように指定すると、nav は固定幅、main はレスポンシブになります。

main {
 flex: 1;
}
nav {
 width: 300px;
}

nav に flex を指定しないことで初期値の 0 となり余白の振り分けはされません。width を設定してあげることで固定幅となり、余白は flex: 1 の指定がある main に全て振り分けられます。

flex は一括指定プロパティなので、詳しく知りたい方はこちらの記事の flex-grow を見てみて下さい。

フッターを画面の下まで下げる場合

上のコードを書いた場合、メインやナビのコンテンツが増えていくことによって高さが作られフッターが下に下がって行きます。逆にいうとコンテンツが少ない状態ではフッターは上に表示された状態で、画面の下が真っ白になっていて見栄え的に気になることがあります。その場合は CSS の html と body と .container プロパティを以下のように書きます。

html {
 height: 100%;
}
body {
 margin: 0;
 display: flex;
 flex-direction: column;
 height: 100%;
}
.container {
 display: flex;
 flex: 1;
}

html と body のheight を 100% に指定することによって、縦方向いっぱいに高さが広がります。body を縦方向のフレックスボックス（flex-direction:column）にし、その子要素である header, container, footer の高さをコントロールできるようにします。今回、余白を振り分けたいのは container だけなので flex: 1 としています。

こちらをクリックして別ページで確認できます

このようなレイアウトが出来上がるので、あとはそれぞれの要素の中に表示させたいコンテンツを書き込んでいくような感じです。

３カラムのHTML/CSSソース

参考までに３カラムのサイトを作った場合のソースものせておきます。

＜HTML ソース＞

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>３カラムのサイト</title>
  <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
  <header>ヘッダー</header>
  <div class="container">
   <aside>メニュー1</aside>
   <main>メイン</main>
   <nav>メニュー2</nav>
  </div>
  <footer>フッター</footer>
 </body>
</html>

＜CSS ソース＞

html {
 height: 100%;
}
body {
 margin: 0;
 display: flex;
 flex-direction: column;
 height: 100%;
}

header,
footer {
 background: pink;
}

.container {
 display: flex;
 flex: 1;
}
aside {
 flex: 1;
 background: skyblue;
}
main {
 flex: 2;
 background: yellow;
}
nav {
 flex: 1;
 background: limegreen;
}

＜ブラウザの表示＞

こちらをクリックして別ページで確認できます