カラムレイアウト（段組み）で便利なスタイル
category：web
BootstrapやFoundation等のCSSフレームワークでスタイルまかせてWeb開発するのは確かに楽なんですが、オリジナルスタイルを作成する場合、今時はデバイスごとの横幅に関しては（決まりごともありますが）ちょっと意識して考えないといけない事柄だと思います。
スクリーンがいくらワイドになってきても、読みやすい一行あたりの文字数（英文で65〜75文字など）は一般的にあります。
レスポンシブなサイトであれば、ナビゲーションやカラム幅はリキッドデザインに合わせた計算の手間などが生じて、「こんなのブラウザ側が自動で合わせてよ」と筆者も何ども経験したことがあるのですが、CSS3では便利なプロパティが用意されモダンブラウザでちゃんとカバーしていることを最近知りました。その覚書です。
カラムレイアウト方法
カラム数指定
指定した数にカラム幅を等分するには、column-countを使う。
See the Pen 20160322-001 by TOBAatsushi (@birdwing3) on CodePen.
親要素にフィットするようにカラム数調整
下の例では、column-widthで各カラムは最低値(200px)で扱われて、親要素の幅(950px)に収まるように、200px × 4 = 800px で自動計算し、足りない150pxは均等にフィットするように各カラムに割り振られている。
各カラム幅が等しくできない場合は最後のカラムが少し短くなって自動調整する。
親がheight:の値を持っていれば、column-fill:balanseでコンテンツの流し込みかたが指定できる。
See the Pen 20160322-002 by TOBAatsushi (@birdwing3) on CodePen.
0