みなさんこんにちは!おさかなです!
今回は「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」をマスターできるので、ぜひ試してみてください🍵
(葉っぱにカエルが)被ってんじゃねぇ!
落ち着け!輪唱だ!(ポプ○ピ…?笑)
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!