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;
    }