みなさんこんにちは！おさかなです！
今回は「FLEXBOX FROGGY」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・FlexBoxをマスターしたい方
・Webサイト作成・Webデザインに携わっている方
・CSS3を学習中の方
「FLEXBOX FROGGY」って何？
「FLEXBOX FROGGY」とは、CSS3のレイアウトモード「FlexBox」を、ゲーム感覚で学べるサイトのことです。全部で24レベル用意されており、カエルを移動させながらFlexBoxをマスターしていきます！(面白い！🐸)
実際に使ってみよう！
それでは早速サイトにアクセスしましょう！
レベル1では「justify-content」を使って、カエルを葉っぱの位置まで移動するという課題になっています。(わくわく…！)
操作説明
左側が、コードの「入力画面」になります。(ふむふむ…。)
右側の、カエルがいる場所が「出力画面」です！(ケロ🐸)
レベル1では、justify-contentの値についての解説文もあります。(助かる〜)
既に「display: flex;」が記述されているため、「jusify-content: flex-end;」と追加することで、カエルを葉っぱの上に乗せられます。(わーい✨)
「次へ」ボタンを押して、次の課題へ進めましょう！
こちらはレベル2の課題です。カエルが2匹に増えました〜！(おお！)
先ほどとは、葉っぱの位置が違うので、値を「center」とすればOKです。
ちなみに、次の課題へ進むときにカエルが動きます…！(かわいい。笑)
(こまめに休憩💧)
課題にチャレンジ！
さてレベル3になると、カエルが3匹に増えます！笑(わあ！)
ここから「値」の解説文がなくなるので、自力で解いていきましょう！(よしっ！)
レベル3では、アイテム周辺の余白を均等にする「space-around」を使いました。
レベル3、4は、一見似たような課題に見えるのですが、若干異なります。
レベル3では「space-around」を用いたのですが、これをレベル4で使用してもクリア出来ません…💦
一方レベル4では「space-between」を使い、あくまでアイテム間の余白のみにフォーカスしている点が異なります。ポイントは、左右の余白は狭くなっている点です。
レベル5からは「align-items」プロパティを使って、移動範囲を広げていきます。
「align-items: flex-end;」とすると、カエルが下の方へ移動しました！(いいね)
レベル6では「justify-content」と「align-items」の合わせ技を使います！(本格的になってきたー！)
まずは「justify-content」で、カエルくんを中央へ…。(こっちだよー✨)
続いて「align-items」で、真ん中へ移動させれば…クリアです！(やった〜！)
こんな感じで遊びながら「FlexBox」をマスターできるので、ぜひ試してみてください🍵
（葉っぱにカエルが）被ってんじゃねぇ！
落ち着け！輪唱だ！（ポプ○ピ…？笑）
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
