CSSで背景を画面サイズいっぱいに広げる！フルスクリーンの作り方
CSS
- 利用シーン例
- 画面いっぱいに背景画像を広げたデザインを作る時
CSS逆引きレシピ
このページの情報で解決しなかったら
検索してみましょう
CSS逆引き検索
CSSで画面サイズいっぱいに背景を広げるデザインの作り方について解説したいと思います。
Webページを開いた時に、背景が画像いっぱいになっているとインパクトがありますよね。
デザイン次第ではいろいろな見せ方ができるので是非やり方を覚えておきましょう。
CSSで背景を画面サイズいっぱいに広げる方法
それでは作り方について見ていきます。
まずは完成形となるサンプルをご覧ください。
See the Pen wvKGPOg by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.
そのままだとわかりにくいので、上記サンプルを直接codepenで開いて見ていただいたほうがわかりやすいかもしれません。
- 前提ポイント
デフォルトCSSに関しては、normalize.cssを適用しています。
デフォルトCSSについてはこちらをご参考ください。
まずは背景を置く要素を作る
まずは画面いっぱいに背景を敷く要素を作りましょう。
作った要素には以下のようにスタイルを指定します。
.full {
position: relative;
width: 100%;
min-height: 100vh;
background: url(画像URL・パス)
center / cover;
}position: relativeは必ずしも必要ではありません。
ここでのポイントは、min-height:100vh;と、backgroundプロパティです。
min-height: 100vhで高さを画面いっぱいにする
vhはディスプレイサイズによる指定単位です。100％でもいいのでは？と思った人もいるかもしれませんが、100％ではうまくいかないので注意してください。
背景のサイズを指定する
次のポイントが、背景のサイズ指定の方法です。
背景のサイズ指定方法については、background-size: cover;を使います。
（サンプルではショートハンドでまとめて指定しています。）
coverと指定することで要素いっぱいに画像が拡がるようになります。
背景画像の使い方については以下記事をご参考ください。
背景の位置を指定する
背景のサイズを指定するだけで、それっぽくは見えますが、背景画像の位置を指定していないと、狭いディスプレイ幅で見ると左側しか表示されないので不格好です。
おそらく中央寄せしたほうが良いパターンがほとんどでしょう。
その場合は、background-position: center;を指定します。
上を起点にした中央寄せの場合は、top center;といったように指定します。
PCとスマホで背景画像を変える場合
サンプルではPCもスマホも同一の画像を使っていますが、それぞれ別の画像を使いたいというケースもあるでしょう。
そういった場合はmediaクエリで、別々の背景画像を指定しましょう。
画面いっぱいの背景デザインにする時の注意点
画面いっぱいに背景画像を敷くデザインについては、デザインによってスクロールできるかがわかりにくい場合があります。
そんなことないだろう、と思うかもしれませんが、実際にクライアントがスクロールできることがわからずにいた、といったケースもありました。（ターゲットによっては適していないデザインかもしれません）
その場合はスクロールできることが明確に分かるような工夫・スクロールしたくなるような工夫が必要でしょう。
奇抜なデザインは、逆に操作性を損なう可能性があるので注意しましょう。
CSSで背景を画面サイズいっぱいに広げる方法のまとめ
簡単におしゃれなフルスクリーンなWebページが作れると思います。
- ポイント
- 画面いっぱいに広げる要素にはmin-height: 100vh;を指定する
- 背景画像は、background-size: cover;で要素全体に拡げる
