【CSS】“段組み”レイアウトを実現する「columen-count」

先日、「オシャレだなー」と思うサイトを色々と見ていたら、「雑誌で良く見る“段組みレイアウト”」を実装しているサイトを見かけまして、「これってCSSで再現できるのか!」とビックリしました。

そして調べたら「column-count」というプロパティで簡単に出来ることが分かったので、アウトプットも兼ねて、手順を紹介します。

ちなみにIE11対応です。

当記事はこんな方にオススメ

・文字数が多く単調なコンテンツを良い感じにしたい(デザイナー)

・雑誌でしか見たことの無い「段組みレイアウト」でカンプが上がってきた(コーダー)

 

CSS「column-count」で段組み可能!

まずはコピペ用のソースです▼

幅が狭くて見づらいと思うので、以下で実演します。(それでもSPだと見辛いです)

▼3カラム

おかんが好きな朝食の名前、俺が思い出したるわ。特徴言うてぇや。甘くて、サクサクしてて、牛乳かけて食べる?その特徴は正にコーンフレークやないかい。でも死ぬ前の最後の食事もそれがいい?ほならコーンフレークと違うかー。死ぬ前の食事が、コーンフレークでえぇわけないもんね。あれはまだ寿命に余裕があるから食べてられるねん。最後の食事に任命されたら、コーンフレーク側も荷が重いよ。え?栄養の五角形がなんであんなにでかいのか分からへん?やっぱりコーンフレークやないかい。コーンフレークの五角形はほんまにでかいねん。せやけどな、アレは牛乳の栄養素も含んだ五角形になっとんねん。俺の目は騙されへんよ。俺を騙したら大したもんや。

▼5カラム

おかんが好きな朝食の名前、俺が思い出したるわ。特徴言うてぇや。甘くて、サクサクしてて、牛乳かけて食べる?その特徴は正にコーンフレークやないかい。でも死ぬ前の最後の食事もそれがいい?ほならコーンフレークと違うかー。死ぬ前の食事が、コーンフレークでえぇわけないもんね。あれはまだ寿命に余裕があるから食べてられるねん。最後の食事に任命されたら、コーンフレーク側も荷が重いよ。え?栄養の五角形がなんであんなにでかいのか分からへん?やっぱりコーンフレークやないかい。コーンフレークの五角形はほんまにでかいねん。せやけどな、アレは牛乳の栄養素も含んだ五角形になっとんねん。俺の目は騙されへんよ。俺を騙したら大したもんや。

これらは「flex-box」とか「float」で横並びにしてるわけではありません。

「column-count」というCSSプロパティを使うことで、一つのボックス内の文章が、雑誌でよく見る「段組み」に切り替わります

しかもIE11完全対応!
Edgeにも対応しています!

必要なCSSは以下。

	
.sentence {
  column-count: 3; /* カラム数を指定 */
  column-gap: 20px; /* カラム間の間隔を指定 */
}
	

たったの2行。
めちゃくちゃ簡単です。

 

単調な印象がグッと変わる

文章が長いコンテンツを「1行パターン」と「2行パターン」で再現してみました。
それぞれ見比べてみてください。

▼1行パターン

▼2行パターン

微かな変化ですが、単調な「ブログ記事」のような印象が無くなり、「ブランディングページの1セクション」みたいな印象が増したように思います。

 

まとめ:どちらかというと「webデザイナー」向け

「段組みレイアウト」は、グラフィックデザイナーの方ならば馴染みがあると思います。
しかし「Webで出来ない」または「Webに適さない」という考えがあるせいか、今まで、「段組み」を応用したデザインカンプが上がってきたことがありません。

でも実はめっちゃ簡単に出来るんです。

「文章が長くてなんか単調になった」
と感じたら、是非実践してみましょう。

ホームページ制作や運営に関するお悩みや制作依頼
何でもお気軽にご相談ください

セールスのご連絡に関しまして

当社では営業のご連絡は全てお断りさせて頂いております

スネアクロス株式会社

〒810-0001
福岡県福岡市中央区天神4-6-28天神ファーストビル7階

https://s-cross.net