みなさんこんにちは！おさかなです！
今回は「Flex Box Adventure」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・FlexBoxの使い方をマスターしたい方
・HTML・CSSなどのWeb技術を学習中の方
・ justify-contentなど、基礎を練習したい方
「Flex Box Adventure」って何？
「Flex Box Adventure」とは、Webサイトの装飾で用いられる「FlexBox」が、ゲーム感覚で学べるサイトのことです。CSSコードを記述しながら、プレイヤーである勇者を操作。敵を倒して、お宝をゲットして、FlexBoxを使いこなせるようになりましょう！(おもしろい🎮)
実際に使ってみよう！
「Flex Box Adventure」の遊び方
それでは早速サイトにアクセスしましょう！
ページを少しスクロールして、「Start Adventure ＆ Learn Flexbox」をクリック！(えい！)
レベルは、「Easy（かんたん）」「Medium（ふつう）」「Hard（むずかしい）」の3つから選択できます。
プレイ画面はこんな感じ！(おお！)
(準備運動してるのかな…？かわいい🍎)
左上から、「解説文」が読めます。(このキャラは、アーサーくんというみたいです。笑)
左下は、コードを記述する「入力画面」
右側が、実行結果を表示する「出力画面」となっています！(ふむふむ…。)
解説文を読んでみると、レベル1では「justify-content」プロパティを使用するようです。
コードを記述し、勇者をりんご🍎の位置まで移動させます。(よーし！)
どうすればいいかわからない方は、MDN『justify-content』も参考にすると良いでしょう！
今回は、値を「justify-content: center;」とし、画面中央に移動するようにしました。(なるほど💡)
コードが記述できたら、「Check Anser」ボタンを押して、回答をチェック！
無事に「レベル1」クリアできました〜(パチパチ👏)
(こまめに休憩💧)
問題を進めよう！
「Next Level」を押すと、次の問題へ進めます！(ゴー🚩)
今度は、にんじん🥕の位置まで移動させましょう！
レベル1とは違い、にんじんは右端に置かれているので「flex-end;」という値を使用すればOKです！(わーい)
さらにレベルが上がると、アーサーの友達・魔法使いのマリリンが登場！(かわいい🎃)
少し難易度が上がり、それぞれのキャラクターが違うアイテム上にくるように、移動します。
(チーズどこにあるんだろうって思ってたら、勇者の後ろにあった。笑)
先ほどのように「flex-end;」を使用した場合、魔法使いのみが正解になり、勇者はチーズから離れてしまいます……💦
そこで横並びの要素を、両端揃えで均等に配置できる「space-between;」という値を使います。(できた〜🍖)
「レベル3」もクリアです！
キャラクター数が増えると、一見複雑に見えますが、焦らず対処しましょう！
「レベル4」はこんな感じ。
要素の外側に、余白を入れる「space-around;」を記述すると…無事にできました！(いいね👍)
「レベル5」でも、「space-around;」が使えそうですが……実は微妙にズレてしまいます。(そんなあ〜)
ここでは、すべての余白を均等にする「space-evenly;」という値が、ベストです！
(いい感じ🌱)
レベル6からは、ニンジャも増えて3人になりました！(すごい！)
(攻撃してる〜かわいい。笑)
ここからは、要素を上下に移動させる「align-items」というプロパティを使用します。(はい！)
↓MDNもヒントになるので、ぜひご活用ください！
「justify-content」と「align-items」を組み合わせる問題も、ありました〜！(経験値アップ🏠)
レベルがあがると、敵モンスター・ステージなどの種類も増えます！(おー！)
こちらは「flex-direction」プロパティの問題。
「column;」という値を指定すると、いい感じに敵を攻撃できました！(お宝くれええ💎)
このあたりから、少し複雑になってきます。
どのキャラが、どの敵を倒すかは「解説文」に記載されているので、よく確認しておきましょう！
(ボスっぽいヤツ出てきたな。笑)
みなさんも、アドベンチャーゲームで遊びながら「FlexBox」の使い方をマスターしてみませんか？(お疲れ様です☕)
おさかなは、スナイパーで参戦する！
はいはい。笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
↓類似サイトはこちら
