Writer:Asai (20.10.12)
Webサイトのレイアウトを組むためには、カラムレイアウトは避けては通れない道です。今回は、簡単にカラムレイアウトを組むためのCSSを紹介します。
flaotとcalc()を利用したカラムレイアウト
まずは、下記のデモを確認してください。こちらは、2:3のカラムレイアウトを用意してみました。
上のデモのように簡単なCSSでカラムレイアウトを実装することができまåす。今回使用している、floatやcalcはほぼ全てのブラウザでサポートされているため、使い勝手という点では便利なプロパティです。
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での表示確認を必ずするようにしてください。
また、flexのレイアウトは新しい手法なので、古いブラウザでは未対応のモノも多く存在しています。必ずベンダープレフィックスを一緒に記述するようにしましょう。ベンダーフィレックスについては、下のサイトで詳しく説明されています。
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。
