【CSS】２段組／２カラムレイアウトの作り方

CSSでお手軽に２カラム／２段組レイアウトを作りたいときはFlexboxがおすすめです。手順は簡単、コピペで使えるサンプルコードも公開中です。レスポンシブ対応済、幅や高さの調整もOK！深く悩まずに導入できます。

サンプル

等幅レイアウト

１：２レイアウト

コード

HTML

等幅レイアウト

<div class="myrow">
<div class="col-1" style="margin: 1em;">
シンプルな２カラム／２段組レイアウトです。等幅で表示させています。
</div>
<div class="col-1" style="margin: 1em;">
雑誌で見かけるような形式で、文章をカラム間に連動させたい場合はcolumnがおすすめです。ただ、Webではあまり活用する機会はないかもしれません。
</div>
</div>

1:2レイアウト

<div class="myrow">
<div class="col-1" style="margin: 1em;">
横幅を１：２の比率で表示させてみました。
</div>
<section class="col-2" style="margin: 1em;">
ディスプレイサイズが700px以下の場合は、カラムが縦一列に表示されます。デスクトップでご覧の場合は、ウィンドウサイズを変更してみてください。
</div>
</div>

CSS

.myrow{display:-webkit-flex;display:flex;}
.mycol-1{flex:1;}
.mycol-2{flex:2;}
.mycol-3{flex:3;}
.mycol-4{flex:4;}
.mycol-5{flex:5;}
.mycol-6{flex:6;}
@media screen and (max-width:700px){
  .myrow{-webkit-flex-direction:column;flex-direction:column;}
}

あわせて読みたい【CSS】３カラム以上／マルチカラムレイアウトの作り方

解説

Html

まず、Htmlコードのほうですが、どちらのレイアウトも、１つの行（myrow）のなかに２つのカラムを入れています。そして、「等幅」と「１：２」の違いは１か所だけです。２つ目のセクションを「col-1」から「col-2」に変えることで、等幅レイアウトから１：２レイアウトへ変更しています。

CSS

myrowで「FlexBox」を使いますと宣言して、クラス「col-1」～「col-6」は各カラムの比率を定義しています。このデモでは、「col-1」と「col-2」を使って、１：２レイアウトを実現していますが、例えば、「col-3」と「col-4」を使えば、３：４レイアウトを実現できます。最後のMedia Screenはモバイル端末の時に縦一列に表示させるブロックです。

WordPressのショートコードプラグインとの違い

Shortcode Ultimateなどのプラグインを利用しても同じような２段カラムをつくることができます。しかし、１つだけショートコードには問題点があります。それは、ショートコードで挟んだタグ間のテキストがRSSに反映されないということです。SEOの観点からも、文字情報は重要な情報ですので、面倒でもCSSでレイアウトを組んだほうが無難です。

まとめ

FlexBoxはメジャーなブラウザでは一般的に使われるレイアウトです。段組みには他にもfloatやtableといった古典的な手法から、gridlayoutのような先進的な手法まで対応方法はいくつもあります。ただ、シンプルという点ではFlexBoxがベストです。オプションを更に詳細に設計すれば、もっと高度なこともできますので、２段組／２カラムの設計で迷ったら、FlexBoxにしておくといいと思います。