[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある

Post on:2017年11月16日

FlexboxとCSS Gridは一緒に使用することでパワーを発揮する

CSS Gridはすべてのブラウザにサポートされるまでに6年以上を要し、その仕様は何度も討論されてきました。2011年にMicrosoftが、IE10でプレフィックスサポートを発表したことで懐疑的なものとなり、W3Cからの情報が不足していたため、Web制作者達は新しいレイアウトシステムが必要かどうか疑問に思っていました。なぜなら、わたし達はすでにfloat、table、そしてFlexboxを使用していたからです。

しかし、Rachel AndrewやJen SimmonsなどのデベロッパーとCSSワーキンググループのメンバーの努力のおかげで、CSS Gridは成長しました。

そして2017年3月、CSS Gridは主要なすべてのブラウザでサポートされました。仕様を取り巻く神話と噂もいくつかあります。この記事の目的はこれらの神話に取り組むことと、Aerolabで使用している「Frids-layout」という新しいテクニックを使ってWebサイトを制作することです。

「CSS GridはFlexboxを絶滅させるために登場した」、あるいはCSS Gridをブラウザがサポートした今「FlexboxはCSS Gridのフォールバック」といった考え方は有害であると証明できます。私はそういった固定概念を避けることができると希望しています。

この記事でFlexboxとCSS Gridがお互いに対立するのではなく、一緒に使用することで引き出される真のパワーを理解するために、それらの神話を見てみましょう。記事の最後には、すぐに利用できるHTMLとCSSのひな形がダウンロードできるので、今日からCSS Gridで作業を開始できます。

神話は崩された

2010年に始まった「CSS GridとFlexboxの戦い」で、以前に私が言及した2つは本質を理解するのに役立ちます。

CSS GridはFlexboxを絶滅させるために登場した: いいえ、Flexboxの絶滅には繋がりません。絶滅するのはtableレイアウトです。
似た何かが登場すると、人々は競わせる傾向があります。比較することは技術の向上のためになりますが、1つに絞る必要はありません。

FlexboxをCSS Gridは同じ時期に開発されましたが、異なる目標を念頭に置いて開発されました。もしこの記事を読んだ後でも信じられないようであれば、CSS GridとFlexboxのW3C Draftが同じ編集者であることを記憶しておいてください。この2つは一緒に働き、お互いに競争するものではありません。

FlexboxはCSS Gridのフォールバック: Flexboxのゴールは、CSS Gridのゴールとは異なります。
そのため、IEでCSS Gridが十分にサポートされていないのを理由に、フォールバックとしてFlexboxを必ず使用する必要はありません。

Frids-layoutの機能

まずは、FlexboxとCSS Gridで異なるケースとお互いを補完するケースを見てましょう。

1次元レイアウト（One-dimensional layouts）

1次元レイアウトとは、コンテンツを水平軸（x軸）と垂直軸（y軸）のいずれかに沿って配置するもので、Flexboxが適しています。コンポーネントに限定されません。
2次元レイアウト（Two-dimensional layouts）

コンテンツをx軸とy軸の両方に沿って配置する必要がある場合は、CSS Gridです！ページレイアウトや直線的ではない複雑なコンポーネントに最適です。

もちろん、例外はあります。しかし、複雑なレイアウトにはCSS Gridを使い、一行のレイアウトには（flex-wrapで改行を適用するとさらに）Flexboxを使うと、その方法が快適であることが分かるでしょう。

2017年の現時点では、Web制作者はCSS GridよりもFlexboxをよく知っているように思います。CSS Gridをまだ使用したことがないのであれば、Full Stack Fest Barcelonaをチェックすることを勧めます。このWebサイトのレイアウトは、CSS Gridを使って印象的な仕事をしています。

Full Stack Fest Barcelona

FlexboxとCSS Gridのゴールは異なりますが、結局両者はレイアウトツールなので、いくつかのプロパティを共有しています。共有プロパティは新しいCSS Box Alignment仕様の一部で、全世界のデベロッパーが長い間求めていたものです。

CSSによるボックスの整列の仕様

「CSS Box Alignment（CSSによるボックスの整列）」この新しい仕様には、FlexboxまたはCSS Gridでブロック要素に適用できる内容の分布と自己整列が含まれています。

Flexコンテナ内に要素を揃える。

Flexコンテナ内に要素を配置する。

Gridコンテナ内に要素を揃える。

上記のデモを詳しく見てみましょう。

display:grid;を定義し、repeat()を使用して、3カラムのグリッドを作成しています。次に、align-itemsとjustify-itemsプロパティを使用してx軸とy軸のセルを整列させ、指定したセルをalign-selfで高さを伸ばし、justify-selfで整列させています。

これらのプロパティはFlexboxにも存在するので、よく知っていると思います。違いは、「flex-start」または「flex-end」と指定するのではなく、「start」または「end」と指定するだけです。

Gridコンテナ内に要素を配置する。

FlexboxとCSS Gridが近い将来に共有するもう1つのプロパティがあります。grid-gapです。これはデベロッパーの間で非常に求められていた機能で、Flex要素間の距離を指定することができます。grid-row-gapとgrid-column-gapのプロパティは、それぞれrow-gapとcolumn-gapに変更されます。
変更されても心配しないでください。コードは現状のままでも機能し続けるでしょう。

Flex要素間のギャップ

FlexboxとCSS Gridを一緒に

CSS Gridでグリッドを作成したら、セルにコンテンツを追加します。画像やテキストを適切な場所に配置する最も良い方法は、Flexboxを使用することです。

レスポンシブを採用する

floatや他の旧式のレイアウトシステムとは異なり、FlexboxとCSS Gridはマルチデバイスの時代に作られました。そのため、旧式では欠けているレスポンシブと流動性が取り入れられています。FlexboxとCSS Gridにはユーザーのスクリーンに適応させる方法が複数あることに気がつくでしょう。

可変するFlexboxのレイアウト

Flexboxはデフォルトで、レスポンシブに対応しています。display: flex; を要素に適用すると、その要素はレスポンシブ対応になります。コンテンツの量によっては要素に最小幅を適用することを望むかもしれません。その時はflex-basisとflex-wrapを使用します。

可変するCSS Gridのレイアウト

CSS Gridで実装したレイアウトも常にレスポンシブ対応です。そのコンポーネントが最小幅を持つことを確認するために、minmax関数と新しいfr単位を使用できます。fr単位は柔軟なグリッドを作成するのに役立つように設計されており、1frはグリッドコンテナ内の利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。セル間のギャップも考慮されているため、それぞれのセルで正しい幅を計算します。

小さなデバイスでレイアウトを変更したい場合は、いつでもメディアクエリを利用できます。

実装のための準備

現在、CSS GridとFlexboxは両方とも主要なすべてのブラウザでサポートされているため、さまざまなプロジェクトで使用できます。Microsoft Edge 15では古い構文のCSS Gridがサポートされていますが、10月17日にリリースされたEdge 16では修正されました。

すべてのブラウザを完全にサポートしたい場合は、CSS Gridをサポートしていないブラウザや古い構文を持つブラウザに代替レイアウトを提供するために、@supportsを使用してフォールバックを提供することをお勧めします。

.grid-parent{
  /* Fallback layout */
}
 
@supports (display: grid) {
  .grid-parent{
    /* Use grids */
  }
}

.grid-parent{

/* Fallback layout */

}

@supports (display: grid) {

.grid-parent{

/* Use grids */

}

最後に、CSS GridとFlexboxのバグをチェックしておきましょう。

MagicCubeエクスペリエンス

MagicCubeは新しいアイデンティティを構築し、彼らの新しいWebサイトを開発するのを手助けするためにAerolabに連絡しました。

ニュースページのUXとUIの提案が終わると、これがCSS Gridで実装される素晴らしいデザインであることがすぐに分かりました。新しい技術を使った複雑なレイアウトで、サポートされていないブラウザでは@supportsを使用して代替レイアウトを提供しています。CSS Gridは必要な変更を迅速に実行できるカスタマイズ性と柔軟性を提供します。

訪れる人全員に素晴らしいブラウジングを体験してもらうことをわたし達は望みました。そのために、Opera Browser, Samsung Internet, UC Browserには、@supportsを使用して旧式のテクニックでレイアウトを見せています。

最終的には、レスポンシブ対応のアクセシブルなニュースページとして、サポートブラウザには複雑なレイアウトを、非サポートブラウザにはシンプルなデザインでフォールバックしました。CSS Gridではデザインパターンをすばやく効果的に変更できます。

Flexboxと一緒に、CSS Gridを使用する

心配する必要はありません！今日からCSS Gridを使い始めてください。「Flexbox vs CSS Grid」の根拠のない噂は、Webサイトで新しい魅力的なレイアウトを実装する妨げになるべきではありません。容易なカスタマイズ、優れたブラウザのサポートがこのテクニックを歓迎します。

どこから始めてよいのか分からない人は、下記からわたし達が作成したテンプレートをダウンロードしてください！

リソース

CSS Grdiを学ぶことができるたくさんのリソースがあります。

紙

グリッド構造について考え始める最善の方法は、紙に描くことです。グリッドに使用する列、行、ギャップをあなたの目で見ることができます。紙に書くのは時間がかかりませんし、グリッド全体をよりよく理解することができます。
Developer tools

Firefox Developer Toolsには、現在のグリッドの列、行、およびスペースの視覚化を切り替えるCSS Gridとの統合機能が組み込まれています。
Chrome 62で、同様のツールが実装されました（Chrome 62の新機能）。
読んで、学んで、実践する

CSS Gridをまだ試していない場合は、以下のリンクを見てください。
- Grid Garden: FlexboxFroggyと同じように、CSS Gridをゲームで楽しみながら学べます。
- Grid By Example: CSS Gridを基礎から教えてくれるでしょう。また、役に立つ多くのパターンも用意されています。
- A Complete Guide to Grid: CSS-Tricksの記事です。ブックマークしておくとよいでしょう。
日本語のリソース

当ブログで、参考になる記事をリストしました。