【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?

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

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

今回は「FLEXBOX FROGGY」について、書いていこうと思います!

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

想定読者
・FlexBoxをマスターしたい方
・Webサイト作成・Webデザインに携わっている方
・CSS3を学習中の方

「FLEXBOX FROGGY」って何?

FLEXBOX FROGGY」とは、CSS3のレイアウトモード「FlexBox」を、ゲーム感覚で学べるサイトのことです。全部で24レベル用意されており、カエルを移動させながらFlexBoxをマスターしていきます!(面白い!🐸)

Flexbox Froggy
A game for learning CSS flexbox
【きみとロボット展】現地レポート!
みなさんこんにちは!おさかなです!今回は「きみとロボット ニンゲンッテ、ナンダ?」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・きみとロボット展の現地レポートを見たい方・お台場・日本科学...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!
レベル1では「justify-content」を使って、カエルを葉っぱの位置まで移動するという課題になっています。(わくわく…!)

操作説明

左側が、コードの「入力画面」になります。(ふむふむ…。)

右側の、カエルがいる場所が「出力画面」です!(ケロ🐸)

レベル1では、justify-contentの値についての解説文もあります。(助かる〜)

既に「display: flex;」が記述されているため、「jusify-content: flex-end;」と追加することで、カエルを葉っぱの上に乗せられます。(わーい✨)

次へ」ボタンを押して、次の課題へ進めましょう!

こちらはレベル2の課題です。カエルが2匹に増えました〜!(おお!)

先ほどとは、葉っぱの位置が違うので、値を「center」とすればOKです。

ちなみに、次の課題へ進むときにカエルが動きます…!(かわいい。笑)

Webブラウザ上で【CSS】を試せるサイト!【CSS DESK】とは?
みなさんこんにちは!おさかなです!今回は「CSS DESK」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ブラウザ上でCSSを試したい方・CSSの挙動をチェックしたい方・HTML/CSS...

(こまめに休憩💧)

課題にチャレンジ!

さてレベル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」をマスターできるので、ぜひ試してみてください🍵

Amazon.co.jp: CSS設計完全ガイド ~詳細解説+実践的モジュール集 eBook : 半田 惇志: 本
Amazon.co.jp: CSS設計完全ガイド ~詳細解説+実践的モジュール集 eBook : 半田 惇志: 本
おさかな
おさかな

(葉っぱにカエルが)被ってんじゃねぇ!

ナビまる
ナビまる

落ち着け!輪唱だ!(ポプ○ピ…?笑)

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

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

【商用利用OK】Adobeでも使える、フリー素材集【Icon-rainbow】とは?
みなさんこんにちは!おさかなです!今回は「Icon-rainbow」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・アイコン画像を探している方・デザインソフト(Illustrator・Ph...
おさかな

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

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

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