様々なサイトで段組みレイアウトが使われています。 Ardor(@ArdorOnline)です。 段組みレイアウトは、ブラウザによってレイアウトが崩れたり、なかなか思い通りのレイアウトにならなかったりと苦労が耐えないものです。 そんな段組みレイアウトの機能が、CSS3からサポートされました！簡単にご紹介します。
マルチカラム
マルチカラムの段組みと聞くと、divタグにfloatやmarginを利用して表現していることが多いです。 CSS3からは次のプロパティでマルチカラムが簡単に作成できます。
※ブラウザによって対応が違うので、段組みをする際にはすべて指定することが望ましいです。
| プロパティ | 値 | サンプル |
|---|---|---|
| column-count | 段数 / auto | column-count : 2 |
| -moz-column-count | 段数 / auto | -moz-column-count : 2 |
| -webkit-column-count | 段数 / auto | -webkit-column-count : 2 |
マルチカラムレイアウトのスタイル記述
マルチカラムでレイアウトするには次のように記述します。
.sample {
width : 550px;
margin : auto;
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
今回の記述例は、2段です。3段にしたい場合は、数値を3に変更します。
段組みサンプル
次のサンプルでは、divタグのclassに上記のsampleを指定してコンテンツを作成しています。
マルチカラムレイアウト
このブロックはcolumn-countプロパティで2段になるように指定されています。
段組みレイアウトサンプル
このブロックはcolumn-countプロパティで2段になるように指定されています。
最後に
段組みレイアウトは、苦労が絶えませんでしたが、CSS3を利用すると意外にも簡単にできるようになりました。
主力ブラウザも対応しているので、使っていみるといいでしょう。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿