日本語のレイアウト
html / CSS

グリッドレイアウト内に グリッドレイアウト を作成する

First

グリッドレイアウトの中央寄せ

一般的な中央寄せと幅

一般的に要素を左右中央揃えにしたいとき、使われるのが margin-left: auto と margin-right: auto である。最新のCSSを使うと、より簡単に要素を中央揃えにできる。それが 「margin-inline: auto;」 だ。

くわえて、width: stretch; を確認しよう。width: 100%; に代わるもので、例えば以下のように使う。

.field {
  width: stretch;
  margin-inline: 16px;
}

stretch キーワードは、すべてのブラウザで動作するが、ベンダープレフィックスが必要だ。

width: -webkit-fill-available;
width: -moz-available;
width: stretch;

グリッドでの方法は要素の数で異なる

さて、グリッドレイアウトに於いて中央寄せをする場合、アイテムの数により方法が異なる。方法は place-content: center; と place-items: center; の二つであるが、アイテムの数により使い分ける。

アイテムがひとつの場面

.center.first {
  display: grid;
  place-content: center;
godard

アイテムが複数の場面

.center.second {
  display: grid;
  place-content: center;
  place-items: center;
}
godard godard
Second

メディアクエリーを使わないレスポンシブ対応

多才なグリッドレイアウト

一般的には、subgrid まで辿り着けない輩も多いと思うが、minmax、clamp、subgrid などが相まって登場し、益々便利になってきたのがグリッドレイアウトである。この組み合わせはメディアクエリーを必要としない。以下にデモページを用意した。

関連： メディアクエリーを使わずとも振り分けられるデモ

「小気味いい」配置
モバイル画面
「小気味いい」配置
PC画面
「小気味いい」配置
タブレット画面

次のセクションからこの辺りの秘密を紐といていくとする。

Third

subgrid サブグリッド

subgrid

CSS Grid とは、行と列を使ったレイアウトのことだ。レスポンシブ対応でウインドウサイズが変わるごとに、各アイテムの各行の最大の高さに合わせることは、従来のCSSだけでは実現不可能だった。

新しい仕様であるCSS Grid Layout Level 2では、行列の入れ子が可能になった。それが「subgrid」だ。親行列の中に子行列を入れたとき、子行列を親行列の行に揃えることが可能になる。

サブグリッド
子行列を親行列の行に揃えることが可能になる

関連ページ：subgrid

画像とテキスト

レスポンシブ対応で、画像とテキストのポジションに手こずったことがあると思う。subgrid を使えば、その辺りが少しは是正されるのではないか、と期待を寄せている。

Fourth

minmax

レスポンシブなグリッドレイアウトの中身

HTMLタグの viewport と呼ばれるメタタグを表示する。例えば、
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

repeat() 関数と組み合わせて、画面幅に応じてアイテムを自動的に配置するグリッドレイアウトで、各列の幅を柔軟に調整する際に便利だ。例えば、grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); と記述すると、画面幅が狭い場合は300px未満にならないように、画面幅が広い場合は利用可能なスペースを均等に分割するように列幅が調整される。

関連ページ：minmax を使用したデモ

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

minmax(300px, 1fr): はトラックサイズを指定する。1fr は、トラックの最大幅を、グリッドコンテナの利用可能な幅から他のトラックの幅を引いた残りの幅の1単位として指定する。frは、利用可能なスペースを分割するための柔軟な単位だ。この指定により、グリッドコンテナの幅に合わせて、300px以上の幅を持つトラックが可能な限り多く配置され、余白がある場合はそれも考慮してトラックの幅が調整される。トラックの幅は、1frの割合で、コンテナの残りの幅を均等に分割する。

この指定においてメディアクエリーを用いてレスポンシブ対応を定義する必要がない、というのは面白い。

これは、ビューポートの幅により、以下の値を指定する。

  • 320px(viewport) : 最小値に300px を定義しているので、トラックの幅がこれより小さくなることはない。つまり 320px のビューポートでは、一列にレイアウトされる。
  • 1000px(viewport) : 最小値に300px を定義しているので、1000px のビューポートには三列が1frの割合で、コンテナの残りの幅を均等に分割する。
  • 1280px(viewport) : 最小値に300px を定義しているので、1280px のビューポートには四列が1frの割合で、コンテナの残りの幅を均等に分割する。

CSS プロパティ

minmax() 関数は次の中でのみ使用することができる。

  • grid-template-columns
  • grid-template-rows
  • grid-auto-columns
  • grid-auto-rows
Fifth

余白のレスポンシブに clamp を使う

CSSの、min(), max(), clamp()は複数の値を比較し、使用された関数に基づいてそれらの1つを表す。余白に関わる margin 、padding 、gap などの余白をレスポンシブ対応にすることができる。まずは、 gap の例を見てみよう。

item 間の gap をレスポンシブへ対応。

gap: clamp(16px, 4vw, 32px)

clamp() 関数は、最小値、推奨値、最大値の3つの引数を取り、要素のサイズに応じて適切な値を動的に計算する。これにより、画面サイズが変わっても要素間の間隔が一定の範囲内に収まるように調整できる。clamp(16px, 4vw, 32px) は、以下の3つの値を指定している。

  • MIN：最小値 = 16px
  • VAL：推奨値 = 4vw
    • 320px(viewport) : 320px * 0.04 = 12.8px
    • 400px(viewport) : 400px * 0.04 = 16px
    • 800px(viewport) : 800px * 0.04 = 32px
    • 1000px(viewport) : 1000px * 0.04 = 40px
  • MAX：最大値 = 32px

もうひとつ、テキストのフォントサイズを 20px から 40px までレスポンシブ対応で可変させてみよう。最小値と最大値は推奨値を試してみて、調整を加えれば良いだろう。

.text {
    font-size:clamp(20px, 4vw, 40px) ;
  }
  • MIN：最小値 = 20px
  • VAL：推奨値 = 4vw
    • 320px(viewport) : 320px * 0.04 = 12.8px
    • 400px(viewport) : 400px * 0.04 = 16px
    • 500px(viewport) : 500px * 0.04 = 20px
    • 800px(viewport) : 800px * 0.04 = 32px
    • 1000px(viewport) : 1000px * 0.04 = 40px
    • 1400px(viewport) : 1400px * 0.04 = 56px
  • MAX：最大値 = 40px

最大値を設定するにはmin()を使用する

要素の最大幅を600pxにしたい場合は、従来下記のように記述した。

/*　従来の書き方 */
.box {
　width: 50vw;
　max-width: 600px;
}

従来の書き方を「min()」を使って、下記のように記述出来る。

.box {
  width: min(50vw, 600px);
}

最小値を設定するにはmax()を使用する

/*　いままでの書き方 */
.box {
　width: 50vw;
　min-width: 400px;
}

従来の書き方を「max()」を使って、下記のように記述出来る。

.box {
  width: max(50vw, 400px);
}
Sixth

レビュー

画像とテキストのサイズと配置

レスポンシブグリッド
これからも「グリッドレイアウト」が強力な武器になる

今日の CSS Grid レイアウトは、2次元のレイアウトを柔軟に構築できるレスポンシブデザインの実現に不可欠な存在となってきたようだ。

ここまでのレビュー（おさらい）のために以下サンプルを起こしてみた。

CSS (Cascading Style Sheets)

CSS の C は "Cascading" （カスケード）の略である。スタイルが連鎖していく方式を意味する。サイトの複雑さが増すにつれ、スタイルシートの数も増える。そのため、スタイルシートのソース順序はより重要になり、より複雑になる。 カスケードレイヤーは、このようなコードベース全体にわたるスタイルシートの管理を簡素化する。

カスケードレイヤーは、明示的な詳細度のコンテナであり、最終的に適用される CSS 宣言をよりシンプルかつ効果的に制御できるため、ウェブ開発者は詳細度と戦うことなく CSS のセクションに優先順位を付けることができる。

競合から脱却するために !important フラグを設定したもので解決することが多い CSS の優先順位であるが、これは詳細度の争いを通常の宣言から重要な宣言に移されるだけである。

margin-inline,margin-block というメモ

writing-modeプロパティで縦書きを指定した場合、margin-inlineは上下に、margin-blockは左右に余白が設定される。