【CSS】マルチカラムの段組レイアウト

      2017/03/29

以前なら段組レイアウトといえば、floatが主でしたが
最近では、FlexibleBoxなど、他の選択肢も検討できるようになってきました。
それぞれの違いについて書いておきたいと思います。

Ⅰ.floatプロパティによるレイアウト

よく利用されているレイアウト方法。
floatプロパティは、ブロックレベル要素を浮動状態にして、テキストを横に回り込ませる。
隣接する複数の要素にfloatを指定する事で、通常は「縦」に並ぶブロックレベル要素を「横」に並べる事ができる。
マルチデバイスでの使用にも問題はないが、段組のための機能ではないのでCSSが複雑になってしまう。

(HTML)
		<div class="wrapper">
			<div id="div1">div1</div>
			<div id="div2">div2</div>
		
			<div id="div3" style="float:left">div3</div>
			<div id="div4" style="float:left">div4</div>		
		</div>
	
(CSS)
		div {
			width:100px;
			border: 1px solid black;
			background-color: #fff;
		}
	

Ⅱ.Flexible Boxによるレイアウト

段組みだけでなく、中央揃えや均等割り付けなどが行える。

詳細については以下のページに書いています。
http://illarena.com/programming/css/flexible-box/

Ⅲ.Multiple columnによるレイアウト

サイドバーをメインコンテンツの横に配置するような一般的に言うマルチカラムとは異なり、1つの要素を同一幅に分割して、その中にテキストを流し込む。

(CSS)
		div {
			column-gap: 2em;
			column-count: 2;
			column-rule: 5px solid red;
		}
	

column-gapプロパティは、段間
column-countプロパティは、段数
column-ruleプロパティは、段間罫線
column-widthプロパティは、段幅 ※段数の代わりに使用できる

現状、まだ多くのブラウザでベンダープレフィックスが必要のため、Flexible Boxを使用したほうが良さそう。

まとめ

Flexible Boxに関しては、最新のブラウザーでは、ある程度サポートされているようなので、
対応ブラウザを確認したうえで使っていきたいですね。

 - css , , , ,