HTMLとCSSが学べるアクションパズルゲーム「Super Markup Man」 
(出所:Roppy Chop Studios、以下同じ)
[画像のクリックで拡大表示]

 デタラメに書かれたWebページを、正しい状態に直していくアクションパズルゲームが「Super Markup Man」だ。Webページを記述する「HTML」や「CSS」を模したブロックを、プレイヤーが持ち運んで並び替える。徐々に複雑になる問題を解いていくと、基本的な構文が身に付く作りになっている。

タグを正しい順番に並び替えるのが目的。レベルが上がるにつれてタグの種類が増えていく。
[画像のクリックで拡大表示]

 問題数は、HTMLが50問、CSSが50問の計100問。対象ユーザーが「楽しくHTML/CSSを学びたい」という入門者層なため、難易度の上がり方はゆっくりだ。最初はテキストの装飾や改行で20レベルほど進み、そこでようやく画像タグが現れる。

 ただシンプルなタグを並び替える作業を繰り返すと、嫌でも頭に入ってくる。似たような問題を繰り返し解くという構成は、初学者の勉強法として有効な面はあるだろう。

5秒で分かる「Super Markup Man」
製品名Super Markup Man
ジャンルアクションパズル
概要Webの構造を記述する「HTML」のタグを正しい順番に並び替える。HTML編をクリアするとCSS編も学べる
学べるポイントHTMLタグの構造
CSSと見た目の関係
税込み価格398円(Steamの場合)

この先は会員の登録が必要です。今なら有料会員(月額プラン)登録で6月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら