ゲーム感覚でCSS Grid Layoutを学べるサイト「Grid Garden」

ゲーム感覚でCSS Grid Layoutを学べるサイト「Grid Garden」

カエルを移動させてゲーム感覚でFlexboxについて学べるサイト「Flexbox Froggy」の作者の方が、今度はCSS Grid Layoutを学べるサイトとして「Grid Garden」を公開していたのでご紹介します。

Grid Garden

サイトは上のキャプチャのようになっており、ページ左側に問題やエディタが、右側には人参や水を表すイメージなどが表示されています。
サイト名にもあるようにこの「Grid Garden」は庭がテーマになっており、CSS Grid Layoutを用いて人参に水をあげたり雑草を退治することで、基本的な使い方やプロパティについて学ぶことができます。
文章がすべて英語なので少し抵抗がある人もいるかもしれませんが、翻訳ツールなどを利用すれば大体の内容はわかると思います。

問題は全28問

問題は全28問で、タイトルの右にある初期ページでは「Level 1 of 28」と表示されている部分をクリックすることで問題ナンバー一覧が表示され、ナンバーを選ぶことで挑戦したい問題を任意で選択できます。
また、正解していくことでこのナンバー一覧がグリーンに塗られていくので、現在どれが正解済みなのかも確認できます。

しっかり勉強するならもっと詳細な説明がされている文書やブログなどに目を通したり、やはり実際に自分でいろいろ試してみるのが一番だと思いますが、とりあえずざっくりとどんなことができるのか知りたいときや逆にある程度理解した後にヒントを見ずに挑戦してどれくらい身についたかを試したりするのに便利そうです。

Back to Top

ゲーム感覚でCSS Grid Layoutを学べるサイト「Grid Garden」

ゲーム感覚でCSS Grid Layoutを学べるサイト「Grid Garden」

/ Services & Resource

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。