CSS3 レイアウトデザイン

CSS3では段数の指定、間隔などを指定することでより高度なレイアウトも簡単に構築することが可能になりました。

• ttp://www.w3.org/TR/css3-multicol/#property-index

1.マルチカラムレイアウト

column-countプロパティ

マルチカラムレイアウトでは段数や段の幅、間隔などを指定することができます。columun-countプロパティを使用することで段数を、段の幅はcolumn-widthプロパティで指定します。

段の間隔はcolumn-gapプロパティで指定します。

以下、マルチカラムレイアウトのプロパティ一覧です。

columns

段の幅と段数の指定

column-span

複数の段を貫く表示の指定

column-width

段の幅の指定

column-rule-style

区切り線のスタイルの指定

column-gap

段と段の間隔の指定

column-rule-color

区切り線の色の指定

column-rule-width

区切り線の太さの指定

column-fill

段の高さを揃える指定

column-count

段数の指定

break-after

改ページ・改段の挿入位置の指定

break-before

改ページ・改段の挿入位置の指定

break-inside

改ページ・改段の挿入位置（ボックス内）の指定

2.フレキシブルボックスレイアウト

displayプロパティ

マルチカラムレイアウトは一つのボックスを分割して表現しますが、フレキシブルボックスレイアウトは複数のボックスを水平方向に配置することができます。 使用用途としてはメニューボックスとして使用されるケースが多く、複数のボックスを含む親ボックスに対して[display:box;]と指定するとボックスが水平方向に並びます。

ボックスにdisplayプロパティを使用し[flexbox]をしていすることでブロック要素として扱われフレキシブルボックスが有効になります。デフォルトでは水平方向に並びますが、box-orientプロパティを使えば垂直方向に並べることができます。

css Flexible box layout Moduleプロパティの一覧です。

display

ボックスの種類の指定

flex-align

垂直方向の揃え

flex-flow

ボックスの方向

flex-line-pack

複数行ボックスの揃えの指定

flex-order

ボックスの表示順

flex-pack

水平方向の揃え

3.グリッドレイアウト

グリッドレイアウトでは適用したい領域に対して「display:grid」を指定しグリッドコンテナとして定義し、続けて行と列を指定し分割された領域にコンテンツを配置していきます。 列はgrid columnsプロパティで定義します。[grid-columnhs 15% 60% 25%]の場合、一列目の幅が15％　2列目が60％　３列目が25％の幅になります。行はgrid-rowsプロパティで定義を行います。 ボックスにdisplayプロパティを使用し、gridを指定することでグリッドレイアウトが有効になります。列の横幅はgrid-columnsプロパティで数値もしくは比率を指定します。

以下、grid layoutのプロパティ一覧です。

grid-columns

列の幅

grid-rows

行の高さの指定

grid-column

列の番号の指定

grid-row

行の番号の指定

grid-cell

グリッドセルの指定

grid-cell-stacking

グリッドセルの重なりの方向の指定

grid-template

グリッドセル構造の指定

grid-column-span

列の数の指定

4.Jqueryプラグインによるグリッドレイアウトの実装

　JQueryプラグインを使用しグリッドレイアウトを実装したサイト制作方法を説明します。グリッドレイアウトを利用することで簡単にコンテンツやカテゴリーごとに複数のボックスを使用するサイト制作を可能にします。
手順としては次の手順によって行います。

1.「JQuery」の入手

JQueryはjavascriptライブラリの一つであり読み込むことによって簡単なコーディングでブラウザ上でのスクリプト動作を実現するライブラリです。
JQueryを使用する方法として2つの方法があり、JQueryのサイトよりjsファイルを入手し適用させる方法とGoogleAPIを利用する方法があります。

JQueryサイト

http://jquery.com/

JQueryサイト

The Google Hosted Libraries

2.「JQueryMasonry」の入手

JQueryMasonryはJQueryプラグインでグリッドレイアウトを簡単に作成するためのJavascriptです。

JQueryMasonry

http://masonry.desandro.com/

3.JQueryとJQueryMansonryの埋め込み

JQueryとJQueryMansonryを呼び出す場合、次のように埋め込みます。

<script src="jquery/jquery-1.9.1.min.js></script> <script src="jquery/jquery.mansonry.min.js></script> $(function(){ 　var $container = $('#container'); 　　$container.masonry({ 　　// options 　　itemSelector : '.item', 　　columnWidth : 240 　}); });

GoogleAPIを利用する場合は次のソースコードをjquery-1.9.1.min.jsの代わりに埋め込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

JQueryMansonryの設定につきましてはJQuery Mansonry Introductionに記載があります。ご参考下さい。

JQuery Mansonryサイト

jQuery Masonry Introduction

4.CSSでボックスを設定

HTMLでボックス配置を行いCSSでボックス設定を行います。今回はGoogleAPIを埋め込みJQueryを使用する方法で行っており次のような記述を行っています。