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

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

サンプル

等幅レイアウト

１：２レイアウト

コード

HTML

等幅レイアウト

1:2レイアウト

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にしておくといいと思います。