このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 フレックスボックスを使ってみよう (02:19) 無料公開中
- 概要
- 利用例
-
#02 関連用語について理解しておこう (01:27) 無料公開中
- flex container
- flex item
- 主軸
- 交差軸
-
#03 要素の並び､揃えを制御しよう (02:32) 無料公開中
- flex-direction
- justify-content
- align-items
-
#04 flex-wrap､align-contentを使おう (02:11) 無料公開中
- flex-wrap
- align-content
- flex-flow
-
#05 align-self､orderを使ってみよう (01:30)
- align-self
- order
-
#06 flex-basisでサイズを決めよう (01:45)
- flex-basis
-
#07 flex-grow､flex-shrinkを理解しよう (02:47)
- flex-grow
- flex-shrink
-
#08 flexプロパティを使ってみよう (02:38)
- flex
- 初期値に関する注意点
-
#09 2カラムレイアウトを作ってみよう (02:08)
- 2カラムレイアウト
-
#10 3カラムレイアウトを作ってみよう (01:28)
- 3カラムレイアウト
- order
-
#11 縦方向に要素を配置してみよう (02:52)
- 縦方向への配置
- 高さの設定
-
#12 要素を上下左右中央に配置しよう (02:47)
- 上下左右中央への配置
- フレックスボックスを使った方法
-
#13 ヘッダーレイアウトを作ってみよう (02:39)
- ヘッダーレイアウトの制作
- marginとの組み合わせ
-
#14 横並びメニューを作ってみよう (02:23)
- 横並びメニュー
- クリックエリアの設定
-
#15 画像とテキストを配置してみよう (02:49)
- 画像とテキストの配置
-
#16 画像を左右に振り分けてみよう (02:28)
- 交互に配置が逆になるリストの作成
- flex-direction: row-reverse
2020年7月6日
2020年8月18日
2020年5月3日
2020年5月10日
2020年5月30日
2020年8月18日
2020年5月10日
2020年5月10日
2020年5月10日
2020年5月30日
2020年5月10日
2020年5月30日
2020年8月10日
2020年5月30日
2020年5月10日
2020年9月18日
2020年8月28日
2020年5月10日
2020年8月18日
2020年8月18日
2020年8月10日
2020年8月18日
2020年5月10日
2020年5月10日
2020年5月10日
2020年5月10日
2020年8月18日
2020年5月30日
2020年5月10日
2020年5月10日
2020年8月10日
2020年7月6日
2020年5月10日
2020年5月10日
2020年8月18日
2020年8月18日
2020年7月6日
2020年5月10日
