CSSのflexを用いた基本的なレイアウト方法の紹介。今回は単純な2カラムレイアウトの組み方について見ていきます。

flexで作る2カラムレイアウト

まずは、2カラムレイアウトの枠組みとして、以下のようなHTMLをマークアップしておきましょう。

<div id="container">
  <div id="main">
    ～メインコンテンツ～
  </div>
  <div id="side">
    ～サイドバーなど～
  </div>
</div>

これを2カラムで表示させるには、横並びにしたいコンテンツの親要素に対して「flex」を指定します。

#container {
  display: flex;
}

これだけで、簡単に2カラムのレイアウトを作ることができます。

中央に表示したい場合

画面全体に表示させるのではなく、ページ中央に表示して左右に余白を付けたい場合は、widthとmarginを追加しましょう。

#container {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
}

左右の幅を調整したい場合

メインコンテンツとサイドを一定の幅を保って表示させたい場合は、flexプロパティを使って調整します。

#main {
  flex: 3;
}
#side {
  flex: 1;
}

このようにすると、メインとサイドを3対1の割合で表示させることができます。

サイドバーは固定で表示したい場合

メインコンテンツは可変してサイドバーは固定したまま表示させたい場合は、以下のように指定します。

#main {
  width: calc( 100% - 300px );
}
#side {
  width: 300px;
}

calc関数を使ってメインコンテンツの幅を100％からサイドバーのサイズ分だけ引いた数値を指定することで、サイドバーを固定したままメインコンテンツを可変させることができます。

レスポンシブデザインに対応させたい場合

レスポンシブデザインで作成する場合、モバイルなど小さな端末では2カラムだと見ずらいことがありますので、メディアクエリを使ってモバイルでは1カラムの縦表示にして、ある一定のサイズを超えたら2カラムで表示するようにします。

モバイルファーストで作る場合

モバイルファーストで作成していく場合は、以下のようにします。

@media screen and (min-width: 600px) {
  #container {
    display: flex;
  }
}

このようにすると、600px以上から2カラムで表示されるようになります。

PCファーストで作る場合

PCファーストで作成していく場合は、以下のようにします。

#container {
  display: flex;
}
@media screen and (max-width: 599px) {
  #container {
    flex-direction: column;
  }
}

このようにすると、600px以下では1カラムで表示されるようになります。flex-directionプロパティは要素をどのように配置するかを指定するもので、「column」という値を指定すると要素が縦に並ぶようになります。

以上が、flexを使って2カラムレイアウトを作成する方法となります。

おすすめの記事