Build a Classic Layout FAST in CSS Grid

Summary

このビデオスクリプトでは、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を使用すると、固定単位と流体単位をより信頼性の高い方法で混在させてレイアウトを作成することができ、複雑なレイアウトの作成が簡単になります。

Outlines

00:00

🌟 CSS Gridsの基本的な使い方

この段落では、CSS Gridsの使い方について紹介されています。Gridsは複雑なレイアウトを作成するための仕様ですが、簡単に始められることがわかります。まず、body要素に`display: grid`を追加することで、既存のブロックフローに似たデフォルトグリッドが生成されます。次に、グリッドギャップを1emに設定し、ブロック要素同士の間にスペースを空けます。Firefoxのnightlyビルドでグリッドインスペクターを使用して、グリッドの可視化を行います。グリッドテンプレート行を定義し、ヘッダー、ナビゲーション、メインコンテンツ、フッターのサイズを調整します。特にメインコンテンツは、残りのスペースを必要に応じて自動的に調整します。ビューポートの高さを100vhに設定し、メインエリアがより多くのスペースを占有するようにします。

05:01

📱 モバイル向けのレイアウトとメディアクエリ

この段落では、モバイル向けのレイアウトを作成し、メディアクエリを使用して画面サイズが40emを超えた場合により複雑なレイアウトに変更する方法が説明されています。グリッドテンプレートカラムを使用して、サイドバーとメインスペースを定義し、サイドバーは12em、メインスペースは残りのスペースを占有するようにします。これにより、固定値と流体値をより信頼性の高い方法で混在させることができます。3つの行を定義し、ヘッダーが2つのカラムをまたぎ、ナビゲーションがサイドに沿って表示されるようにします。グリッドエリアを使用して、ヘッダー、ナビゲーション、メイン、フッターの配置を指定します。これにより、1つの場所でレイアウトを制御し、さまざまな画面サイズやコンテキストで複数のレイアウトを設定できます。また、ASCIIアートのようなグリッドテンプレートエリアを使用して、モバイルレイアウトを定義し、メディアクエリで構造を変更する方法も紹介されています。

Keywords

💡CSS Grids

CSS Gridsは、ウェブデザインにおいてレイアウトを作成するための機能です。この技術を使うことで、複雑なグリッドシステムを簡単に構築できます。ビデオでは、CSS Gridsを使ってどのように興味深いレイアウトを作成するかを紹介しています。

💡display grid

「display grid」は、CSSのプロパティの一つで、要素に対してグリッドシステムを適用することを意味します。ビデオでは、これを使用して、ウェブページの基本的なブロックフローに似たグリッドを安全に追加する方法が説明されています。

💡grid gap

「grid gap」は、グリッドシステム内の要素間のスペースを制御するためのCSSプロパティです。このプロパティを使用することで、グリッドの列と行の間のギャップ（スペース）を一貫して追加できます。

💡Firefox nightly

「Firefox nightly」は、Mozillaが開発中のFirefoxブラウザの開発版を指します。このバージョンは、最新の機能や修正が含まれているため、ウェブ開発者にとっては非常に有用です。ビデオでは、Firefox nightlyを使ってグリッドシステムを視覚的に確認する方法が紹介されています。

💡grid template rows

「grid template rows」は、CSS Gridsで使用されるプロパティで、グリッドの行の数とサイズを定義するために使用されます。これにより、グリッド内の要素がどのように配置されるかを制御できます。ビデオでは、グリッドの行を設定して、ヘッダー、ナビゲーション、メインコンテンツ、フッターのそれぞれの部分に適切なスペースを割り当てます。

💡viewport height

「viewport height」は、ウェブページを表示するブラウザのビューポートの高さを指します。CSS Gridsでは、要素のサイズを「100vh」という単位で指定することで、ビューポートの高さに合わせたサイズにすることができます。ビデオでは、この単位を使用して、メインコンテンツの高さをビューポートに合わせる方法が紹介されています。

💡media query

「media query」は、CSSで使用される機能で、特定の条件（例えば、画面サイズや解像度）を満たす場合にのみスタイルを適用することができます。これにより、ウェブページはさまざまなデバイスや画面サイズに適応して表示されます。ビデオでは、メディアクエリを使用して、画面サイズが40emを超えた場合により複雑なレイアウトを適用する方法が紹介されています。

💡grid template columns

「grid template columns」は、CSS Gridsで使用されるプロパティで、グリッドの列の数とサイズを定義するために使用されます。これにより、グリッド内の要素が横方向にどのように配置されるかを制御できます。ビデオでは、グリッドの列を設定して、サイドバーとメインスペースのそれぞれの部分に適切なスペースを割り当てます。

💡grid area

「grid area」は、CSS Gridsで使用される用語で、グリッド内の特定のセルまたはセルのグループを指します。グリッドエリアを使用することで、要素を特定のグリッドセルに配置することができます。ビデオでは、グリッドエリアを使用して、ヘッダーやナビゲーションバーが複数の列や行をまたぐように指定する方法が紹介されています。

💡ASCII art

「ASCII art」とは、ASCIIコードを使用してシンプルな絵画やデザインを作成する芸術的な表現方法です。CSS Gridsでは、「grid template areas」を使用して、ASCIIアートのような記述でレイアウトを定義することができます。ビデオでは、この方法を使って、モバイルレイアウトを定義する方法が紹介されています。

💡sticky footer

「sticky footer」は、ウェブページのフッターが常に画面の最下部に固定されるようにするCSS技術です。これにより、ページのコンテンツが短い場合でもフッターが画面の最下部に表示され、余白が生じることを防ぎます。ビデオでは、sticky footerの効果を実現する方法が示されています。

Highlights

展示快速开始使用CSS Grid的方法

CSS Grid规范可能令人生畏，但可以用很少的代码做出有趣的布局

通过在body上添加display grid，开始使用Grid

默认网格与默认块流非常相似，可以安全添加

Grid可以更一致地添加间隔（gutters）

通过设置grid gap为1em，使块元素之间产生间隔

使用Firefox nightly的Grid inspector来可视化网格

自动生成的隐式网格，在我们尚未定义它时自动创建

添加grid template rows来定义行大小

通过min height设置为100vh，使主区域占据更多空间

在媒体查询中为超过40em宽度的页面创建更复杂的布局

使用grid template columns设置侧边栏和主空间的列布局

Grid允许固定单位和流式单位的混合使用，提高了布局的可靠性

定义三行布局，并通过auto和one fraction设置它们的大小

通过grid area将header和nav跨越多个列和行

使用grid template areas通过ASCII艺术定义布局

通过媒体查询改变不同区域的结构，适应不同屏幕尺寸

如果关闭Grid，将自动获得初始的移动布局

Transcripts

(upbeat electronic music)

- I want to show you a quick way to

get started with CSS Grids.

I know the spec can be daunting,

there's a lot that it can do,

but we can start to do some fairly interesting layouts

with just very little code.

So I'm going to start here by just adding

display grid to the body.

And you can see that nothing really changes here,

the default grid is very much like the default block flow.

We can put it in there pretty safely

without expecting much to happen.

Now one of the cool things about Grid is that we can add

gutters in a more consistent way.

So I'm going to do that.

I'm going to add it's called grid gap

of 1em.

And all of my block elements will jump apart

by that much, so,

the grid gap goes between each of the grid areas.

I'm going to inspect this

in Firefox nightly here.

I've opened the grid inspector here

in Firefox.

And you can see here the body

now has this little tag next to it that says grid

and I'm going to click on that.

And that's going to show us the grid visually here

in the main window.

And you can see it's added lines around each area.

It's added this shading over the gutters.

And we have these line numbers.

So the first line is one

and then the second line is two,

three, four, five, so we've

automatically got five grid row lines

down the page.

And just one and two across.

There are also negative one index going backwards, so,

that's just happening automatically.

I'm going to turn that off quick.

So what we have there is the implicit grid

that's generated automatically

when we create a grid

and we haven't defined it yet.

What I'm going to do now is add some grid template rows.

So rows go down the page.

And I'm just going to give some sizing to these things.

I'm going to say that the first one is auto-sized

that's the header.

Then the nav is also going to be auto-size.

And then the main content is going to be one fraction

which means it can take up as much space as it needs to

in the layout.

However much space is remaining.

And then the footer, again, I'm going to set to auto.

Now that didn't change anything yet

because there's no extra space there

for the main area to take up.

So I'm just going to add some extra space

with a min height

of 100vh, that's viewport height.

So it's going to be at least the height of the viewport.

And you can see that because of the rows,

if I didn't have grid template rows there,

they would all expand in a similar way.

But by adding the grid template rows,

I've made it so that now the main area takes up more space

and the others stay the same size.

So this might work for us as a mobile layout.

And we might not even worry about the grid fallback

for mobile because it's fairly similar.

There's not really much happening here yet.

I'm going to try to create then inside of this media query

so for any page over 40em's wide

we're going to add a little bit more complex layout.

Again, we're going to use grid template columns.

But we're going to set up a sidebar that's 12ems

and then a main space that's one fraction,

that takes up all of the remaining space available

in the window.

And you can see that everything sort

of falls into place there automatically.

The first column stays 12em's

and the second column takes up whatever space is left.

And that's pretty cool,

because that means that we can start doing layouts

that really mix.

Fixed units with fluid units

in a more reliable way

which is a really nice thing about grid.

And then I'm going to say we actually want three rows.

So right now it's giving us two by default.

We want three rows.

The first one's going to be auto-sized,

the second one's going to be as much space as we need,

and then the footer will go along the bottom.

So, if I define those three rows auto, one fraction, auto.

Right now, we're not seeing that last row,

it's collapsing because there's nothing in it.

And what I'm going to do is tell the header

to span two columns.

I added grid column span two to the header.

And that made it take up the entire top space

instead of making the footer go the whole way across.

I'm going to make the nav go the whole way down that side.

So, I'm going to add nav grid row

span two

and it will go down that whole side

and then main and footer are both being pushed into place.

I don't have to be more explicit here if I don't want to be.

I could if it's useful for some reason.

But you can see here now we have a mobile view

on small screens

and when I make the screen bigger it jumps

to this layout.

I can also change the height of the window.

And you can see again that main and nav are stretching

as much as they need to

to take up the space while the header

and footer always remain the same size.

And it's a sort of sticky footer where

if the window gets big, the footer is still there.

But if the window is smaller

we're able to scroll.

Once we have these named areas,

the only thing that we have to do then

to make our header and navigation

span the multiple columns and rows,

is assign them a grid area.

So, we say header, grid area banner.

Nav grid area nav.

Main grid area main, etc.

And by giving them these names

we can just change in one place

what the layout that we want is going to look like

and then that will change for anything assigned

to that area.

You can see there I changed banner to just span one.

I could make nav come up here into the header.

And it will take over that space.

And that means that the parent element,

in this case the body,

it sort of controls the layout from one place.

So we can set up multiple layouts at different screen sizes

or in different contexts,

and everything else will fall into place.

Another thing that we can do with grid

that is really helpful for getting started

is use this grid template areas.

It's a way of using sort of ASCII art

to define a layout.

So I have to find our mobile layout here

by just giving names to

the four different areas we have in mobile.

And let's just see them there.

We have a banner, nav, main, and footer.

And then I can add a media query.

All I have to do with a media query is change

the structure of those areas.

So now I've made banner go across two columns

and then nav in a single column

and then main side by side.

And then nav and footer are also side by side.

So you can see here, the banners going to go across the top.

The nav is going to come down the side.

And then main and footer are going to fill in the gaps.

And when we extend our window

that's what we see happen.

And I think that's just a great way

to get started with Grid.

That's really sort of the,

the terms and pieces of code that you need to get started.

And you can see that some of the fallbacks

are going to happen in some ways automatically.

If you turn off Grid,

you'll automatically get the mobile layout

that you started with.

And you can build on top of that.

Have fun and get started with Grid.

(upbeat electronic music)