【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回】基本構文を抑えよう！ https://youtu.be/xBLIzweHYic 【第2回】プロパティについて深堀りしよう！ https://youtu.be/sfAhER5AGOA 【第3回】この講座だけでセレクターは完結できます！ https://youtu.be/3RX0ASjozkc 【第4回】スタイルが効かないときはだいたいカスケード・詳細度・継承のどれかが原因！ https://youtu.be/aNnauB_PY3I 【第5回】ボックスモデルはCSSを書いていく上で常に意識する必要があります https://youtu.be/z582Z6dENGA 【第7回】flexbox の flex プロパティの使い方を徹底解説 https://youtu.be/TXwY_SWO07U 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました！ 現在は起業家として新規サービスを開発中です！ 下記に興味がある方はチャンネル登録をおねがいします！ ・IT業界、Web系、プログラミング講座 ・リモートワーク、在宅勤務、副業 ・スタートアップ、ベンチャー、経営者、社長 🌏 SNS Twitter: https://twitter.com/shimabu_it TikTok: https://www.tiktok.com/@shimabu_it 🏷️ タグ #CSS #flexbox #flex