HTML/CSS

【Web制作】スマホで見たときもスタイル崩れしないためのCSS

Webページをスマホのブラウザで見たときに「崩れないスタイル」にするためのCSSをご紹介します。

僕がミニゲームを作る時にいつも使っている「テンプレートCSS」です。

 

どんな風になるか

  • 初期値として設定されている余白をクリアできる。
  • 洗練されたフォントになる。
  • 要素を中央に配置できる。
  • 横方向へスクロールしなり、画面が固定されてアプリっぽくなる。

 

以下コピペで使えます。

* {
  margin: 0;
  font-family: "YuGothic";
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}