「Flexbox Froggy」はカエルたちを蓮の葉の上に動かして、CSSコードを書いて助けてあげるゲームです。すぐに画面でカエルの移動が確認できるので、理解が進みました。
Flexbox Froggyとは
「Flexbox Froggy」はカエルたちを蓮の葉の上に動かして、CSSコードを書いて助けてあげるWebサイト上のゲームです。登録とかをする必要もなく、遊べます。
問題は、たったの24問なので、気軽に試すことが出来ます。
各プロパティにカーソルを動かすと、そこで使える値を教えてくれます。
難しいな、と思ったら、youtube動画などで答えは検索できます。
その他のFlexboxのゲーム flexboxdefense
CSS Flexboxとは
CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり)/CREIVE
レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。
慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。
「もう迷わない！CSS Flexboxの使い方を徹底解説」/web design trendsより
CSS Flexboxの使い方をFlexboxFroggyで学んでみました。
何より日本語で書かれているのが、やりやすいと感じました。上の２つのサイトでFlexboxの使い方を学べば、ほぼ解けるようになりました。
間違ってても、何度もやり直すことができます。
すぐに画面でカエルの移動が確認できるので、理解が進みます。
最終問題は、手こずったので、youtubeを参考に解きました。
 |
| ゲーム終了の画面 |
参照サイト
遊んでCSS Flexboxを覚える / Flexbox Froggy をやってみた/よしたく blog日本語対応！CSS Flexboxのチートシートを作ったので配布します/Webクリエイターボックス
0 件のコメント:
コメントを投稿