CSSでサイドバーを作る｜Flexboxで2カラムレイアウトを実装

Webサイトでよく見かける「サイドバー＋メインコンテンツ」の2カラムレイアウトは、CSSのFlexbox（フレックスボックス）を使うことで簡単に実装できます。この記事では、Flexboxの基本的な使い方から、実用的なサイドバーレイアウトの作り方まで解説します。

Flexboxの基本

Flexboxは、要素を横並び（または縦並び）に配置するためのCSSレイアウト手法です。親要素にdisplay: flex;を指定するだけで、子要素が横並びになります。

CSS

/* 親要素にdisplay: flexを指定 */
.container {
    display: flex;
}

/* 子要素が自動的に横並びになる */
.box1 {
    background-color: #e8f4fd;
    padding: 20px;
}

.box2 {
    background-color: #fde8e8;
    padding: 20px;
}

.box3 {
    background-color: #e8fde8;
    padding: 20px;
}

HTML

<div class="container">
    <div class="box1">ボックス1</div>
    <div class="box2">ボックス2</div>
    <div class="box3">ボックス3</div>
</div>

display: flex;を親要素に設定するだけで、子要素は横方向に等間隔で並びます。これがFlexboxの最も基本的な使い方です。

2カラムレイアウトの作成

サイドバーとメインコンテンツの2カラムレイアウトを作ってみましょう。サイドバーの幅を固定し、メインコンテンツが残りの幅を使うように設定します。

HTML

<div class="layout">
    <div class="sidebar">
        <p>目次</p>
        <p>EXCEL</p>
        <p>Program</p>
        <p>その他</p>
    </div>
    <div class="main-content">
        <p>ここをメインのコンテンツとして使用します。</p>
    </div>
</div>

CSS

.layout {
    display: flex;
}

.sidebar {
    width: 20%;
    background-color: rgb(210, 218, 171);
    text-align: center;
    padding: 10px;
}

.main-content {
    width: 80%;
    background-color: rgb(252, 160, 98);
    padding: 10px 10px 10px 40px;
}

親要素の.layoutにdisplay: flex;を設定することで、.sidebarと.main-contentが横並びになります。サイドバーを20%、メインコンテンツを80%の幅に設定して、2カラムレイアウトが完成します。

orderプロパティで表示順を変更

Flexboxのorderプロパティを使うと、HTMLの記述順とは異なる順序で要素を表示できます。

CSS

.layout {
    display: flex;
}

/* HTMLではサイドバーを後に書いても、orderで左に配置 */
.sidebar {
    width: 20%;
    background-color: rgb(210, 218, 171);
    order: 1;  /* 数字が小さい方が先（左）に表示 */
}

.main-content {
    width: 80%;
    background-color: rgb(252, 160, 98);
    order: 2;  /* 数字が大きい方が後（右）に表示 */
}

orderプロパティは数値が小さいものから順に左（または上）に配置されます。デフォルト値は0です。HTMLの構造を変えずに表示順序だけを変更できるため、レスポンシブデザイン（画面サイズに応じたレイアウト変更）にも活用できます。

実用的なサイドバーレイアウト

実際のWebサイトに近い、より実用的なサイドバーレイアウトの例を紹介します。

CSS

.page-layout {
    display: flex;
    min-height: 100vh;  /* 画面の高さいっぱいに */
    gap: 20px;          /* サイドバーとメインの間に隙間 */
}

.page-sidebar {
    width: 250px;           /* 固定幅 */
    background-color: #f5f5f5;
    padding: 20px;
    border-right: 1px solid #ddd;
}

.page-sidebar a {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
}

.page-sidebar a:hover {
    background-color: #e0e0e0;
}

.page-main {
    flex: 1;    /* 残りの幅をすべて使う */
    padding: 20px;
}

flex: 1;は「残りのスペースをすべて使う」という意味です。サイドバーを固定幅（250px）にして、メインコンテンツにflex: 1;を指定することで、画面幅が変わってもメインコンテンツが自動的に伸縮します。gapプロパティは子要素間の間隔を設定でき、marginを個別に指定するよりも簡潔に書けます。

Flexboxの便利なプロパティ

display: flex; - 子要素を横並びにする（親要素に指定）
flex: 1; - 残りのスペースをすべて使う（子要素に指定）
order - 表示順序を変更する（値が小さいほど先に表示）
gap - 子要素間の間隔を設定する
flex-direction: column; - 縦並びに変更する
justify-content - 横方向の配置（center, space-between等）
align-items - 縦方向の配置（center, stretch等）

よくある間違い

display: flex;は親要素に指定します。子要素に指定しても横並びになりません
サイドバーの幅を%で指定する場合、合計が100%を超えると折り返しが発生します
古いブラウザ（IE11以前）ではFlexboxの一部機能が使えない場合があります

まとめ

Flexboxは親要素にdisplay: flex;を指定するだけで使える
2カラムレイアウトはサイドバーに固定幅、メインにflex: 1を指定する
orderプロパティでHTMLの記述順とは異なる表示順序にできる
gapプロパティで子要素間の間隔を簡潔に設定できる
flex: 1は残りのスペースを自動で使う便利なプロパティ
Flexboxはレスポンシブデザインにも活用できる