ゲーム作るくんのサイト
ゲーム作るくん
Twitter

ウィンドウのデザインをドラクエ風にしたいときに使う CSS 設定

ファミコン時代のデザインを再現しようとしています。

*「おお ああああ!
  ゆうしゃロトの ちをひくものよ!
  そなたのくるのをまっておったぞ!

フォントには美咲フォント misaki_gothic_2nd を使用しています。

.dq-window-1 {
  background-color: black;
  padding: 0.15rem;
  width: fit-content;
}

.dq-window-2 {
  background-color: white;
  padding: 0.2rem;
  border-radius: 0.3rem;
  width: fit-content;
}

.dq-window-3 {
  color: white;
  background-color: black;
  font-family: "misaki_gothic_2nd";
  border-radius: 0.3rem;
  padding: 1.0rem 0.75rem;
  line-height: 2;
  width: fit-content;
}
*「ドラクエふう ウィンドウは
  こんな かんじに なります

HTML はこうなります

<div class="dq-window-1"
  style="margin-left: auto;
  margin-right: auto;">
  <div class="dq-window-2">
    <div class="dq-window-3">
      *「ドラクエふう ウィンドウは
      <br>  こんな かんじに なります
    </div>
  </div>
</div>

厳密に言うとファミコン時代のウィンドウの四隅はギザギザしているんですが、そこをちゃんとやろうと思うとそれ用の画像を用意する必要があり、汎用性が減ってしまうためこちらの設定で妥協しています。

一番外側の黒い部分を角丸ではなく四角にしている、というのがこだわりポイントではあります。