このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 macOSで作業用フォルダを設定しよう (02:34) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#02 Windowsで作業用フォルダを設定しよう (02:34) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#03 フレックスボックスの用語を整理しよう (02:03) 無料公開中
- 概要
- フレックスコンテナ
- 主軸
- 交差軸
- フレックスアイテム
-
#04 フレックスコンテナを設定しよう (02:41) 無料公開中
- display: flex;
- display: inline-flex;
-
#05 flex-directionで主軸の向きを変えよう (02:47) 無料公開中
- flex-direction: row;
- flex-direction: row-reverse;
- flex-direction: column;
- flex-direction: column-reverse;
-
#06 justify-contentで要素を揃えてみよう (02:20)
- justify-content: flex-start;
- justify-content: center;
- justify-content: flex-end;
- justify-content: space-between;
-
#07 align-itemsで要素を揃えてみよう (02:20)
- align-items: flex-start;
- align-items: flex-end;
- align-items: center;
- justify-contentとの組み合わせ
-
#08 flex-wrapで要素を折り返してみよう (02:30)
- flex-wrap: wrap;
- Flex Line
-
#09 gapで要素のすき間を定義しよう (02:30)
- gapプロパティ
- calc()との組み合わせ
-
#10 align-self､autoキーワードを使おう (03:01)
- align-self: flex-start;
- align-self: flex-end;
- align-self: center;
- marginのautoキーワード
-
#11 orderで並び順を変更してみよう (02:05)
- orderプロパティ
- 使いどころ
-
#12 flexでアイテムの挙動を制御しよう (03:00)
- flexプロパティ
- autoと1以上の整数値の違い
- 開発者ツールによる確認
-
#13 実践的なレイアウトを組み上げよう (02:08)
- 実践的なレイアウト
- 要素の配置
- 動作確認
-
#14 2カラムレイアウトを作ってみよう (02:30)
- フレックスコンテナの設定
- flexプロパティの活用例
-
#15 3カラムレイアウトを作ってみよう (02:24)
- nav要素の追加
- orderプロパティの活用例
-
#16 bodyの高さについて理解しよう (01:46)
- 3カラムレイアウトの問題点
- body, htmlの高さ
- フレックスボックスの活用
-
#17 footerを下部に配置しよう (02:44)
- body, htmlの設定
- フレックスボックスの設定
-
#18 画像付きの記事一覧を作ろう (02:51)
- 要素の配置
- display: flex;
- flexプロパティ
- gapプロパティ
-
#19 画像を左右に振り分けよう (02:40)
- 隣接兄弟結合子
- :nth-child(even)
- flex-direction: row-reverse;
- align-items: center;
-
#20 ロゴ付きのヘッダーメニューを作ろう (02:34)
- 要素の配置
- display: flex;
- justify-content: space-between;
- marginのautoキーワード
-
#21 メニューをクリックしやすくしよう (02:29)
- リストのスタイリング
- a要素のスタイリング
-
#22 次のステップを確認しよう (01:28)
- ここまでのまとめ
- 次のステップ
- 256timesの紹介
次におすすめのレッスン
特訓CSS フレックスボックス編 256times
「256times」の無料体験クラスを終えた方へ。このクラスではCSSフレックスボックスの実践的なレイアウト手法を習得していきます。
256times
