仮想庭園ゲームで学ぶCSS Grid

 (cssgridgarden.com)
5 ポイント 投稿者 GN⁺ 2024-06-04 | 1件のコメント | WhatsAppで共有
  • Grid Gardenは、CSSコードを書いてニンジン畑に水をやるゲーム型学習ツールで、CSS Gridレイアウトを段階的に練習できる
  • 最初のステップでは、ニンジンのある領域にだけ水が届くように、grid-column-startプロパティで開始列を指定する
  • grid-column-start: 3; は、左から3本目の縦グリッド線から水やり領域を開始することを意味する
  • 例の庭園は、display: grid、grid-template-columns、grid-template-rowsで構成された5x5グリッドで、各行と各列は20%ずつに分かれている
  • 全体は28レベルで構成されており、さらにCSSを学びたいなら、Flexbox FroggyとAnchoreumへ続けて学習できる

CSS Gridをゲームのルールとして身につける方法

  • Grid Gardenは、CSSコードを入力してニンジン畑を育てるゲーム
  • プレイヤーは、ニンジンのある領域にだけ水をやるようにCSS Gridプロパティを調整する
  • 最初のレベルでは、grid-column-startで水が始まる列の位置を指定する

最初のレベル: grid-column-startと5x5の庭園

  • grid-column-start: 3; は、グリッドの左から3本目の縦の境界線から水やり領域を開始する
  • 例のコードの#gardenはCSS Gridコンテナとして設定されている
    • display: grid;
    • grid-template-columns: 20% 20% 20% 20% 20%;
    • grid-template-rows: 20% 20% 20% 20% 20%;
  • この設定により、列と行がそれぞれ20%ずつに分かれた5x5グリッドが作られる

レベル構成と続けて試せるゲーム

  • 画面には28レベルのうちレベル1が表示される
  • さらにCSSを学べるゲームとして、Flexbox FroggyとAnchoreumも案内されている

関連記事

1件のコメント

 
GN⁺ 2024-06-04
Hacker News のコメント

  • Rachel Andrews のこのシリーズは、いつも優れた学習資料だと感じていた: https://www.smashingmagazine.com/2020/01/understanding-css-g...
    バックエンドをやる立場から見ても、モダンな UI アプリを軽くシンプルに作るためのしっかりした基盤を与えてくれた。
    Bootstrap も Tailwind も必要なかった。

    • Bootstrap は CSS をよく知らなくても簡単なものなら持ちこたえられるように CSS を抽象化してくれるが、Tailwind は単にトークン化された CSS に近い。
      CSS を知らずに Tailwind を使うことはできず、使う過程で CSS を学ぶことになる。
      だからむしろ、かなり軽くシンプルだと感じる。
    • Jen Simmons の Layout Land 動画シリーズもおすすめ: https://www.youtube.com/layoutland
    • Bootstrap はそもそも CSS Grid や Flexbox を意識したくないときに使うものに近い。
      一方で Tailwind はその部分を代わりにやってはくれない。
      Grid や Flexbox を知らないと、Tailwind でも素の CSS と同じくらい苦労することがある。

  • このゲームはかなりよくできていて面白いが、「実際にどう動くのか」に集中するより、値をあれこれ試して今の問題だけを解く誘惑が大きい。
    より深い理解につなげるには、問題を解く自由度はもっと与えつつ、2〜3回以上試行したら小さなペナルティを与えるような方法もありそうだ。

    • フロントエンドのコードを書く立場からすると、特に CSS は常に試行錯誤で、言われているように総当たりに近いことも多い。
      似た問題を叩きながら学んだことを活用し、できるまでいじってみなければならない瞬間がある。
    • 自制心の問題をゲームのせいにはできない。

  • 雑多なメモをいくつか:

    1. 良い点: 答えを絶対位置で検証している。
      そのため、有効な答えであればグリッドではない方法まで含めてレベルをクリアできる。
    2. 良くない点: 試行のたびに Google Analytics を送っている。
    • 1 については、最初の課題の堅牢な解法が position: relative; left: 31.4em; であることには、みんな同意するだろう。

  • 以前勤めていたところで、毎週30分ほどチームとショー・アンド・テルをしていたが、ある週にこれを持ってきて、コーディングをしない人たちに答えを出してもらった。
    どこまで行けるのかを見るのは興味深く、すぐ理解する人もいれば、かなり苦戦する人もいた。
    全体的にはみんな気に入っていて、一生コードを書くことはないであろう人たちに基本的なプログラミング感覚を身につけてもらう良い方法だったと思う。
    数年後にも同僚たちが「君が一日中やっているのって、こういうことなの？」みたいに話題にすることがあったが、自分の仕事の中では一番簡単な部分なのに魔法使いのように見られていて面白かった。
    それでも実際に少しやってみたおかげで、仕事をより尊重してくれるようになった気がしてよかった。

  • Flexbox が CSS の勢力図を変えたと思っていたら、その次に Grid が出てきて、本当に驚くほど予測可能だった。
    今の CSS に残っている苦痛は、「兄弟要素が使っていない残りの空間をあるコンポーネントが占有し、その子要素の一つも自分の兄弟が使っていないものを全部占有し、空間が足りなくなったらスクロールオーバーフローになるべき」といった奇妙なケースだ。
    Flexbox と Grid の間の奇妙な相互作用や、サイズ算定レイアウトの優先順位が絡む例がいくつもあり、まだ完全には理解できていない。
    たいていは自分の問題かもしれないが、Flexbox や Grid そのものとは違って、いまだに直感的ではないと感じる。

  • 一瞬 https://csszengarden.com/pages/about/ の話かと思った。
    昔は CSS を学び、デザインのインスピレーションを得るための驚くべき資料だった。

    • あの時代はいまでもWeb 開発の黄金期だったと思っている。
      Web 標準運動の成果が現れ始めていた時期だった。
      残念ながらその後 React がやって来て、良いものが窓の外へ投げ捨てられた。
      タグスープも node_modules の奥深くに埋まっていれば、食べられるようになるらしい。

  • 以前の大きな議論をいくつか:
    2019: https://news.ycombinator.com/item?id=21050501
    2018: https://news.ycombinator.com/item?id=18753358
    2017: https://news.ycombinator.com/item?id=14041367

  • このゲームと Flexbox Froggy は、CSS レイアウトに楽しく入門するのに向いている。

    • Web サイトは Flexbox Froggy にリンクしているものの、アカウント登録が必要なリンクを経由する。
      直接アクセスするには https://flexboxfroggy.com/ に行けばよい。

  • 作業中の小さくシンプルな Web フロントエンドの問題に対して、良い解法を見つける助けになることを期待していた。
    ところが最初の10レベルを終えたら、CSS がさらに嫌いになった。

  • CSS Grid が嫌いな理由は、HTML の意味構造をほとんど奪ってしまうからだ。
    Flexbox では少なくとも HTML ツリーがページ上の何らかの構造に対応しているが、CSS Grid を使うとこんなふうに見える。
    <-! random amount of divs without classnames -->
    そうなると、ページで何が起きているのかを理解するには、突然 CSS と照合しなければならなくなる。
    非常に効果的ではあるが、見た目はひどい。

    • 別の話題ではあるが、HTML と CSS の間のすべての関係を理解して手動で記号を照合しなくても、視覚的に操作できる IDE があれば解決できるかもしれない。