新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 Flexboxを使ってみよう (01:59) 無料公開中
- 概要
- 必要となる知識
- 仕様の確認方法
- ブラウザの対応状況
-
#02 関連用語について理解しておこう (01:57) 無料公開中
- flex container
- flex item
- main axis
- cross axis
- flex-direction
-
#03 学習の準備を整えよう (02:51) 無料公開中
- index.htmlの作成
- styles.cssの作成
-
#04 flex-flowを使ってみよう (03:00) 無料公開中
- flex-direction
- flex-wrap
- 動作確認
- flex-flow
-
#05 justify-contentを使ってみよう (02:21)
- justify-content
- 値による配置の変化を確認
-
- align-items
- align-content
-
#07 order､align-selfを使ってみよう (01:57)
- order
- align-self
- align-itemsとalign-selfの組み合わせ
-
#08 flexプロパティを理解しよう (02:18)
- flex-grow
- flex-shrink
- flex-basis
-
#09 flex-growの仕組みを理解しよう (02:09)
- flex-growの仕組み
- 動作確認
-
#10 flex-shrinkの仕組みを理解しよう (02:43)
- flex-shrinkの仕組み
- 動作確認
-
#11 margin:autoと組み合わせてみよう (01:42)
- margin:auto
- メニューのようなレイアウトの作成
-
#12 要素を上下左右中央に配置しよう (01:18)
- 上下左右中央への配置
-
#13 画像付きリストを作ってみよう (02:58)
- 画像付きリストのレイアウト
- 交互に配置が逆になるリストの作成
-
#14 3カラムレイアウトを作ってみよう (02:36)
- 3カラムレイアウト（左右カラムは幅固定）
- 動作確認
-
#15 レスポンシブデザインに対応させよう (01:47)
- レスポンシブウェブデザインへの対応
- カラムから列配置へ
- 配置順の変更
