waka8*stakes

〜馬絵+林檎+Wordpress〜

CSS3でカラムレイアウトに頭を悩ませる必要がなくなった?

CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture.

ブログのデザインで2カラムとか3カラムのレイアウトを作るのが苦手だった。無理矢理floatを使うのが一般的で、カラムを囲むボックス(良くdiv id=”container”とか指定されてるやつ)が中のボックスたちを囲んでくれないorz(正しい挙動らしいが)とか、右カラムと左カラムの高さが合わなくて不格好になっちゃったとか、サイドバー落下事件とかいろいろあってなかなか思うようにレイアウトできなくて、結局レイアウトのためのCSSはブログなどで公開されてるソースをコピペして真似したりしてなんとかしのいでた時期もあった。めんどくさいしスマートフォンにもやさしいかなと思ったり、うちにはサイドバーに載せるコンテンツもないし、もうサイドバーはいらないという考えに落ち着いて現在の1カラムにしている。

でも上記の記事を見てみたらdisplay: boxで楽に横並びのカラムレイアウトが出来るらしいではないですか!しかも高さも合わせてくれるらしい。3カラムは個人的にくどいような気がするのでまた2カラムがやりたくなったらこの方法でやってみよ〜っと!