こんにちは、「ぷろぐらの森」です🌱
今回は、初心者でも楽しく取り組める「かんたんなシューティングゲーム」の見た目基盤作成編です！
✔️ 対象：HTML・CSSの基礎を学んだ人
✔️ ゴール：ゲーム画面の「自機」「敵」「背景」などの見た目をHTML・CSSで作る
まだ基礎を見ていない方はこちらをチェック！
ぷろぐらの森
【超初心者向け】HTMLで自分のWebページを作る方法 – ぷろぐらの森
HTMLを使って自己紹介ページを作る方法を、プログラミング初心者や小学生にもわかりやすく解説！楽しくコーディング体験ができます。
ぷろぐらの森
CSSとは？HTMLの見た目を変えるしくみをやさしく解説 – ぷろぐらの森
CSSを使って自己紹介ページをカラフルに装飾する方法を初心者向けに解説！ CSSとは？HTMLの見た目を変えるしくみをやさしく解説
ぷろぐらの森
CSSアニメーション入門｜初心者向け動くWebページの作り方 ぷろぐらの森
HTMLとCSSで「動くページ」を作ってみよう！初心者向けに、CSSアニメーションの仕組みと実際の使い方をわかりやすく解説します。
目次
今回の記事の完成図はこちら！
🖼️ 1. ゲームの画面を設計しよう！
まずはゲームの基本的な構造を考えます。
- ゲーム画面（画面全体）
- 自機（プレイヤー）
- 敵（ターゲット）
- 弾（あとでJSで動かす）
HTMLでは以下のような構造になります👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シューティングゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameArea">
<div id="player"></div>
<div id="enemy"></div>
</div>
</body>
</html>🔍 ポイント解説
#gameAreaはゲーム全体の領域#playerが自機（自分で動かすキャラ）#enemyは敵キャラ（今回は固定）
🎨 2. CSSでデザインしてみよう！
次に、CSSで「見た目」を作ります。まずは背景と自機、敵を整えてみましょう。
/* style.css */
body {
margin: 0;
background-color: #000;
}
#gameArea {
width: 600px;
height: 400px;
background-color: #111;
border: 2px solid #fff;
margin: 30px auto;
position: relative;
overflow: hidden;
}
/* 自機 */
#player {
width: 40px;
height: 40px;
background-color: #00f;
position: absolute;
bottom: 10px;
left: 280px;
border-radius: 50%;
}
/* 敵 */
#enemy {
width: 40px;
height: 40px;
background-color: #f00;
position: absolute;
top: 10px;
left: 280px;
border-radius: 50%;
}🔍 ポイント解説
#playerは青い丸（弾を撃つキャラ）として画面の下に固定。#enemyは赤い丸で、上部に配置（敵役として表示）。
💡 3. 表示の確認方法
ブラウザで index.html を開いて、次のような表示になっていればOKです。
- 黒い背景
- 中央に赤い敵キャラ
- その下に青い自機キャラ
🟥 ← 敵
⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛
🟦 ← 自機💬 よくあるミス
style.cssのパスが間違っている →<link>タグをチェック！position: absoluteを忘れる → 画面内に表示されない！
✅ 4. おまけ：背景に星をちりばめよう！
CSSで簡単な星空っぽい背景も作れます。
#gameArea {
background: radial-gradient(#444 1px, #000 1px);
background-size: 20px 20px;
}これで「宇宙っぽさ」がぐっとアップ！
📚 次回予告：動かしてみよう！
次回は「動き編」として、JavaScriptで以下を実装します👇
- 自機の左右移動（←→キー）
- 弾を出す（スペースキー）
ゲームらしくなってくるので、ぜひ次回もお楽しみに！
✅ まとめ
今回の学び：
- HTMLでゲームの骨組みを作成
- CSSで自機・敵・背景をスタイリング
- 表示位置は
position: absoluteで調整
HTMLとCSSだけでも、ゲームの「見た目」はしっかり作れます。
次回は JavaScript を使って、ついに動かしていきますよ！
コメント