新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 グリッドレイアウトを使ってみよう (01:02) 無料公開中
- 概要
- 利用例
-
#02 学習の準備を整えよう (02:08) 無料公開中
- index.html
- styles.css
-
#03 要素を配置してみよう (01:42) 無料公開中
- 要素の配置
-
#04 グリッドを設定してみよう (03:00) 無料公開中
- grid-template-columns
- grid-template-rows
- fr(action)
-
#05 gapで余白を設定しよう (01:13)
- gap
-
#06 repeat()､auto-fillを使ってみよう (01:38)
- repeat()
- auto-fill
-
#07 minmax()､auto-fitを使ってみよう (01:43)
- minmax()
- auto-fit
-
#08 grid-auto-rowsを使ってみよう (01:22)
- grid-auto-rows
-
#09 好きな位置に要素を配置してみよう (01:51)
- grid-column
- grid-row
- 範囲の指定方法
-
#10 grid-column､grid-rowを使おう (01:51)
- grid-column
- grid-row
- 範囲の指定方法
-
#11 グリッドラインに名前をつけよう (02:38)
- グリッドラインの名前の付け方
-
#12 grid-auto-flowを使ってみよう (02:55)
- grid-auto-flow
- grid-auto-column
- dense
-
#13 配置する領域を直感的に指定しよう (01:40)
- grid-template-areas
- grid-area
-
#14 grid-template-areasを使ってみよう (02:16)
- grid-template-areas
- grid-area
-
#15 要素を揃えるプロパティを見ていこう (02:53)
- justify-content
- align-content
- justify-items
- align-items
- justify-self
- align-self
-
#16 グリッドや要素を揃えてみよう (02:39)
- justify-content
- align-content
- justify-items
- align-items
- justify-self
- align-self
