新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#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
リリース情報（note）
詳細情報
- 最終更新日
- 2019年12月27日
- バージョン情報
- Chrome 78.0 / Visual Studio Code 1.38.0
