このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 グリッドレイアウトを使ってみよう (01:47) 無料公開中- 概要
- レッスンの流れ
-
#02 学習の準備を整えよう (02:30) 無料公開中- 作業用フォルダの設定
- index.htmlの作成
- style.cssの作成
- ブラウザでの確認
-
#03 グリッドコンテナーを設定してみよう (02:34) 無料公開中- 要素の配置とスタイリング
- display: grid;
- grid-template-columns
- grid-template-rows
-
#04 frでサイズを可変にしてみよう (02:34) 無料公開中- containerのサイズ
- fr
- 可変幅の設定
-
#05 repeat()､auto-fillを使ってみよう (02:10)- repeat()
- auto-fill
-
#06 minmax()､auto-fitを使ってみよう (02:50)- minmax()
- auto-fit
-
#07 グリッドからあふれた要素のサイズを指定しよう (02:55)- grid-auto-flow
- grid-auto-columns
- grid-auto-rows
-
#08 グリッドコンテナーの位置を変えてみよう (02:18)- gap
- justify-content
- align-content
-
#09 グリッドアイテムの位置を変えてみよう (02:29)- place-content
- justify-items
- align-items
-
#10 グリッドラインを確認してみよう (02:30)- 開発者ツール
- グリッドライン
-
#11 グリッドラインに沿って要素を配置しよう (02:37)- grid-column
- grid-row
- z-index
-
#12 spanを使って要素を配置してみよう (02:04)- span
- grid-auto-flow: dense
-
#13 グリッドの領域に名前をつけてみよう (02:55)- grid-template-areas
- grid-area
- grid-template
-
#14 個々のグリッドアイテムの位置を変えてみよう (02:21)- justify-self
- align-self
- place-self
- order
-
#15 BentoUIを実装してみよう (03:00)- 実装の方針
- 要素の配置
- グリッドレイアウトの設定
- 配置用クラスの設定
-
#16 2カラムレイアウトを実装してみよう (03:00)- 実装の方針
- grid-template
- grid-area
-
#17 フッターが下に張りつくようにしよう (02:14)- 余白を行の高さに割り当てる
- html, bodyの高さの設定
-
#18 2つのリストを配置してみよう (02:59)- グリッドコンテナーの設定
- grid-row
-
#19 subgridを使ってみよう (02:09)- subgrid
- subgridの応用
プチ問題集にチャレンジ
動画によるインプットだけでは、知識はなかなか定着しません。学習のためのアウトプットを後押しする『256times』で、簡単な課題を解いて手を動かし、知識を定着させましょう（プレミアムプラン、法人向けライセンスをご利用の方は無料でご利用いただけます）。
CSS入門 グリッドレイアウト編 問題集（全4問）
