【CSS #6】基礎からちゃんと学ぶ CSS 入門！フレックスボックス (flexbox) の使い方をゲームで学ぼう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

🐸 FLEXBOX FROGGY
https://flexboxfroggy.com/#ja

📙 もくじ
0:00 ゲーム「FLEXBOX FROGGY」の紹介
1:15 フレックスボックスのMDNリファレンスを紹介
1:47 Lv.1 justify-content ①
3:06 Lv.2 justify-content ②
3:52 Lv.3 justify-content ③
4:45 Lv.4 justify-content ④
5:43 Lv.5 align-items で縦軸の移動を学ぼう
6:32 Lv.6 align-items, justify-content で真ん中寄せ
7:17 Lv.7 align-items, justify-content の組み合わせ
7:46 Lv.8 flex-direction で軸を反対にする
8:46 Lv.9 flex-direction で軸に縦にする
9:22 Lv.10 flex-direction, justify-content の組み合わせ ①
10:55 Lv.11 flex-direction, justify-content の組み合わせ ②
11:57 Lv.12 flex-direction, justify-content の組み合わせ ③
12:39 Lv.13 flex-direction, align-items, justify-content の組み合わせ
13:49 Lv.14 order で並び順を変更する ①
15:26 Lv.15 order で並び順を変更する ②
16:01 Lv.16 align-self でカエルを個別に移動させる
17:09 Lv.17 order, align-self の組み合わせ
18:12 Lv.18 flex-wrap で折り返す方法を紹介
19:19 Lv.19 flex-direction, flex-wrap の組み合わせ
20:19 Lv.20 flex-flow ショートハンドを紹介
21:31 Lv.21 align-content ①
23:09 Lv.22 align-content ②
23:26 Lv.23 flex-direction, align-content の組み合わせ
24:22 Lv.24 最終問題: 今まで学んだことの集大成
27:03 エンディング画面, まとめ

🚀 今日のひとこと
今日のCSS講座はフレックスボックスについて。
「display: flex」とそれに付随するプロパティを学ぶことで、
ほぼすべてのレイアウトを構築することができます。
float, gridなどを使ったレイアウトもありますが、
現場ではほとんど flexbox が使われています。
今回は flexbox を学べるゲーム「FLEXBOX FROGGY」を紹介。
これを使えば楽しく理論を学ぶことができます。
プログラミングを独学で学んだけどまた学び直したい方や
入門・初心者エンジニアや駆け出しエンジニアにオススメです。

🔥基礎からちゃんと学ぶ CSS 入門！
【第1回】基本構文を抑えよう！
   • 【CSS #1】基礎からちゃんと学ぶ CSS 入門！基本構文を抑えよう！【...  

【第2回】プロパティについて深堀りしよう！
   • 【CSS #2】基礎からちゃんと学ぶ CSS 入門！プロパティについて深堀...  

【第3回】この講座だけでセレクターは完結できます！
   • 【CSS #3】基礎からちゃんと学ぶ CSS 入門！この講座だけでセレクタ...  

【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！
   • 【CSS #4】基礎からちゃんと学ぶ CSS 入門！スタイルが効かないとき...  

【第5回】ボックスモデルはCSSを書いていく上で常に意識する必要があります
   • 【CSS #5】基礎からちゃんと学ぶ CSS 入門！ボックスモデルはCSS...  

【第7回】flexbox の flex プロパティの使い方を徹底解説
   • 【CSS #7】基礎からちゃんと学ぶ CSS 入門！ flexbox の ...  

👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

🌏 SNS
Twitter:   / shimabu_it  
TikTok:   / shimabu_it  

🏷️ タグ
#CSS #flexbox #flex