Flexbox Froggy HTML/CSS

【無料】CSS Flexbox学習をゲームでやってみよう【1時間】

投稿日:

HTML/CSSの学習をしている初心者のみなさん、復習や腕試しをしてみたいみなさんにオススメの無料ゲームがあります。

比較的初心者向けのゲームになっていますが、視覚的に楽しめて1時間程度でクリアできる内容になっているので息抜きなんかでやってみるのもいいと思いますよ。(学習内容は本格的なので勉強にもなります)




▼ Flexboxとは

この記事を読んでいる方は既に知っているとは思いますがご説明します。

CSS3 WebレイアウトモデルのCSSフレキシブルボックスレイアウトと呼ばれているもので、フレックスレイアウトを使用することでレスポンシブ要素を画面サイズに応じて自動的に配置することができる機能です。

・・・わかりにくいですよね。

要約すると「1つの要素(メニューとかコンテンツとか)を、Flexboxという箱にして柔軟に画面上に配置できる機能」とでも考えればわかりやすいかと思います。※あくまでもイメージです。




▼ Flexbox Froggy

Flexbox Froggy

さっそくですがゲームのご紹介です。この「Flexbox Froggy」というゲームはもともと英語版しかなかったのですが、現在は日本語対応しています。

画面は解説部分・回答欄・実際に効果が反映される画面の3画面で構成されており、これ以上でもこれ以下でもありません。とてもシンプルなので余計なことを考えずに集中してプレイすることができます。

レベル1~レベル24までありますが、説明も含んだ内容となっているので初心者でも安心してプレイすることができます。レベル24だけ最終試験となっておりいきなり難易度が上がりますが、やってきた内容の総まとめのような問題なので頑張れば解けます。




▼ レベル1を実際にやってみる

解説欄をよく読んで実際に解答欄にコードを記載してみる。

解答欄に正しいコードを入力すると右画面のカエルが左上から右上の葉っぱの上に移動します。正しく反映されたら「次へ」をクリックして次の問題へ進みましょう。

解説欄のアンダーバーが引かれているコードにマウスを合わせるとヒントが表示されるようになっているので、もし詰まったらヒントを見てみましょう。




▼ 最後に

ゲーム感覚で学習できるっていいですよね。正直文字ばかりで説明されてもわかりにくいですし、何より文字を読んでいると眠くなる体質のわたしには厳しいものです(笑)

視覚的、かつ体験的に学習できるシステムってすごくいいと思うんですよね。もっと増えて欲しいです。

みんなが学習で挫折しなければ全体的な技術の底上げになると思いますし、技術力が向上すれば、それだけみんなの生活が豊かになるわけですよ。

楽しんでゲーム感覚で学習できる教材と言うと、子ども用の教材が多いですが、大人用もガンガン増やすべきだとここで言いたいですね。真面目に。

時間を有効利用して効率的に学習を進めていきたいものですね。


ではまた。





















-Flexbox Froggy, HTML/CSS
-, , , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【HTML】Visual Studio Code ダウンロード~日本語化まで(無料)【CSS】

ブログを再開してからHTMLとCSSの勉強もスタートしました。 今までWindows標準搭載の「メモ帳」でコードを書いていましたが、” Visual Studio Code “ …

【上達の近道】プログラミング学習が効率が驚くほどよくなる方法【初心者向け】

プログラミング学習の効率が驚くほどよくなる方法をお伝えします。 わたし自身、現在勉強の身なので偉そうなことは言えませんが、現在進行形で勉強しているからこそお伝えできることもあると思っています。 まだ勉 …

【プログラミング】プログラミング用フォントを導入してみよう【フォント】

プログラミング用フォントなるものが存在していることを知りました。まだ知らないという方の為にブログに残しておこうと思います。 参考までに私の使用目的はHTML/CSSです。ですが、どのプログラミングでも …

【超簡単】便利ツールを使ってプログラミング/コーディングをカンタンにしよう【クイックスマイリー】

HTML/CSSを勉強しているとある程度決まったお約束のタグやコードが存在するのがわかります。 それの組み合わせになってくるので、何度も同じタグやコードを入力するのって面倒。。。 微妙に間違えると反映 …