[ペチパーの大冒険] ゲーム制作#024「HTML+CSSのゲームコンテンツ」

そもそも、Web系のプログラミングを学ぶ前に、HTMLとCSSはマスターしておかなければいけません。 この２つは、プログラムとは言わず、スクリプトという言い方をして、コーディングすることで、見た目を作り出す事ができる重要な要素でもあります。 正直、HTMLが理解できんて人、これから先のプログラミング学習が思いやられるので、しっかりとマークダウンやら、CSSの真髄を理解した方がいいですね。 コレを後回しにしたり、軽くみている人は、成長が足止めされてしまいますよ。 というワケで、HTML&CSSのゲームコンテンツを考案してみました。

1. HTML: 魔法の書を編纂せよ！📜

🌟 概要:

• ゲーム内で 「魔法の書（HTML）」 を作成するミッション。
• <h1>～<h6> タグを使ってタイトルをつける。
• <p> を使って呪文の説明を書く。
• <ul> や <ol> を使って、材料リストを整理する。

ミッション: 「伝説の魔法書のページを完成させよ！」

学ぶ内容: タグの構造・リスト・セマンティックなHTML

📝 例:

<h1>古代の炎の呪文</h1> <p>この呪文は、炎を操る力を持つ。</p> <h2>必要なアイテム</h2> <ul> <li>フェニックスの羽</li> <li>ドラゴンの炎石</li> <li>マナクリスタル</li> </ul> タグを理解して、上記のように、リストをいくつか作成してみましょう。

ヒントと学び

- ULタグをOLに変えるとどうなるか？ - H3やH4タグを使うとどうなるか？ - TABLEタグを使うとどんな見た目になるのか？

2. CSS: 魔法のローブをデザインせよ！👗

🌟 概要:

• プレイヤーが 魔法のローブ（キャラの服） をデザインするミッション。
• color や background-color を使って布の色を決める。
• border や box-shadow で装飾を加える。
• font-family を指定して魔法の文字スタイルを設定。

ミッション: 「自分だけの魔法のローブを作れ！」

学ぶ内容: CSSの基本プロパティ

📝 例:

.robe { background-color: darkblue; /* 魔法ローブの色 */ border: 2px solid gold; /* 豪華な縁取り */ color: white; /* 文字の色 */ font-family: "Papyrus", fantasy; /* 魔法の書体 */ box-shadow: 5px 5px 10px rgba(255, 215, 0, 0.5); /* 光のエフェクト */ }

ヒントと学び

- background-colorやborderなどの、プロパティの種類を調べてみる。 - .robeの箇所はセレクタというが、どういうHTMMLに適用されるのかを調べてみる。 - それぞれの設定の値を変えて、どのように変化するかを理解する。

3. HTML & CSS: 城のレイアウトを組み立てよ！🏰

🌟 概要:

• div や flexbox を使って、お城の構造を作る。
• position を駆使して塔や門を配置。
• grid を使って部屋を配置し、王座の位置を決める。

ミッション: 「王国の城を設計せよ！」

学ぶ内容: レイアウト & フレキシブルデザイン

📝 例:

.castle { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 左右に塔、中央に本館 */ gap: 10px; }

ヒントと学び

- 上記に適用できるHTMLを作ってみる。 - displayのflexとgridについて理解（学習）してみる。 - positionについて、理解する。

4. インタラクション: 魔法のスイッチを作れ！🔘

🌟 概要:

• hover を使ってボタンを光らせる。
• transition を使って魔法のエフェクトを加える。
• @keyframes でボタンを振動させる。

ミッション: 「魔法のスイッチを完成させよ！」

学ぶ内容: CSSアニメーション

📝 例:

.magic-button { background-color: purple; color: white; padding: 10px 20px; border-radius: 10px; transition: transform 0.3s; } .magic-button:hover { transform: scale(1.1); box-shadow: 0px 0px 15px violet; }

ヒントと学び

- 上記に適用できるHTMLを作ってみる。 - transitionを理解する。 - cssアニメーションは他にもanimationというプロパティもあるので、transitionとの違いを理解する。

あとがき

フツーにHTMLとCSSを学習しようと思ったら、テキストの文字列ばっかりの説明と、 コードと意味不明な説明文やら単語の羅列に心がへし折られてしまう人も多いでしょう。 ファンタジー世界の中に入って、単語も含めて、それぞれの深い内容を学習できるようにするのが目的です。 ちなみに、HTMLタグの属性と、CSSのプロパティなどは、最初は難しく聞こえるかもしれませんが、特性を覚えるとこの先の学習に大きく役に立つので、 この辺も要素にいれてゲームを作ってみたいと思います。 とりあえず、今回は、ゲーム作りのシナリオ草案の内容でした。