ホームページ、ページのカスタマイズなど、お客様のEC事業をレベルアップいたします。CSS3CSS3レイアウトデザインCSS2.1での段組みレイアウトの表現は、floatプロパティで要素を浮動化して幅の値をあたえることで、後続の要素を水平方向、左右どちらかに並べていました。CSS3では段数を指定するなど、より直感的に表現できる機能が追加されており、機能を組み合わせて指定すれば、高度なレイアウトも簡単に構築することが可能になっています。・メディアクエリ上記について記載していこうと思います...。マルチカラムのレイアウト「マルチカラムレイアウト」では、段数の段の幅、間隔、罫線などを指定することができます。段数はcolumn-countプロパティ、段の幅はcolumn-widthプロパティで指定します。3;」と記述すると3段組みで表示されます。組方向が横の場合、左側のボックスから順に流し込まれます。段の間隔は、column-gapプロパティで指定します。30px;」と記述すると、段と段の間隔は30ピクセルになります。段と段の間に表示する罫線(区切り線)は、column-ruleプロパティで指定します。#000;」と記述すると、太さ1ピクセルの単線が黒で表示されます。マルチカラムレイアウトでは、ボックスの段の数をcolumn-countプロパティを使用して指定します。段の幅を指定するcolumn-widthプロパティと組み合わせて使うことが可能です。段の幅の指定フレキシブルボックスレイアウトマルチカラムレイアウトは、1つのボックスを分割して段組みを表現しますが、フレキシブルボックスレイアウトは、複数のボックスを水平方向に配置します(floatプロパティを使った段組みの手法に近い仕様)。box;」と指定すれば、ボックスが水平方向に並びます。ボックスの高さを自動的に揃えてくれるので、意図しない空白が発生してバランスが崩れることもありません。ボックスにdisplayプロパティを使用し、「flexbox」を指定することでブロック要素として扱われ、フレキシブルボックスが有効になります。デフォルトでは、水平方向(左から右)に並びますが、box-orientプロパティを使えば、垂直方向に並べることができます。grid;」を指定し、グリッドコンテナとして定義しておきます。続けて、行と列を指定し、分割された領域にコンテンツを配置していきます。列は、grid-columnsプロパティで定義します。25%」の場合、1列目の幅が15%、2列目の幅が60%、3列目が25%の幅になります。行は、grid-rowsプロパティで定義します。数値ではなく、「auto」を指定すると、容量内に合わせて自動的に値を算出してくれます。ボックスにdisplayプロパティを使用し、「grid」を指定すると、グリッドレイアウトが有効になります。列の横幅は、grid-columnsプロパティで数値もしくは比率(fr)を指定します。※frは割合の単位です。Module」は、CSS2.1まで不可能だった紙媒体の高度なページデザイン技術をブラウザ上で表現することができます。エディトリアルデザインの領域に近づくことで、電子書籍や電子雑誌などの基礎技術として普及する可能性もある事と思います。改ページ・改段の挿入位置(ボックスの内)の指定メディアクエリCSS2.1には、メディアタイプを指定することができる「@media」があり、対象とするメディアに専用のスタイルを適用することができます。メディアタイプには、csreen、print(ページ出力)、handheld(小さな画面のデバイス)、projection(プロジェクタなど)、speech(音声合成出力)など10種類あります。Queries」(メディアクエリ)が定義され、より詳細な条件でスタイルを適用できるようになりました。デバイスの向き、ブラウザの横幅や高さを条件として、専用のスタイルを指定することができます。メディアクエリを使用することで、デバイスごとにコンテンツを最適化しなくても、柔軟に対応させることが可能です。数値という事で今回は、CSS3レイアウトデザインをサンプルソースコードを交え記載してみました。私もflexboxプロパティやメディアクエリは、毎回といってイイほどよく使います。今回のようにまとめた概念だと、比較的難しく感じるかもしれませんが、実際に数回記載して頂き、理解を深めて頂ければと思います。それ以外のレイアウトなども使うことが慣れていると、とっても便利なプロパティだと思います。今回はここまで...。お仕事のご依頼は↓コチラより...、それではまた次回...。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。