CSS グリッド レイアウトでシンプルなレイアウトを作成する方法

印刷物のデザインに手​​を出したことがあるなら、グリッド レイアウトのアイデアがどこから生まれたかを知っているでしょう。 グリッドは、ページ上にデザイン要素を配置するために使用される正確な測定ツールです。 このアイデアは、コンテンツを整理して統一するために Web でよく使用され、ユーザーの視聴体験を向上させます。

Web デザインの実践が始まったばかりの頃、レイアウトは非常にシンプルでした。 ヘッダー、サイドバー、コンテンツ領域、およびフッター。 現在、Web が進化するにつれて、レイアウトはより複雑になり、Web デザイナーとして取り組まなければならないことが増えています。 多くの場合、多数のコンテンツ領域、レスポンシブ デザイン、複数ページ レイアウト テンプレートのデザインなどが必要になります。 また、デザインを実装して正しく表示するには、フロートと配置が必要です。 フロートは単純に聞こえますが、扱いが難しい場合があります。

幸いなことに、グリッドを使用すると、Web コンテンツを簡単に設計および表示できます。 CSS グリッド レイアウトが急速に勢いを増しているため、今はデザイナーにとって素晴らしい時期です。 グリッドは近年の Web デザインの新しいアイデアのように感じるかもしれませんが、信じられないかもしれませんが、CSS グリッド レイアウトは長年にわたって開発されてきました。 それらのブラウザのサポートは非​​常に迅速に行われたため、デザイナーが長年対処しなければならなかったポジショニングに関するフラストレーションの一部を緩和するのに役立ちます.

ついにグリッドに侵入し、新しいデザインの可能性を探る時が来ました!

CSS グリッドのサポート

サポートする必要があるブラウザによって異なりますが、CSS グリッドを使用する場合、「フラグ モード」について心配する必要がない可能性は十分にあります。 Can I Use のドキュメントにアクセスして再確認することはいつでもできますが、CSS グリッドのサポートが劇的に増加し、多くのデザイナーがプロダクションで使用できるようになりました。

CSS グリッド レイアウトの基本

CSS を利用することで、グリッド レイアウトは Web ページのコンテンツ領域を定義するのに役立ちます。 CSS グリッド レイアウト仕様で定義された、比較的新しい一連のプロパティがあります。 これは、この新しいレイアウト設計方法について詳しく学ぶ際に参照できる優れたリソースです。 CSS グリッド レイアウトは、物事を簡素化し、レイアウトの作成を容易にするのに役立ちます。 グリッドは、測定値を定義できる構造と考えてください。

グリッドのパーツ

ライン

この場合、5 本の縦線と 3 本の横線があります。 行には 1 から始まる番号が付けられます。 この例では、縦線は左から右に示されていますが、これは書く方向に依存します。 これは左から右に読むので、右から左だと逆になります。 行には名前を付けることができ (オプション)、CSS で行を参照するのに役立ちます。

トラック

トラックは、2 本の平行線の間のスペースです。 図では、4 つの垂直トラックと 2 つの水平トラックがあります。 ラインとトラックの間には、大きな二重の努力があります。 行は、コンテンツの開始点と終了点を参照する優れた方法です。 トラックは、コンテンツが実際に移動する場所です。

細胞

セルは、水平トラックと垂直トラックが交わる場所にあります。 図には 8 つのセルがあります。

エリア

領域を指定するときにセルが機能します。 領域は、多数のセルにまたがることができる長方形の形状です。 ラインと同様に、領域にはオプションで名前を付けることができます。 図には、「A」、「B」、「C」というラベルがいくつか含まれています。

グリッド レイアウトの作成

レイアウトを開始する前に、スケッチを作成しておくと役立ちます。 古き良き方眼紙に代わるものはありません。

グリッドの HTML

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

容器はとても重要です。 コンテナー内には、Web サイトのさまざまなコンテンツ ブロックがあります。 コンテナ内のグリッド アイテムの順序は重要ではありません。 次に、CSS を使用してレイアウトに配置します。

CSS スタイル

HTML マークアップが完了したら、最も重要な宣言を CSS で行います。 コンテナー内で、 display:gridまたはdisplay:inline-gridを適用する必要があります。 ブロックレベルのグリッドが必要な場合は、 display:grid使用します。 インライン レベルのグリッドにはdisplay:inline-gridを使用します。

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

grid-template-columnsおよびgrid-template-rowsプロパティは、行と列の幅を指定するために使用されます。 grid-template-columns 1fr および 3fr として設定されています。 これは、分数単位でグリッドが形成されている場所です。 これらの値を使用すると、2 つの列があり、それらの幅が等しくないことが明らかです。 3fr に設定された列は、他の列の 3 倍の幅です。 これは、サイドバーがコンテンツ領域よりも狭く見える理由を説明しています.

レスポンシブなカスタマイズを行うこともできますが、分数単位を使用することは最初のステップとしては最適です。 領域間の間隔はgrid-column-gampとgrid-row-gapで制御できます。

かなりきついように見えますが、もう少し仕様を追加すれば形になります。

この例ではヘッダーの配置から始めますが、要素は最適な順序で配置できます。 フッターから始めたい場合は、それも機能します。

ヘッダーから始めましょう。ヘッダーは列 1 から列 4 まで、行 1 から行 2 まで続きます。CSS は次のようになります。

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

サイドバーが押しつぶされてほとんど見えないことに気付くかもしれません。 少し再配置する必要があります。 このレイアウトでは、行を参照して配置を取得すると、配置に役立ちます。 線はガイドラインとして機能します。 ヘッダーは、行 1 の行と行 2 の行の間に配置されます。 サイドバーの場合、3 行目から始まり、6 行目で終わります。 ヘッダー行は 2 で終了したので、これはそのすぐ下に配置されます。 例を表示するには、Codepen のプロジェクトを参照してください。

grid-column-startを使用して、要素の開始垂直線を指定します。 この場合、3 に設定されます。 grid-column-end要素の垂直線の終了を示します。 この場合、このプロパティは 4 になります。 他の行の値もこれと同じ方法で設定されます。 サイドバーの配置はそこにあります。コンテンツ領域で覆われているだけです。

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

メイン コンテンツは 3 列目から始まり、4 列目で終わります。 サイドバーとコンテンツ エリアの上部は偶数であるため、どちらもgrid-row-startは 3 です。 コンテンツとサイドバーがどのように高くなっているのか不思議に思うかもしれません. コンテナーに高さ (この場合は 400px) を設定することで、これは他の要素よりも高くなります。

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

最後の 2 つのコンテンツ領域は、追加コンテンツ領域とフッターです。

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

終了宣言と開始宣言をより効率的に記述できます。 grid-column-start: 1;表示される場合があります。 およびgrid-column-end: 3; 略して書かれています。 これはgrid-column: 1 / 3;のようになります。 . これと同じ考え方を使用して、列の行情報を宣言できます。

レスポンシブの利点

レイアウトが作成されたので、非常に「デスクトップ」に見えます。 タブレットやモバイル デバイスはどうですか? CSS グリッド レイアウトはメディア クエリとうまく連携するため、デザインをさまざまな画面サイズに適応させることができます。 本当に素晴らしいのは、これらのさまざまなメディア クエリのブレークポイントでコンテンツ領域を変更できることです。 これは、デザイナーとして、さまざまなブレークポイントでレイアウトに最適なものを選択することを意味します。 たとえば、「追加コンテンツ」を「コンテンツ」領域の上に配置する場合は、正しい列と行を指定できます。

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

列を 1 で開始し、4 で終了することにより、コンテンツ領域を全幅にしました。 グリッド行は、「追加コンテンツ」が「コンテンツ」の上に来るように配置されます。

CSS グリッド レイアウト用のブラウザ ツール

レイアウトをデザインしたり、他の Web サイトを調べたりするとき、Firefox は CSS グリッド レイアウトを操作するための優れたツールを提供します。 これは CSS Grid Playground と呼ばれ、グリッドを非常に直感的に調べることができます。 インスペクタに移動すると、レイアウト タブにオプションがあり、グリッドがどのように構築されているかを視覚的に確認できます。 このツールを使用して、さまざまなグリッド プロパティがグリッド レイアウトとデザイン全体にどのように影響するかを調べると、デザイン プロセスが容易になります。

CSS グリッド レイアウトは、Web レイアウトを作成するための新しい刺激的な方法です。 ご覧のように、単純なページ レイアウトを作成する場合、起動して実行するのは非常に簡単です。 この単純な例は、より複雑なレイアウトを作成するための優れた基盤です。 これが普及するにつれて、レイアウトのカスタマイズが可能なさまざまなデバイスやブレークポイントを設計する際に、このテクノロジが有利になるでしょう。