仮想ガーデンゲームで学ぶ CSS Grid

グリッドガーデン紹介

グリッドガーデンとは？

• グリッドガーデンは、CSS グリッドレイアウトを学習するためのゲームです。
• ユーザーは grid-column-start プロパティを使って、ニンジンのある領域に水をやる形でゲームを進めます。

サンプルコードの説明

• grid-column-start: 3; は、グリッドの3本目の縦線から始まる領域に水をやることを意味します。
• グリッドの各列と行は、それぞれ 20% を占めるように設定されています。

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

追加の学習資料

• Flexbox Froggy を通じて CSS Flexbox を学習できます。

GN⁺の意見

• 教育的価値: グリッドガーデンは、ゲームを通じて CSS グリッドレイアウトを楽しく学べる優れたツールです。
• 実習の重要性: このようなインタラクティブな学習ツールは、理論よりも実習を通じてより効果的に学べるようにしてくれます。
• 技術の拡張性: CSS グリッドと Flexbox は現代のウェブデザインにおいて重要な技術なので、しっかり理解しておくことが大切です。
• 他のツールのおすすめ: CSS グリッド以外にも、CSS Diner のような他の学習ツールも活用してみることをおすすめします。
• 注意点: ゲームを通じて基本概念を身につけた後は、実際のプロジェクトでの適用方法を学ぶことも重要です。

[GN⁺]

Hacker Newsのコメント

• Rachel Andrewsのシリーズは、バックエンド開発者にとってもモダンなUIアプリを構築するうえで大いに役立つ。
• チームで30分のショーアンドテルを行い、非開発者も参加して、基本的なプログラミングスキルを身につけるのに有益だった。
• ゲームは楽しいが、問題解決だけに集中しがちで、深い理解の妨げになることがある。解決策として、試行回数にペナルティを設ける案が出ている。
• このゲームの長所は絶対位置を確認して答えを検証できること、短所は試行のたびにGoogle Analyticsを送信すること。
• CSS Zen Gardenは、以前CSSを学びデザインの着想を得るための素晴らしい情報源だった。
• このゲームとFlexbox Froggyは、CSSレイアウトを楽しく学ぶのに向いている。
• 最初の10レベルをプレイしたあと、CSSへの不満がさらに大きくなった。
• 以前の大きな議論へのリンクが共有されている。
• Flexbox FroggyのほうがGrid Gardenより役に立った。CSS Gridはいまひとつ理解できない。
• 最近Subgridが含まれるようになったのか気になった。