カエルのゲームでFlexboxを学べるサイト「Flexbox Froggy」

 
カエルを指定の葉っぱに移動させることでFlexboxを学べる学習サイト「Flexbox Froggy」の紹介です。問題はレベル24まで出題されヒントを頼りにCSSを埋めていきます。これからFlexboxを学びたい方にオススメのサイトです。

Flexbox Froggy

短時間で制覇できるので時間の空いてる時に試してみてはいかがでしょうか。以上、ゲーム感覚でCSSのFlexboxのプロパティを学べるサイト「Flexbox Froggy」の紹介でした。



  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • CSSで実装するローディングアニメーション「Single Element CSS Spinners」
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
RELATED POSTS
  • スマホUIのアニメーションを確認できるサイト「appealing」
  • フォント名から使用しているサイトを調べられる「FontReach」
  • おすすめのホームページ作成サービス【無料版・有料版】
  • パーツを組み合わせ絵文字を作れるジェネレーター「Emoji Builder」
  • デバイスごとのスクリーンショットを一括生成「Responsive Screenshots」
  • iPhoneなどアプリのUIを集めたギャラリーサイト「Pttrns」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 導入しておきたいWordPressのおすすめプラグイン
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • CSSで作成する吹き出しとデザインのアイデア