カラムレイアウトを簡単に実装するCSS

Writer:Asai (20.10.12)

Webサイトのレイアウトを組むためには、カラムレイアウトは避けては通れない道です。今回は、簡単にカラムレイアウトを組むためのCSSを紹介します。

目次【非表示】

flaotとcalc()を利用したカラムレイアウト
flexの利用

flaotとcalc()を利用したカラムレイアウト

まずは、下記のデモを確認してください。こちらは、2:3のカラムレイアウトを用意してみました。

上のデモのように簡単なCSSでカラムレイアウトを実装することができまåす。今回使用している、floatやcalcはほぼ全てのブラウザでサポートされているため、使い勝手という点では便利なプロパティです。

Can I use... Support tables for HTML5, CSS3, etc

calc()の活用

calc()は、CSS のプロパティ値を指定する際に計算を行うことができる非常に便利な関数です。calc()関数はwidthやheightなどに活用できます。

記述例

上記の記述では、widthに「calc(100%-30px)」を指定しています。これを指定することで、「横幅100%から30pxを指定したwidth」での表示が可能になります。

こちらは、widthに「calc(100%/2)」を指定しています。つまり、50%での表示になります。

では、デモ画面で指定した「width: calc( (100% - 30px) / 5 * 2 )」を説明していきます。

まず最初に「100%-30px」ですが、この30pxはカラム同士の間隔です。今回は30pxをカラム同士の間隔とするために、最初に30pxを引いておきます。
次に「/5」ですが、今回のデモでは、2:3の比率のため、5等分します。最後に、*2ですが、「5等分したカラムの2個分」のwidth指定のため、2掛けをしています。

以上のように、calc()はpx指定ではなく、計算式からwidthやheightが指定できる非常に便利な関数です。また、レスポンシブデザインに対応する場合は、widthに100%を指定し、floatを解除すれば大丈夫です。

flexの利用

次にflexを利用したカラムレイアウト例です。flexはfloatよりも簡単に実装ができるため、現在では主流となりつつあるレイアウト方法です。

flexでカラムレイアウトを実装する場合は、親要素にdisplay:flexを指定します。その後、カラム要素にflexで比率を指定します。flexを利用せずに、widthを指定すれば、そのカラムは固定の長さで表示することも可能です。レスポンシブデザインに対応する場合は、flex-direction: column; を親要素に指定します。

非常に便利なflexですが、注意すべき点もあります。それは、IEでのバグが発見されていることです。そのため、flexを利用する際は、IEでの表示確認を必ずするようにしてください。