CSSの使い方をちゃんと覚えるというのは大変です。しかも日々進化しており、新しいプロパティが追加されたりします。もちろんすぐに汎用的に使える訳ではありませんが、先進的なブラウザからどんどん導入が進んでいきます。放置しておくとあっという間に時代に取り残されてしまうでしょう。 今回紹介するGrid GardenはCSS Grid Layout Moduleについてゲームを通じて学習できるソフトウェアです。

Grid Gardenの使い方

クイズが出ていますので、それを達成できるようなCSSグリッドを記述します。

負の数値もサポートしていることを示す例。

イラストが可愛らしいですし、すぐに覚えられます。

Grid Gardenではマス目に記述されたイラストをお題に合うように記述していきます。最初は分かりづらいかも知れませんが、慣れてくればすぐに書けるようになるでしょう。

Grid GardenはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。

Grid Garden - A game for learning CSS grid thomaspark/gridgarden: A game for learning CSS grid layout