/CSS3:簡単に段組を作れる「columns」プロパティハック2014.09.165,387CSS3CSS3:簡単に段組を作れる「columns」プロパティツイートシェアはてなあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの上記は実際にCSS3のプロパティ「columns」を使って作った段組です。以前はfloatを用いて「ここまでは一段目、ここまでは二段目...」と個別に段組を意識しながら作る必要がありましたし、文中で次の段に飛ばすなんてことは不可能でしたが、columnsは単純に連続したテキストを自動的に段組化してくれます。3;}上記のように、まだベンダープレフィックス付きの記述が必要ですが、値としては分けたい段組の数を記入するのみです。<p>なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの</p></div>HTMLは上記のようになります。段組を意識することなくテキストを流し込んでいるのみです。3;}上記のように、段組ひとつ当りの最低幅を指定することができます。段組が最低幅を下回る場合、段組が解除され平坦な並びになるのですが、最低幅を設定しておくだけで事実上レスポンシブ対応になります。IE9以前ではcolumnsは使えませんが、10以下はブラウザシェアも下がりつつあるので利用価値の高いプロパティです。ツイートシェアはてなゴトーUI/UXエンジニア。デザイン、サービス設計、機能(UI)設計、サーバサイド、SEO、ウェブマーケティングなどWebの全般に関わり、現在はBtoBの領域中心にWebとユーザーのふれあい方(体験:UX)に関して垣根なく取り組んでいます。