Flexbox Froggy
(flexboxfroggy.com)- CSS flexboxを直接入力してカエルをスイレンの葉へ送るインタラクティブ学習ゲームで、整列プロパティの効果を画面上でその場で確認できる
- 最初のレベルは
#pondにdisplay: flex;が設定された状態で、justify-contentによって横方向の整列を変える方式 justify-contentはflex-start、flex-end、center、space-between、space-aroundといった値で、コンテナ内の項目の配置を調整する- たとえば
justify-content: flex-end;を入力するとカエルが右側のスイレンの葉へ移動し、プロパティと結果を結び付けて確認できる - 全体は24レベルで構成され、日本語を含む複数言語と色覚補正モードを提供する
CSS flexboxをゲームで身につける方法
- Flexbox Froggy は Froggy と仲間たちを目標位置へ送りながら CSS flexbox を学ぶゲーム
- 画面の
#pondCSSコード編集エリアにプロパティを書くと、カエルの位置が変わる - 最初のレベルは、カエルを右側のスイレンの葉へ送るために
justify-contentを使う課題 - 基本コードには次の構造が表示される
#pond {display: flex;}
justify-content で学ぶ横方向の整列
justify-contentは項目を横方向に整列するプロパティ- 使用できる値は次のとおり
flex-start: 項目をコンテナの左側に整列するflex-end: 項目をコンテナの右側に整列するcenter: 項目をコンテナの中央に整列するspace-between: 項目の間に同じ間隔を置くspace-around: 項目の周囲に同じ間隔を置く
justify-content: flex-end;を使うとカエルが右へ移動し、プロパティ値と配置結果をその場で比較できる
構成と関連学習資料
- ゲームは Level 1 of 24 と表示され、言語設定には日本語を含む複数の言語がある
- CSS をさらに学ぶための関連ゲームとして Grid Garden と Anchoreum がリンクされている
1件のコメント
Hacker News の意見
CSSを学ぶのに適したほかのゲーム形式の教材もある
https://cssgridgarden.com/ — Grid版のFroggyに近い
https://cssbattle.dev/ — さまざまな課題を解くプラットフォームで、コミュニティも大きい
https://flukeout.github.io/ — CSSセレクタを学べる
https://css-animations.io/ — CSSアニメーションを練習できる
https://css-tricks.com/understanding-flex-grow-flex-shrink-a... — flex-grow、flex-shrink、flex-basisを説明している
CSSを何年扱っていても、align-contentとalign-items のようなflex関連プロパティは毎回混乱する
USBケーブルをいつも逆向きに挿してしまうような感じで、alignとjustifyも同じだ
CSS Gridも本当にすごい。今では優れたレイアウトの選択肢があまりに増えて、かなり恵まれていると言える
チートシートも両方印刷して机の上に置いており、本当に価値のある資料だ
[0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[1] https://css-tricks.com/snippets/css/complete-guide-grid/
justify-は主軸、align-は交差軸に対応する-contentはgridトラックやflex-wrapコンテナの行に使い、-itemsは個々の子要素、つまり行やgridセル内の項目に使うそれでも名前はもっと明確であってほしい
flex-direction全般に対して一般化しようとしたのだと思う。そのためflex-alignのようなプロパティが親の方向によって変わる構造になっている実際に方向を変えてその利点を大きく得るケースは非常にまれだ
それが唯一の理由なのかは分からないので悪い選択だったと断言はしないが、どちらがどちらか覚えられないのは自分も同じだ
軸を直接示すもっと良い名前か、プロパティが親の方向から独立していればよかったのにと思うが、それまではチートシートを使うしかない
ただ、頻繁に気にする必要がないので、そのせいで余計に記憶に残らないのかもしれない
こういうゲームで本当に多くのことを学んだ。Vim も https://vim-adventures.com/ で学び、今ではほとんどVimなしでは生きられないほどだ
過去のHN投稿:
https://news.ycombinator.com/item?id=30251054 2022年、317ポイント、コメント31件
https://news.ycombinator.com/item?id=22629903 2020年、27ポイント、コメント2件
https://news.ycombinator.com/item?id=21796926 2019年、2ポイント、コメント0件
https://news.ycombinator.com/item?id=18752031 2018年、3ポイント、コメント0件
https://news.ycombinator.com/item?id=18731852 2018年、6ポイント、コメント1件
https://news.ycombinator.com/item?id=15605783 2017年、4ポイント、コメント0件
https://news.ycombinator.com/item?id=14349739 2017年、3ポイント、コメント0件
https://news.ycombinator.com/item?id=10652909 2015年、315ポイント、コメント69件
素晴らしい。以前 flexbox を学んだときにこれを使った
同じ作者が作った https://codepip.com/games/grid-garden/ もあり、同じアプローチで CSS Grid を身につけられる
すでに学んだことのおかげで簡単に見える問題を、だんだん難しく解いていくことで、とても自然な学習経路ができるからのようだ
以前、CSS セレクタを学ぼうとしてこのゲームを楽しく遊んだ: https://flukeout.github.io/
Guess CSS にも Flexbox セクション があるが、CSS を書くことよりも読むことに重点が置かれている: https://www.guess-css.app/
positionは、自分が本当に何も理解していなかったのが明らかだった他の問題はずっと正解できたのに、position はずっと間違えた
非常に便利。私はいつも flexbox の 縦方向の整列 を結局検索してしまう
急いでいるときに flexbox の知識を素早く思い出す助けになるよう、カエルを 3x3 グリッドにドラッグ＆ドロップすると、それに対応する flexbox の CSS コードが出力される機能があるとよさそう
それでも、とても丁寧に作られたチュートリアルだ
こう言った理由は、個人的に新しい CSS 機能を追い続けるのを諦めたからだ。IE7 の時代から CSS を断続的に使ってきて、vendor prefix を手で書いていた時代や Chrome Canary が押し込んでいた新機能を経験した後では、CSS のコツを頭に入れ続けるエネルギーがない
ほとんどの UI では flexbox だけで十分で、基本的には stack/group や vbox/hbox のように、項目を縦・横に配置するためのツールだ
flexbox を学べばいい。CSS レイアウトに入ってきたものの中で最も有用で、本当にシンプルだ。間隔は
gap、配置は justify と align くらいなので、99% はそこで終わるFlexbox Froggy が好きだ。ひと世代の開発者全体がこのサイトで flexbox を学んだ と言ってもよさそうだ。自分もそうだった
その時点ですでに CSS を 15 年も使っていた
素晴らしい教育ツールだ
Josh Comeau の flexbox インタラクティブガイド も見る価値がある: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...
良い。Tailwind 版もあるといい