カード型レイアウト ① - 全体のレイアウト -

Labo 253&254 で、複数のカードをタイル上に並べる「カード型レイアウト」を作成する

作成には CSS のグリッドレイアウト機能を使う

グリッドレイアウトでカードをタイル上に並べる

写真とテキスト情報がまとまった 6つのカードを、PC 向けレイアウトでは 2行3列、モバイル向けレイアウトでは 3行2列 のタイル上に並べる

カードをタイル上に並べる「カード型レイアウト」は近年の Web デザインで良く用いられるものとなっている

このレイアウトは CSS に機能がこれまで無く、裏技的なテクニックとなっていたが、グリッドレイアウト機能で実現出来るようになった

グリッドレイアウトは、先に大枠のレイアウトを決めてから、あとから中身を流し込むタイプのレイアウト手法

先に空のボックスを作り、そこに必要なコンテンツを追加していくという順序で作業することになる

グリッドレイアウト

グリッドレイアウトは、ある要素の表示領域をグリッド(マス目)上に区切り、そのマス目に沿って子要素のボックスを配置する

ある要素に display: grid; を提供して、ボックスの表示モードをグリッドにすると、その要素のボックスに見えないガイド線(グリッド線)が引かれる

グリッド線によって分割されたそれぞれの領域をグリッドという

グリッドには列グリッド(column)と行グリッド(row)がある

子要素はこのグリッドに祖手配置される

最も基本的なレイアウトは、列グリッド、行グリッドで作られたマス目のひとつに、ひとつの子要素が配置される

隣接する子要素同士がくっつかないようギャップ(空きスペース)を作る事ができる

設定によっては、グリッドを跨ぐ子要素を作る事もできる

グリッドレイアウトを使うには、最低限次の 3つの基本設定が CSS で必要となる

親要素の標示モードを「グリッド」に切り替える

グリッドレイアウトを使ってレイアウトをしたい親要素に display: grid; を適用して、標示モードを切り替える

書式: 表示モードを「グリッド」に切り替える

display: grid;

直接の子要素はすべて、グリッドレイアウトモードで配置されるようになる

列グリッドテンプレートを作成する

グリッドテンプレートは、表示領域を何分割するか、ひとつのマス目をどんな幅や高さにするかを決める

横方向のグリッド数と幅を設定する列グリッド

縦方向のグリッド数と高さを設定する行グリッド

2つのテンプレートを設定できる

子要素の数が多く 1列に収まりきらない場合は、改行されて自動的に 2行目が作られるので、多くの場合行グリッドテンプレートは設定しない

書式: n列の列グリッドテンプレートを作る

grid-template-columns: 第1列の幅 第2列の幅 ... 第n列の幅;

列の幅の部分は、列の幅を固定幅にしたい場合「数値+px」、伸縮にするなら「単位fr」を使う

fr は 単位の合計が親要素の幅となる

行グリッドテンプレートは作成しないが、各要素の高さだけは設定する

書式: グリッドの高さを設定する

grid-auto-rows: minmax(最小高、最大高);

sx最小高、最大高は「数値+px」で指定する

コンテンツが収まる高さにしたいときは auto にする

列ギャップ、行ギャップを設定する

各要素がくっつかないようにギャップを設定する

列方向、橫に隣り合うボックス同士のギャップは column-gap プロパティ

行方向、縦に隣り合うボックス同士のギャップは row-gap プロパティ

値は 数値+px で指定する

書式: 列グリッドの間にすき間を作る

column-gap: 空きスペースの幅;

書式: 行グリッドの間にすき間を作る

row-gap: 空きスペースの高さ

テンプレートファイル

home.html
style.css