🐸 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