メモログ

塵が積もって山とならないメモのログ

CSS:column-count で3列レイアウトを作成

フッター部分を3列にしてみようかなと唐突に思いついて、以前から興味あったcolumn-countを使って3列にしてみました。FirefoxとSafariでのみ対応(IEでは1列のまま表示されます)。Picoのデザインのバランスを崩している気がしないでもないですけど、まあいいか。

追加したCSSは下記のよう感じです。他にもいろいろ追加してますけど不要な部分は割愛。

1
2
3
-webkit-column-count: 3; -webkit-column-gap: 10px;
-moz-column-count: 3; -moz-column-gap: 10px;

-webkitがSafari用で-mozがFirefox用。colum-countは列(カラム)の数を指定して、column-gapは列と列の間の隙間の大きさを指定します。

簡単ですなあ。これで背景画像を複数指定できるようになったらdivを複数囲うなんてことは必要なくなるんでしょうね。