【CSS】３カラム以上／マルチカラムレイアウトの作り方

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

サンプル

３カラム

４カラム

コード

HTML

３カラム

<div class="myrow">
<div class="mycol-1" style="margin: 1em;">
シンプルな３カラム／３段組レイアウトです。
</div>
<div class="mycol-1" style="margin: 1em;">
３カラムレイアウトはバランスがよく使いやすいレイアウトです。
</div>
<div class="mycol-1" style="margin: 1em;">
等幅で表示させています。このデモでは周囲にマージンを取っています。
</div>
</div>

４カラム

<div class="myrow">
<div class="mycol-1" style="margin: 1em;">
シンプルな４カラム／４段組レイアウトです。
</div>
<div class="mycol-1" style="margin: 1em;">
４カラムレイアウトはアイコン等で訴求するデザイン向いています。
</div>
<div class="mycol-1" style="margin: 1em;">
等幅で表示させています。このデモでは周囲にマージンを取っています。
</div>
<div class="mycol-1" style="margin: 1em;">
レスポンシブ対応です。縦一列に配置が変わります。
</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コードのほうですが、３カラムと４カラムレイアウトの違いは、カラムセクションが１つ多いということだけです。同様にカラムのセクションを追加していけば、５カラム、６カラム、７カラム・・・と増やすことができます。

CSS

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

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

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

Shortcodes Ultimateの使い方の注意点【WordPress】

まとめ

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