サマリ
flexboxをゲーム感覚で学べる、FLEXBOX FROGGYをやってみました。
背景
地道にHTML、CSSを勉強しているのですが、
やっぱり勉強ってモチベーションが大事と感じる今日この頃…
そんなある日FLEXBOX FROGGYのサイトが目について、楽しそう＋ハードル低そうということでやってみました。
ゴール
FLEXBOX FROGGYを一通りやってみる。
対象読者
- FLEXBOX FROGGYが気になっている方
- flexboxを学習したい方
前提
必須：インターネット環境・ブラウザ
推奨：CSSについての基礎知識
環境
- OS：Window10 Home
- ブラウザ：Google Chrome
手順
そもそもflexboxは
Flexboxは、CSS3で追加された新機能です。
正式名称はFlexible Box Layout Moduleといいます。今までよりも自由に、そして簡単に横並びのレイアウトを作ることができます。
（上記URLより引用）
詳細は上記のURLを参照ください。（雑
それではさっそくやってみます。
以下のURLに接続します。
このような画面が開きます。
ログインは特に不要です。
もうすでに最初のレベル１になっていますね。
試しに'justify-content: flex-end;'を打ち込むとこの通り、
カエルが右側に移動します。
レベルによっては下線が引いてある文字をクリックすると解説も表示されます。
（ちなみに各値を選択すると、自動でエディタ（画面グレー部分）に反映されます。）
このような感じでどんどん進めていきます。
全24レベルあり、全部クリアすると以下のような画面になります。
最後難しかったです。。
結果
FLEXBOX FROGGYを一通り実施しました。
まとめ
こういうゲーム感覚のコンテンツは学習ハードルが下がるのでとてもいいですよね！
自分の場合はCSSの基礎をもっと固めたほうがいいのはありますが、
やらないよりやる方がましと言い聞かせて（おい）
今後も引き続き勉強・実践していきたいと思います。
余談ですが、下記のサイトでもflexboxを学習できます。