CSSを楽しくマスターできる！おすすめ学習ゲーム6選

CSSの学習は挫折しがちですが、退屈である必要はありません。プログラミング学習の面白いところは、コーディングが得意な人が「他の人にコーディングを教えるゲーム」を作れるスキルも併せ持っている点です。基本的なCSSの習得には練習と試行錯誤に勝るものはありませんが、ゲームは確かな助けになります。特にgridやflexboxといった新しいレイアウトモデルは、手を動かしながら学ぶスタイルと相性抜群です。

ここでは、CSSを効率よくマスターできるおすすめゲームを紹介します。

1. CSS Diner：CSSセレクター

「要素、クラス、id…あとは疑似クラスくらい？」と思っていませんか？実は、要素を選択する方法は想像以上に豊富に用意されています。CSS Dinerは、CSSを使って食べ物を指定していく形式で、さまざまなセレクターの使い方を教えてくれる無料ゲームです。一部のステージは少し難しく感じるかもしれませんが、それがコーディングというもの。検索して調べるのは決して恥ずかしいことではありません。

2. Flexbox Zombies

Flexbox Zombiesは驚くほど完成度の高いゲーム兼講座で、直感的かつ魅力的なゲームプレイを通してflexboxの使い方を教えてくれます。内容は主に、flexboxのコードで操作する武器を使ってゾンビを倒すアクション。ストーリー、クールなグラフィック、ゾンビ討伐アクション付きの複数レベルを通じて、基礎から応用まで段階的に学べます。CSSを勉強していることを忘れてしまうほど没入できるでしょう。

flexbox自体、行や列といった一次元方向のレスポンシブなコンテンツ配置に最適な優れた技術です。フロントエンド開発に携わるなら、必ず習得しておきたいスキルと言えます。「いつか勉強しよう」と先延ばしにしていた人にとっても、Flexbox Zombiesは「本当に何かを学べるゲーム」を遊ぶ絶好の口実になるはずです。すべての教育がこのような形だったらいいのにと思いますよね？

また、同じ制作者はCSS Grid向けのゲーム講座「Grid Critters」もリリースしています。こちらは有料ですが、Flexbox Zombiesが気に入ったなら課金する価値は十分にあるでしょう。

3. Grid Garden

個人的にはflexboxも十分優秀ですが、その真価を発揮するのは一次元（行または列）のレイアウトです。規模の大きいプロジェクトやテンプレートを作る際には、grid（場合によってはグリッドセル内にflexboxコンテナを組み合わせる）へ切り替えるのがおすすめです。一度理解できれば整然として非常に扱いやすいのですが、最初は多少の学習曲線があります。そこで力になってくれるのがGrid Garden（そして前述のGrid Critters）です。

Grid Gardenは、ニンジンに水をやり、雑草に除草剤を撒くために庭のレイアウトをCSS Gridで組むという無料ゲームです。実際、gridはこの種のタスクにぴったり！遊び終わる頃には、グリッドポジショニングの基本をしっかり身につけられ、自分のサイト制作にもすぐ活かせるでしょう。

4. Flexbox Defense

flexboxの基本は理解していても、「justify」と「align」の違いがごっちゃになっていませんか？Flexbox Defenseは、タワーディフェンスゲームの形式を借りたflexboxチュートリアルです。justify-contentとalign-selfを正しく使いこなせなければ防衛失敗――ただし、何度でもリトライできます。正解がひとつしかないタイプのゲームが苦手な人にもぴったりで、タワーを好きな場所に自由に配置し、成否は自分の手で確かめられます。

5. Flexbox Froggy

既存のflexboxチュートリアルを一気にこなすのも良いですが、記憶の定着のためには数日〜数週間に分けて少しずつ進める方が効果的です。Flexbox Froggyはその目的にぴったりのゲーム。ゼロからの学習には向きませんが、コマンドをうろ覚えにしているときに、数分でサッと一巡して復習できるのが魅力です。

6. CodePip Games

Grid GardenやFlexbox Froggyを試したことがあれば、CodePipの作品はすでに体験済みのはず。これらは同社が提供する無料ゲーム2つにすぎません。公式サイトでProアカウントに登録すると、CSSの総復習からJavaScriptまで、幅広いテーマの学習ゲームが追加で利用できるようになります。

どれほどのCSS力が身につくのか？

これらのゲームを一通り遊べば、特にflexboxなどの基本概念を効率よく学べます。しかし結局のところ、ゲームで教えてくれるのは「どんなコードを書けばよいか」までです。本当に使いこなせるようになりたいなら、あとは実際に手を動かすのみ。お気に入りのコードエディターを用意して、実現したいアイデアを見つけたら、どんどんコードをいじってみましょう！