「トップページを画面全体に合わせたい」でも変な隙間ができちゃう…。そんなことありませんか？
スマホとPCでは比率が違うため、全く同じ見せ方は出来ないものの、画面全体に合わせることは可能です。
方法はいろいろあると思いますが、簡単に設定できる方法をひとつご紹介します。
準備
・背景画像
・html
・css
htmlの書き方
背景画像を設置したい個所を
<div id="home">ここにはコンテンツ<div>
としてください。
id名はお好きなものを。今回はhomeにしました。
cssの書き方
html,body {
width: 100%;
overflow-x: hidden;
margin:0;
}
#home {
background: url('../images/home-bg.jpg') 50% 0 repeat-y fixed;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
text-align: center;
}
となります。
｢背景画像で画面全体を覆う」ために必要な要素ですので、省略せずに使った方がエラーが少ないと思います。
今回の画像の場合は、スマホで見た時に画面高さに合わせて表示されるため、このままでは画像の中央部分が切り出されたような状態になってしましたましたので、調整してみます。
画像の開始位置について（background-position）
background-positioは、いくつかの方法で設定が可能です。
| background-position : center center; | キーワードで指定する |
|---|---|
| background-position : 60% 10%; | ％で指定する（それぞれ上下・左右の設定） |
| background-position : 0 30px; | pxで指定する（それぞれ上下・左右の設定） |
background-position: right -150px bottom 0px;
細かな調整がしやすくなって大変便利ですね。
cssの解説
| html,bodyの指定 | |
|---|---|
| width: 100%; | 横幅はブラウザのウィンドウ幅に合わせるため |
| overflow-x: hidden; | ウィンドウ横幅からはみ出さない為 |
| margin:0; | 画像との間に隙間を作らない為 |
| #homeの指定 | 背景画像を指定するBOXのid名。 今回は#homeとしています。 |
|---|---|
| background-size: cover; | 画面の「横幅」を覆う |
| height: 100vh; | 画面の「縦幅」 |
| background-position: center center; | 背景画像の開始位置指定 |
| display: flex; | Flexスタイルの指定 ※これで画面ぴったりに |
| align-items: center; | Flex指定のひとつで、コンテンツを中央に |
| -webkit- | -webkit- と書いてあるものはベンダープレフィックスといって、ブラウザ間の相違を無くす表記です |
以上となります。あまり上手い説明が出来ていなかったかもしれません、ゴメンナサイ。
最後までお読みいただき有難うございました。