CSS3レイアウトデザイン

CSS3レイアウトデザイン

CSS2.1での段組みレイアウトの表現は、floatプロパティで要素を浮動化して幅の値をあたえることで、後続の要素を水平方向、左右どちらかに並べていました。CSS3では段数を指定するなど、より直感的に表現できる機能が追加されており、機能を組み合わせて指定すれば、高度なレイアウトも簡単に構築することが可能になっています。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

マルチカラムのレイアウト

「マルチカラムレイアウト」では、段数の段の幅、間隔、罫線などを指定することができます。段数はcolumn-countプロパティ、段の幅はcolumn-widthプロパティで指定します。たとえば、「column-count: 3;」と記述すると3段組みで表示されます。組方向が横の場合、左側のボックスから順に流し込まれます。

段の間隔は、column-gapプロパティで指定します。「column-gap 30px;」と記述すると、段と段の間隔は30ピクセルになります。
段と段の間に表示する罫線（区切り線）は、column-ruleプロパティで指定します。「column-rule: 1px solid #000;」と記述すると、太さ1ピクセルの単線が黒で表示されます。

マルチカラムレイアウトでは、ボックスの段の数をcolumn-countプロパティを使用して指定します。段の幅を指定するcolumn-widthプロパティと組み合わせて使うことが可能です。

CSS Multi-column Layout Moduleのプロパティ

マルチカラムレイアウトの指定

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

マルチカラムレイアウトは、1つのボックスを分割して段組みを表現しますが、フレキシブルボックスレイアウトは、複数のボックスを水平方向に配置します（floatプロパティを使った段組みの手法に近い仕様）。

複数のボックスを含有する親ボックスに対して、「display: box;」と指定すれば、ボックスが水平方向に並びます。ボックスの高さを自動的に揃えてくれるので、意図しない空白が発生してバランスが崩れることもありません。

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

CSS Flexble Box Layout Moduleのプロパティ

フレキシブルボックスレイアウトの指定

グリッドレイアウト

「グリッドレイアウト」では、適用したい領域に対して「display: grid;」を指定し、グリッドコンテナとして定義しておきます。続けて、行と列を指定し、分割された領域にコンテンツを配置していきます。

列は、grid-columnsプロパティで定義します。「grid-columns: 15% 60% 25%」の場合、1列目の幅が15%、2列目の幅が60%、3列目が25%の幅になります。行は、grid-rowsプロパティで定義します。数値ではなく、「auto」を指定すると、容量内に合わせて自動的に値を算出してくれます。

ボックスにdisplayプロパティを使用し、「grid」を指定すると、グリッドレイアウトが有効になります。列の横幅は、grid-columnsプロパティで数値もしくは比率（fr）を指定します。※frは割合の単位です。

Grid Layoutのプロパティ

グリッドレイアウトの指定

その他のレイアウト仕様

「CSS Regions Module Level 3」や「CSS Template Layout Module」は、CSS2.1まで不可能だった紙媒体の高度なページデザイン技術をブラウザ上で表現することができます。エディトリアルデザインの領域に近づくことで、電子書籍や電子雑誌などの基礎技術として普及する可能性もある事と思います。

CSS Regions Module Level 3のプロパティ

高度な流し込みレイアウトの指定

CSS Template Layout Moduleのプロパティ

高度なポジショニングレイアウトの指定

メディアクエリ

CSS2.1には、メディアタイプを指定することができる「@media」があり、対象とするメディアに専用のスタイルを適用することができます。
メディアタイプには、csreen、print（ページ出力）、handheld（小さな画面のデバイス）、projection（プロジェクタなど）、speech（音声合成出力）など10種類あります。

CSS3では「Media Queries」（メディアクエリ）が定義され、より詳細な条件でスタイルを適用できるようになりました。デバイスのスクリーンサイズや解像度、縦横比、色数、デバイスの向き、ブラウザの横幅や高さを条件として、専用のスタイルを指定することができます。メディアクエリを使用することで、デバイスごとにコンテンツを最適化しなくても、柔軟に対応させることが可能です。

メディアクエリの基本的な記述サンプル

メディア特性と条件を指定する記述サンプル

デバイスの方向でスタイルを適用する記述サンプル

Media Queries参照リンク

メディアクエリの特性、条件、値に関する一覧

という事で今回は、CSS3レイアウトデザインをサンプルソースコードを交え記載してみました。

私もflexboxプロパティやメディアクエリは、毎回といってイイほどよく使います。今回のようにまとめた概念だと、比較的難しく感じるかもしれませんが、実際に数回記載して頂き、理解を深めて頂ければと思います。また、それ以外のレイアウトなども使うことが慣れていると、とっても便利なプロパティだと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。