フレックスボックスとグリッドのデザイナー向けガイド

これらの変形レイアウトツールについてデザイナーが知っておくべきこと。

CSSは1996年の導入以来長い道のりを歩んできましたが、レイアウトに使用できるツールに大きな変化はありません。テーブルレイアウトは非常に硬く、フロートベースのレイアウトは基本的にハックであり、ポジショニングベースのレイアウトは適応性がなく、効率的に大きな複雑さを処理することはできませんでした。誤解しないでください。これらの方法は私たちを本当に遠いものにしましたが、複雑なレイアウトを目的としたものではありません。

これらの古いレイアウト方法の欠点は、レスポンシブWebデザインでさらに明らかになりました。レスポンシブWebデザインでは、Webの流動性を受け入れることが基本です。

フレックスボックスとグリッドにより、より効率的で、以前のレイアウト方法で必要だったハッキン​​グのないレイアウト専用のツールがついにできました。古い問題の新たな可能性を解き放ち、これまで不可能であったことを可能にし、レスポンシブWebデザインで直面する実際の問題を解決します。

フレックスボックス

Flexbox(別名CSSフレキシブルボックス)は、他のCSSメソッドでは生成できない整列制御を可能にする新しいレイアウトメソッドです。 「マイクロレイアウト」に優れています。コンテナ内のアイテム間でスペースを整列、順序付け、分散したり、要素の幅や高さを変更して利用可能なスペースを最適に埋めたりする機能です。

改善されたラッピング

レスポンシブWebデザインでは、ビューポートの幅がサイズを変更すると、利用可能な幅が異なります。これは、特にコンテンツが設計よりも長い場合、またはコンテンツのコンテナが狭すぎる場合に、意図しないコンテンツのラッピングを引き起こす可能性があります。私たちはおそらく以前に見たことがあるでしょう:デザインは「理想的な」コンテンツの長さを説明しますが、実装されて実際のコンテンツが追加されるとすぐに、十分なスペースがないか、その中から抜けてコンテンツが次の行に折り返されます容器。どちらも理想的ではなく、レイアウトが壊れる可能性があります。

問題は、利用可能なスペースが常に長さが異なるコンテンツを収容するのに十分な大きさであることを確信していないことです。従来、CSSメディアクエリを使用して特定のブレークポイントでレイアウトを調整し、コンテンツラッピングの問題を軽減していました。ただし、メディアクエリでは、コンテンツ自体の長さは考慮されません。明示的な幅または高さに応答します。これにより、多くの場合、明示的なブレークポイントで特定のコンテンツを制御するための過剰なメディアクエリが発生します。

Flexboxによる改善されたラッピングの例

Flexboxはこの問題を解決するために利用可能なスペースを活用し、そうでない場合はコンテンツをラップできるようにします。この自動調整動作は便利なだけでなく、スタイル設定を手動で調整するためにブレークポイントに依存する必要がないため、保守性が向上します。上記の例は、この動作を示しています。スペースが十分にある場合はタイトルの隣に位置ラベルを表示し、スペースが十分にない場合はタイトルの下の左に位置ラベルを揃えます。

フローティングのような従来の方法では、位置ラベルは小さなビューポート上で右揃えのままになり、理想的ではありませんでした。これを修正するには、特定のブレークポイントでラベルを左にフローティングします。このアプローチの問題は、コンテンツのスタイルを変更するためにブレークポイントに依存していることです。

改善された間隔と配置

CSSの間隔と位置合わせに関しては、デフォルトの動作ではないことをすべて達成するために、賢く取得する必要がありました。 CSSで些細なように見える効果でさえ、垂直方向の配置やアイテム間のスペースの均等な分割など、回避策またはハッキングに頼らなければなりません。いくつかのことを実現することはまったく不可能です。

Flexboxは、幅または高さが不明な領域内の不明な数のアイテム間でスペースを分散できるようにすることでこれを解決し、X軸またはY軸にアイテムを配置します。 SketchやIllustratorなどのデザインツールが間隔と配置を制御する方法と同様に機能し、Webで期待される制御を可能にします。

Flexboxで改善されたスペース分布の例

このコントロールの優れた例を上に見ることができます。ナビゲーションアイテムは均等に分散され、垂直方向に中央に配置され、最初と最後のアイテムはナビゲーションコンテナの端に揃えられます。これは、アイテムにインラインブロックを適用したり、テーブルレイアウトに依存するなどの従来の方法では不可能でした。

ソース順序

ソースの順序とは、要素がHTMLで表示される場所に基づいてページに表示される順序のことです。デフォルトでは、要素はデフォルトで上から下、左から右に表示されます。幅は表示プロパティによって決まります。

デザインがさまざまなビューポート幅にどのように適応するかを考えるときは、ドキュメントの自然なソースの順序が参考になりますが、アイテムを再配置するためにドキュメントを変更すると役立つ場合があります。フレックスボックスの前にこれを行う唯一の方法は、要素を非表示にして別のものを表示することで、HTMLが重複するか、コンテンツのサイズが異なる場合に常に機能しない絶対配置に依存します。フレックスボックスを使用すると、基になるHTML構造を変更することなく、フレックスアイテムの順序を簡単に変更できます。

Flexboxを使用したアイテムの注文の例

上記の例は、Flexboxでの順序付けを示しています。フッターの左側にヘッダーを表示するロゴを表示します。小さなビューポートでは、ロゴの前に場所を表示します。このコンテキストでは場所がより重要であるため、この並べ替えは理にかなっています。

グリッドレイアウト

CSSグリッドレイアウトは、Web用に特別に作成された2次元レイアウトシステムです。ページを領域に分割する機能を提供します。各領域は、サイズ、位置、およびレイヤーの観点からさらに定義でき、非常に強力なネイティブフレームワークになります。

目的に適う

CSSが目的のレイアウトツールに真に適合したことはなかったため、グリッドを作業に適用する方法について非常に独創的になる必要がありました。グリッドフレームワークは、このニーズを満たすために登場しましたが、独自の問題を導入することなく実現しました。最も人気のあるグリッドフレームワークの多くは、マークアップでレイアウト定義を必要とします。これにより、コードが肥大化し、保守性の問題が発生し、ドキュメント構造とプレゼンテーションの分離が曖昧になります。

グリッドを使用すると、グリッドフレームワークが不要になります。これは、CSSに直接組み込まれたネイティブフレームワークです。これにより、Webのデフォルトの流動性を受け入れながら、CSSでレイアウトを直感的に定義できます。この新しいレイアウトツールの機能は無限大であり、Javascriptが登場するまでは不可能だったレイアウトを実現できます。

グリッドレイアウトの例

次世代のWebレイアウト

レイアウトに関して言えば、私たちはかなり長い間わだかまりに陥っていました。確立されたパターンとCSSの以前のレイアウトツールの制限により、過去のレイアウトの均一性の道筋をたどることができました。ヘッダー、メインコンテンツ、サイドバー、フッターなどを見つけるためにWebに行く必要はありません。

レスポンシブWebデザインの登場により、ページレイアウトの新しいアイデアが生まれました。サイドバーを捨て、デザインを簡素化し、コンテンツに集中するという、いくつかの良いパターンが現れ始めています。しかし、私たちは、「すべてのWebサイトが同じように見える」という感嘆の声を聞いているほど、至る所に見られるようになったパターンも出現しています。

グリッドレイアウトを使用すると、これまでのレイアウトルートを終了し、次世代のレイアウトを構築するために必要なツールを提供できます。他のレスポンシブWebサイトで見られる一般的なデザインパターンにコンテンツを強制するのではなく、コンテンツを最終的に構築できます。

注意の言葉

すべてのブラウザがフレックスボックスおよびグリッド機能をサポートしているわけではないことに注意することが重要です。各プロジェクトの対象ユーザーを考慮し、大部分のユーザーがこれらのより高度な機能の恩恵を受けるかどうかを判断し、サポートされていないブラウザーに適切なフォールバックを提供する必要があります。従来のブラウザのユーザーにUIの簡易バージョンを提供し、新しいブラウザーのユーザー向けにUIを強化することは完全に受け入れられます。

もっとあります。もっとたくさん。

フレックスボックスとグリッドでできることのほんの一部に過ぎません。幸いなことに、これらの新しいレイアウトツールの機能に触れる多くの優れたドキュメントが利用可能です。私のお気に入りのいくつかを次に示します。

フレックスボックス

グリッド

Web用に構築してきた人は誰でも、CSSのレイアウトに関してさまざまな制限を痛感しています。多くの場合、開発で期待どおりに動作するように設計を妥協したり、さらに悪いことに、必要な動作を実装するためにJavascriptに依存したりする必要がありました。

フレックスボックスとグリッドレイアウトの登場は、Web上のレイアウトの新しい時代を示しています。過去の習慣、欠点、ハッキングに制限されないように、レイアウトに関しては新しい考え方を採用する必要があります。これらの新しいツールを採用して、Web上のレイアウトで何が可能かを探りましょう。