CSSで作る！ゲームの雰囲気【MM2025 開発記 # 4】

はじめに

この記事は 「MM2025 開発記」 シリーズ第4回です。

前回の記事ではどのようにindex.htmlを設計したかについて紹介しました。

今回はゲームデザインに大きく関係するCSSについて説明していきます。

CSSの役割

本作品では、

• レトロゲーム風フォント
• ボタン
• ローディング画面

などの要素をCSSで制御した。中でもレトロゲーム風という雰囲気を作るのに重要だった部分を抜粋して紹介していく。

フォント

今回の作品では以下の2つのフォントを使用した。スーパーファミコンなどのアクションゲームに出てくる文字のようにしたかったため、そのイメージに合うフォントを選んだ。
Press Start 2Pが最もイメージに合っているが、英語専用フォントのため、日本語部分（操作説明など）にはDotGothic16を設定した。

Press Start 2P

DotGothic16

リセットCSS

* {
    margin: 0;
    padding: 0;
}

表示崩れを防ぐため、最初に各ブラウザのデフォルトのCSSスタイルをリセットする。

※すべてのスタイルを自分で定義し直す必要が出てくる点に注意。

PRESS START / HOW TO PLAY ボタン設計

#startButton:hover {
  font-size: 53px;
  color: #bbb;
}

• ホバー時に文字サイズが拡大
• レトロゲーム風の「選択感」を演出
• あえて背景・枠線は使わず、文字だけで構成

HOW TO PLAY ボタンも同様の設計で、位置とサイズだけを変えている。

↑　PRESS START ホバー時

モーダルウィンドウ

.modal {
  display: none; /* 初期は非表示 */
  z-index: 100;

  /* ... 省略 ... */
  
  backdrop-filter: blur(2.5px);
}
.modal-content {
  /* ... 省略 ... */
}

• z-index: 100：ゲーム画面とのレイヤー分離
• backdrop-filter ：背景をぼかす

/* ドット風外枠を疑似要素で追加 */
.modal-content::before {
  content: "";
  position: absolute;
  top: -7px; left: -7px; right: -7px; bottom: -7px;
  border-radius: 36px 36px 28px 28px / 44px 44px 28px 28px;
  border: 0;
  pointer-events: none;
  z-index: 1;
  /* ドット線 */
  box-sizing: border-box;
  border: 4px dotted #00bcd4;
  opacity: 0.95;
}

• 疑似要素::beforeでレトロドット風の枠を追加
• pointer-events: none：クリックを邪魔しない

.close {
  /* ... 省略 ... */
}
.close:hover {
  color: #0097a7;
  transform: scale(1.2) rotate(8deg);
}

• ホバーで拡大＋少し回転

ホバーした時に動きをつけることで、直感的に操作しやすくしている。

ローディング画面とスピナー

ローディング画面

#loadingScreen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgb(255, 255, 255);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-family: "DotGothic16", sans-serif;
  color: #333;
}

#loadingScreen div {
  font-weight: bold;
}

• z-index: 9999：画面の最前面に表示

スピナー

.spinner-img {
  width: 128px;
  height: 128px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
  display: block;
}

@keyframes spin {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

• spin：回転アニメーション
• @keyframes：回転アニメーション（spin）の内容定義
• 0%→100%：開始から終了までに回転する角度を示す（0度→360度、つまり1回転する）

↑ ローディング画面の様子。

※ 本記事では解説に必要な部分のみを抜粋しています。
全体のコードは GitHubリポジトリ をご覧ください。

さいごに

今回の記事では、ゲームのCSS設計について紹介しました。

次回からは、JavaScriptの中のゲーム設計について解説を始めていきます。