ブラウザゲームを作るときによく使う CSS 設定

テキスト選択を無効にする

大抵のゲームではテキスト選択は無効にしたいので、以下の CSS を設定しています。

html {
  /* テキスト選択を無効にする */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

画面全体のスクロールを無効にする

ブラウザデフォルトのスクロールも無効にしたいケースがほとんどなので、以下の設定を加えます。

html {
  /* 画面全体のスクロールを無効にする */
  overflow: hidden;
}

ブラウザデフォルトのマージンを無効にする

html, body {
  /* ブラウザデフォルトのマージンを無効にする */
  margin: 0px;
  padding: 0px;
}

画像のドットがぼやけるのを防ぐ

ブラウザのデフォルト設定だと画像ファイルにアンチエイリアスがかかってしまい、せっかくギザギザにしたドット絵がぼやけてしまうので、以下の設定でアンチエイリアスを無効にしています。

body {
  /* ドットがぼやけるのを防ぐ */
  image-rendering: pixelated;
}

フォントを 8bit フォントにする

私の作るゲームは 8bit っぽい見た目に統一しているため、以下の設定を入れるようにしています。

メインで使っているフォントは美咲フォント misaki_gothic_2nd になります。

html {
  font-family: 'misaki_gothic_2nd';
}

漢字を大量に使う場合、misaki_gothic_2nd だと若干可読性が落ちるため、以下のフォントも併用しています。

html {
  font-family: 'k8x12';
}

スクロールバーの見た目をゲームっぽい感じにする

ブラウザデフォルトのスクロールバーのデザインはポップさに欠けるため、以下の設定を加えてゲームっぽさを出すようにしています。

/* スクロールバーの見た目をゲームっぽい感じにする */

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-thumb {
  background-color: white;
  border: 0.3rem solid rgba(0, 0, 0, 1);
  border-radius: 0.6rem;
}

ちなみに Safari だとこの設定は無効になってしまうと思うのでご注意ください。

ファミコンっぽい色やゲームボーイっぽい色を変数にしておく

私のゲームの場合レトロゲーの雰囲気を出したいので、基本ファミコンっぽい色やゲームボーイっぽい色を使うようにしています。

以下はそれっぽい色の変数宣言。

:root {
  /* ファミコンっぽい色 */
  --color-fc-yellow: #ebd320;
  --color-fc-black: #000000;
  --color-fc-white: #ffffff;
  --color-fc-pink: #ff61b2;
  --color-fc-red: #b21030;
  --color-fc-green: #49aa10;
  --color-fc-orange: #ffa200;
  --color-fc-blue: #4141ff;
  --color-fc-aqua: #61d3e3;
  --color-fc-gray: #b2b2b2;
  --color-fc-dark-gray: #797979;
  --color-fc-violet: #9241f3;
  --color-fc-purple: #db41c3;

  /* ゲームボーイっぽい色 */
  --color-gb-very-dark: rgb(15, 56, 15);
  --color-gb-dark: rgb(48, 98, 48);
  --color-gb-light: rgb(129, 162, 5);
  --color-gb-very-light: rgb(175, 198, 25);

  /* モノクロ液晶画面っぽい色 */
  --color-gw-white: rgb(145, 155, 140);
  --color-gw-black: rgb(33, 46, 40);
}