HTML/CSSの学習をしている初心者のみなさん、復習や腕試しをしてみたいみなさんにオススメの無料ゲームがあります。
比較的初心者向けのゲームになっていますが、視覚的に楽しめて1時間程度でクリアできる内容になっているので息抜きなんかでやってみるのもいいと思いますよ。（学習内容は本格的なので勉強にもなります）
▼ Flexboxとは
この記事を読んでいる方は既に知っているとは思いますがご説明します。
CSS3 WebレイアウトモデルのCSSフレキシブルボックスレイアウトと呼ばれているもので、フレックスレイアウトを使用することでレスポンシブ要素を画面サイズに応じて自動的に配置することができる機能です。
・・・わかりにくいですよね。
要約すると「1つの要素（メニューとかコンテンツとか）を、Flexboxという箱にして柔軟に画面上に配置できる機能」とでも考えればわかりやすいかと思います。※あくまでもイメージです。
▼ Flexbox Froggy
さっそくですがゲームのご紹介です。この「Flexbox Froggy」というゲームはもともと英語版しかなかったのですが、現在は日本語対応しています。
画面は解説部分・回答欄・実際に効果が反映される画面の3画面で構成されており、これ以上でもこれ以下でもありません。とてもシンプルなので余計なことを考えずに集中してプレイすることができます。
レベル１～レベル２４までありますが、説明も含んだ内容となっているので初心者でも安心してプレイすることができます。レベル２４だけ最終試験となっておりいきなり難易度が上がりますが、やってきた内容の総まとめのような問題なので頑張れば解けます。
▼ レベル1を実際にやってみる
解説欄をよく読んで実際に解答欄にコードを記載してみる。
解答欄に正しいコードを入力すると右画面のカエルが左上から右上の葉っぱの上に移動します。正しく反映されたら「次へ」をクリックして次の問題へ進みましょう。
解説欄のアンダーバーが引かれているコードにマウスを合わせるとヒントが表示されるようになっているので、もし詰まったらヒントを見てみましょう。
▼ 最後に
ゲーム感覚で学習できるっていいですよね。正直文字ばかりで説明されてもわかりにくいですし、何より文字を読んでいると眠くなる体質のわたしには厳しいものです（笑）
視覚的、かつ体験的に学習できるシステムってすごくいいと思うんですよね。もっと増えて欲しいです。
みんなが学習で挫折しなければ全体的な技術の底上げになると思いますし、技術力が向上すれば、それだけみんなの生活が豊かになるわけですよ。
楽しんでゲーム感覚で学習できる教材と言うと、子ども用の教材が多いですが、大人用もガンガン増やすべきだとここで言いたいですね。真面目に。
時間を有効利用して効率的に学習を進めていきたいものですね。
ではまた。
