まるで雑誌みたいな段組のカラムレイアウト | 指で覚えるHTML5

マルチカラムレイアウトを使うとまるで雑誌や新聞のようにコンテンツを段組で表示できます。 また、自動的に段組できる点はスマホやタブレットなどのデバイスにも有用ですね。 カラム数、幅を決める まずは段組の数を決めましょう。 方法はカラム数を決めるcolumn-countかcolumn-widthです。 column-count:数値 カラム数を手動で設定します。カラム数は絶対変更されず、拡大、縮小します。 column-width:20em/300px 1つのカラム幅の「目安」を設定します。あくまで「目安」なのでカラム数はブラウザサイズに依存し、拡大、縮小します。 .column_01{ background:#fff; padding:10px; -webkit-column-count:3; -moz-column-count:3; } WEBデザイナーよし男の冒険 OK、ぼくよし男。よく

[m_shige1979]

マルチレイアウトサンプル