Build a Classic Layout FAST in CSS Grid

Mozilla Developer

14 Oct 201908:30

Summary

TLDRこのビデオスクリプトでは、CSS Gridの使い方を簡単に紹介しています。デフォルトのグリッドはブロックフローに似ており、安全に追加できます。グリッドギャップを追加して余白を一貫性のある方法で追加し、Firefoxのグリッドインスペクターを使って視覚化しました。グリッドテンプレート行と列を使って、ヘッダー、ナビゲーション、メインコンテンツ、フッターのサイズを設定し、レイアウトを調整。メディアクエリを使って、画面サイズが大きくなるとレイアウトを変更し、グリッドテンプレートエリアを使ってASCIIアートのようにレイアウトを定義。この方法で、さまざまな画面サイズやコンテキストで複数のレイアウトを設定できます。

Takeaways

🌟 CSS Gridsを使用すると、コードを少なくともすることができるで、興味深いレイアウトを作成できます。
🎨 display: gridをbodyに追加することで、グリッドの基本的な設定を始めることができます。
🔧 grid gapを使用して、グリッド間隔をより一貫した方法で調整できます。
🔎 Firefoxのnightly版でグリッドインスペクターを使用して、グリッドの可視化を確認できます。
📏 grid template rowsを使用して、ページの流れに沿った行のサイズを指定できます。
📐 min-height: 100vhを使用して、ビューポートの高さに合わせたレイアウトを作成できます。
📱 メディアクエリを使用して、画面サイズに応じてレイアウトを調整できます。
👉 grid template columnsを使用して、カラムの幅を設定し、サイドバーやメインスペースを定義できます。
🔄 grid column spanを使用して、ヘッダーやナビゲーションを複数の列や行にまたがらせることができます。
🏷️ grid areaを使用して、要素を特定のグリッド領域に割り当てることができます。
🎨 ASCIIアートのようにgrid template areasを使用して、レイアウトを定義することができます。

Q & A

CSS Gridの基本的な機能は何ですか？
-CSS Gridは、ウェブページのレイアウトを作成するための機能で、グリッドラインを自動的に生成し、グリッドギャップを追加することでブロック要素の間に一貫したスペースを提供します。
グリッドギャップを追加するとどうなりますか？
-グリッドギャップを追加すると、ブロック要素は指定されたスペースだけ離れ、ページの見通しを向上させます。
Firefoxのnightly版でグリッドを確認するにはどうすればいいですか？
-Firefoxのnightly版では、グリッドインスペクターを使用して、グリッドの視覚化を確認できます。
グリッドテンプレート行とグリッドテンプレート列はどのように使われますか？
-グリッドテンプレート行はページを下方向に、グリッドテンプレート列はページを右方向に拡張します。これらを使用することで、レイアウトに必要なスペースを効果的に管理できます。
auto-sizeとfr単位の違いは何ですか？
-auto-sizeは要素のコンテンツに基づいて自動的にサイズが決定され、fr単位は残りのスペースを的比例配分されます。
ビューポートの高さを指定するために100vhは使用されますが、これはどういう意味ですか？
-100vhはビューポートの高さを意味し、要素の高さをビューポート全体に合わせるために使用されます。
メディアクエリを使用する目的は何ですか？
-メディアクエリは、ページの幅が一定のサイズを超えた場合に、より複雑なレイアウトを適用するために使用されます。
グリッドエリアを使用する際に命名された「banner」、「nav」、「main」、「footer」はどのように機能しますか？
-これらの名前はグリッドエリアを識別し、レイアウトの調整を簡素化するために使用されます。1つの場所でレイアウトを変更することで、それらのエリアに割り当てられた全ての要素に影響を与えることができます。
グリッドテンプレートエリアを使用してレイアウトを定義する際のASCIIアートは何を意味しますか？
-ASCIIアートを使用することで、簡易な方法でグリッドレイアウトを視覚的に表現できます。これにより、モバイルレイアウトやさまざまな画面サイズに応じたレイアウトを簡単に調整できます。
グリッドを使用する際のフォールバックとは何を指しますか？
-フォールバックは、グリッドが無効になった場合に、最初に定義されたモバイルレイアウトに自動的に切り替わることを意味します。
CSS Gridを使用する際の利点は何ですか？
-CSS Gridを使用すると、固定単位と流体単位をより信頼性の高い方法で混在させてレイアウトを作成することができ、複雑なレイアウトの作成が簡単になります。