みなさんこんにちは!おさかなです!
今回は「Flex Box Adventure」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・FlexBoxの使い方をマスターしたい方
・HTML・CSSなどのWeb技術を学習中の方
・ justify-contentなど、基礎を練習したい方
「Flex Box Adventure」って何?
「Flex Box Adventure」とは、Webサイトの装飾で用いられる「FlexBox」が、ゲーム感覚で学べるサイトのことです。CSSコードを記述しながら、プレイヤーである勇者を操作。敵を倒して、お宝をゲットして、FlexBoxを使いこなせるようになりましょう!(おもしろい🎮)
![](https://osakanav.com/wp-content/uploads/2022/12/can-i-use-top-160x90.png)
実際に使ってみよう!
「Flex Box Adventure」の遊び方
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-1.png)
ページを少しスクロールして、「Start Adventure & Learn Flexbox」をクリック!(えい!)
![](https://osakanav.com/wp-content/uploads/2023/01/Gqt3kczvUrAmaZo1672889047_1672889059.png)
レベルは、「Easy(かんたん)」「Medium(ふつう)」「Hard(むずかしい)」の3つから選択できます。
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-lv-1.png)
プレイ画面はこんな感じ!(おお!)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-play-1.png)
(準備運動してるのかな…?かわいい🍎)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy.gif)
左上から、「解説文」が読めます。(このキャラは、アーサーくんというみたいです。笑)
![](https://osakanav.com/wp-content/uploads/2023/01/mo9R1noa2Ij2V281672889213_1672889225.png)
左下は、コードを記述する「入力画面」
![](https://osakanav.com/wp-content/uploads/2023/01/mo9R1noa2Ij2V281672889213_1672889262.png)
右側が、実行結果を表示する「出力画面」となっています!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/mo9R1noa2Ij2V281672889213_1672889291.png)
解説文を読んでみると、レベル1では「justify-content」プロパティを使用するようです。
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-justify-1.png)
コードを記述し、勇者をりんご🍎の位置まで移動させます。(よーし!)
![](https://osakanav.com/wp-content/uploads/2023/01/mo9R1noa2Ij2V281672889213_1672889873.png)
どうすればいいかわからない方は、MDN『justify-content』も参考にすると良いでしょう!
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
今回は、値を「justify-content: center;」とし、画面中央に移動するようにしました。(なるほど💡)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-center.gif)
コードが記述できたら、「Check Anser」ボタンを押して、回答をチェック!
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-check.png)
無事に「レベル1」クリアできました〜(パチパチ👏)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-done-1.png)
![](https://osakanav.com/wp-content/uploads/2021/05/codemonkey-top-160x90.png)
(こまめに休憩💧)
問題を進めよう!
「Next Level」を押すと、次の問題へ進めます!(ゴー🚩)
![](https://osakanav.com/wp-content/uploads/2023/01/odcfj3BFxS6IEV91672894446_1672894457.png)
今度は、にんじん🥕の位置まで移動させましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-ninjin-1.png)
レベル1とは違い、にんじんは右端に置かれているので「flex-end;」という値を使用すればOKです!(わーい)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-lv2-1.png)
さらにレベルが上がると、アーサーの友達・魔法使いのマリリンが登場!(かわいい🎃)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-lv3-1.png)
少し難易度が上がり、それぞれのキャラクターが違うアイテム上にくるように、移動します。
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-goals-1.png)
(チーズどこにあるんだろうって思ってたら、勇者の後ろにあった。笑)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-cheese.gif)
先ほどのように「flex-end;」を使用した場合、魔法使いのみが正解になり、勇者はチーズから離れてしまいます……💦
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-nogodd-1.png)
そこで横並びの要素を、両端揃えで均等に配置できる「space-between;」という値を使います。(できた〜🍖)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-bw-1.png)
「レベル3」もクリアです!
キャラクター数が増えると、一見複雑に見えますが、焦らず対処しましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-maririn-1.png)
「レベル4」はこんな感じ。
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-lv4-1.png)
要素の外側に、余白を入れる「space-around;」を記述すると…無事にできました!(いいね👍)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-around-1.png)
「レベル5」でも、「space-around;」が使えそうですが……実は微妙にズレてしまいます。(そんなあ〜)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-lv5-1.png)
ここでは、すべての余白を均等にする「space-evenly;」という値が、ベストです!
![](https://osakanav.com/wp-content/uploads/2023/01/oSctnYi3iJT6CaN1672895778_1672895794.png)
(いい感じ🌱)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-even-1.png)
レベル6からは、ニンジャも増えて3人になりました!(すごい!)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-ninja-1.png)
(攻撃してる〜かわいい。笑)
![](https://osakanav.com/wp-content/uploads/2023/01/flex3.gif)
ここからは、要素を上下に移動させる「align-items」というプロパティを使用します。(はい!)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-align-1.png)
↓MDNもヒントになるので、ぜひご活用ください!
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
「justify-content」と「align-items」を組み合わせる問題も、ありました〜!(経験値アップ🏠)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-lv8.gif)
レベルがあがると、敵モンスター・ステージなどの種類も増えます!(おー!)
こちらは「flex-direction」プロパティの問題。
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-suna-1.png)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
「column;」という値を指定すると、いい感じに敵を攻撃できました!(お宝くれええ💎)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-suna1-1.png)
このあたりから、少し複雑になってきます。
どのキャラが、どの敵を倒すかは「解説文」に記載されているので、よく確認しておきましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-battle.gif)
(ボスっぽいヤツ出てきたな。笑)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-boss-1.png)
みなさんも、アドベンチャーゲームで遊びながら「FlexBox」の使い方をマスターしてみませんか?(お疲れ様です☕)
![](https://osakanav.com/wp-content/uploads/2023/01/codingfantasy-bouken.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかなは、スナイパーで参戦する!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
はいはい。笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
↓類似サイトはこちら
![](https://osakanav.com/wp-content/uploads/2022/10/flexboxfroggy-top-160x90.png)