挫折しないプログラミング習得方法
あつまれ 独学エンジニア
Web制作のノウハウ

【Web】スマホの縦スクロールを防ぐ、レスポンシブCSS

Webページをスマホで見たときにも「スタイルが崩れない」ようにするCSSをご紹介します。

シングルページアプリケーションっぽく、スマホの高さに応じて、自動的にレスポンシブなデザインになるCSSです。

私が、ゲームとかツールを作る時にいつも使っている「テンプレートCSS」です。

 

どんな風になるか

横方向、縦方向へのスクロールが無くなって、画面が固定された「モバイルアプリ」っぽくなります。

See the Pen
SPA風のテンプレ
by MacLove (@maclove1)
on CodePen.

 

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
}

header {
    background-color: skyblue;
    height: 10vh;
    text-align: center;
}

main {
    background-color: lightgray;
    height: 80vh;
    padding-top: 11px;
    box-sizing: border-box;
}

footer {
    background-color: pink;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

 

body全体

body要素全体に「100vh」を適用することで、どのスマホで見ても、画面幅いっぱいの高さにしてくれます。

それぞれの要素

header10vh
main80vh
footer10vh

としているので、それぞれ「1:8:1」の割合で表示されます。

 

header、main、footerのvhを変更して、お好きにアレンジしてみて下さい。