メモログ

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

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

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

-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 を複数囲うなんてことは必要なくなるんでしょうね。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。