column-widthでもマルチカラムレイアウトが作れます。 Ardor(@ArdorOnline)です。 マルチカラムレイアウトをCSS3で作るならcolumn-widthでも作れます。 前回、column-countでマルチカラムを作成しました。 column-countでは、段組み数を指定する方法なので、他の幅などを考慮して作成する必要があります。 何段で作成するかを明確に指定が可能な方法です。 では、幅に合わせて段組みを作りたい場合は、どうしたらいいでしょうか？ 幅で指定したい場合は、column-widthを利用します。
幅指定でマルチカラム
幅を指定してマルチカラムレイアウトを実現する場合は、column-widthを利用します。 ブラウザによって指定が異なりますので、すべて指定すると良いです。
| プロパティ | 値 | サンプル |
|---|---|---|
| column-width | 段幅 / auto | column-width : 100px |
| -moz-column-width | 段幅 / auto | -moz-column-width : 100px |
| -webkit-column-width | 段幅 / auto | -webkit-column-width : 100px |
スタイルの記述
スタイルの記述例は次の通りです。
.sample {
width: 600px;
margin: auto;
column-width: 250px;
-moz-column-width: 250px;
-webkit-column-width: 250px;
}
例では、マルチカラムの幅を250pxで指定しています。
ただし必ずしも250pxになることはないようです。
段組みの間には余白ができますし、全体で600pxを指定しています。
250px×2 = 500px ですので、残り100pxが段組みの余白になります。
サンプル
次に上記スタイルを指定した段組みの内容を表示させています。
マルチカラムレイアウト
このブロックはcolumn-countプロパティで2段になるように指定されています。
段組みレイアウトサンプル
このブロックはcolumn-countプロパティで2段になるように指定されています。
最後に
CSS3からはレイアウトにもあまり苦労しなくて済みそうです。
少し前は、だいぶ苦労した記憶があります。。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿