【無料】FlexBoxが学べる、アドベンチャーゲームとは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Flex Box Adventure」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・FlexBoxの使い方をマスターしたい方
・HTML・CSSなどのWeb技術を学習中の方
・ justify-contentなど、基礎を練習したい方

「Flex Box Adventure」って何?

Flex Box Adventure」とは、Webサイトの装飾で用いられる「FlexBox」が、ゲーム感覚で学べるサイトのことです。CSSコードを記述しながら、プレイヤーである勇者を操作。敵を倒して、お宝をゲットして、FlexBoxを使いこなせるようになりましょう!(おもしろい🎮)

Play Flex Box Adventure – CSS Game to Learn Flexbox
Learn css flexbox in a fun and easy way by playing css coding game!
【Web技術】ブラウザのサポート状況をチェックできる【Can I use】とは?
みなさんこんにちは!おさかなです!今回は「Can I use」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・CSS・各ブラウザの対応状況を知りたい方・IE・Chromeなどブラウザごとに...

実際に使ってみよう!

「Flex Box Adventure」の遊び方

それでは早速サイトにアクセスしましょう!

ページを少しスクロールして、「Start Adventure & Learn Flexbox」をクリック!(えい!)

レベルは、「Easy(かんたん)」「Medium(ふつう)」「Hard(むずかしい)」の3つから選択できます。

プレイ画面はこんな感じ!(おお!)

(準備運動してるのかな…?かわいい🍎)

左上から、「解説文」が読めます。(このキャラは、アーサーくんというみたいです。笑)

左下は、コードを記述する「入力画面

右側が、実行結果を表示する「出力画面」となっています!(ふむふむ…。)

解説文を読んでみると、レベル1では「justify-content」プロパティを使用するようです。

コードを記述し、勇者をりんご🍎の位置まで移動させます。(よーし!)

どうすればいいかわからない方は、MDN『justify-content』も参考にすると良いでしょう!

justify-content - CSS: カスケーディングスタイルシート | MDN
CSS の justify-content プロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

今回は、値を「justify-content: center;」とし、画面中央に移動するようにしました。(なるほど💡)

コードが記述できたら、「Check Anser」ボタンを押して、回答をチェック!

無事に「レベル1」クリアできました〜(パチパチ👏)

子供から大人まで!プログラミング学習教材【CodeMonkey(コードモンキー)】とは?
みなさんこんにちは!おさかなです!今回は「CodeMonkey(コードモンキー)」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・プログラミング教材を探している方・子供にプログラミングを学...

(こまめに休憩💧)

問題を進めよう!

Next Level」を押すと、次の問題へ進めます!(ゴー🚩)

今度は、にんじん🥕の位置まで移動させましょう!

レベル1とは違い、にんじんは右端に置かれているので「flex-end;」という値を使用すればOKです!(わーい)

さらにレベルが上がると、アーサーの友達・魔法使いのマリリンが登場!(かわいい🎃)

少し難易度が上がり、それぞれのキャラクターが違うアイテム上にくるように、移動します。

(チーズどこにあるんだろうって思ってたら、勇者の後ろにあった。笑)

先ほどのように「flex-end;」を使用した場合、魔法使いのみが正解になり、勇者はチーズから離れてしまいます……💦

そこで横並びの要素を、両端揃えで均等に配置できるspace-between;」という値を使います。(できた〜🍖)

レベル3」もクリアです!
キャラクター数が増えると、一見複雑に見えますが、焦らず対処しましょう!

レベル4」はこんな感じ。

要素の外側に、余白を入れるspace-around;」を記述すると…無事にできました!(いいね👍)

レベル5」でも、「space-around;」が使えそうですが……実は微妙にズレてしまいます。(そんなあ〜)

ここでは、すべての余白を均等にするspace-evenly;」という値が、ベストです!

(いい感じ🌱)

レベル6からは、ニンジャも増えて3人になりました!(すごい!)

(攻撃してる〜かわいい。笑)

ここからは、要素を上下に移動させるalign-items」というプロパティを使用します。(はい!)

MDNもヒントになるので、ぜひご活用ください!

align-items - CSS: カスケーディングスタイルシート | MDN
CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。

justify-content」と「align-items」を組み合わせる問題も、ありました〜!(経験値アップ🏠)

レベルがあがると、敵モンスター・ステージなどの種類も増えます!(おー!)
こちらは「flex-direction」プロパティの問題。

flex-direction - CSS: カスケーディングスタイルシート | MDN
flex-direction は CSS のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。

column;」という値を指定すると、いい感じに敵を攻撃できました!(お宝くれええ💎)

このあたりから、少し複雑になってきます。
どのキャラが、どの敵を倒すかは「解説文」に記載されているので、よく確認しておきましょう!

(ボスっぽいヤツ出てきたな。笑)

みなさんも、アドベンチャーゲームで遊びながら「FlexBox」の使い方をマスターしてみませんか?(お疲れ様です☕)

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ | 谷 拓樹 | 工学 | Kindleストア | Amazon
Amazonで谷 拓樹のWeb制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけ...
おさかな
おさかな

おさかなは、スナイパーで参戦する!

ナビまる
ナビまる

はいはい。笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

類似サイトはこちら

【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?
みなさんこんにちは!おさかなです!今回は「FLEXBOX FROGGY」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました