記事内に広告が含まれています。

画像を画面いっぱいに(フルスクリーン)！全画面表示するHTMLとCSS

Sep 22, 2019

CSS,HTML,JS , コーディング

フルスクリーンでの画像表示はサイトを開いた瞬間にドドーン！と目に入って迫力がありますよね。
今回は、そんな迫力満点のフルスクリーン、全画面で画像を表示する方法です。

方法はheightに「 vh 」という単位を使って、フルスクリーンにする画像を背景画像に設定します。
背景画像にするので、backgroundプロパティを使います。

画像をフルスクリーンで表示するCSS

フルスクリーン表示にも実はいろいろあります。
いろいろあるので、ここでは下記の条件で表示した場合のCSSについてご説明します。

DEMO : 表示条件

画像の高さがウィンドウの高さいっぱいになるようにする。
画像の中心がウィンドウの中心にくるようにする。
レスポンシブ対応である。

実際の表示は、下記ボタンをクリックしてご覧ください。（サンプルページが開きます。）

DEMO

使用した画像のオリジナルサイズは、横2000px ×　縦990px です。

コードは下記です。

<body>
  <section class="conte img01"></section>
  <section class="conte img02"></section>
  <section class="conte img03"></section>
</body>

htmlのsection.conteに背景画像を設定します。

* {
    margin: 0;
    padding: 0;
}
section.conte {
  height: 100vh;
  width:auto;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.img01{
  background-image: url(01.jpg);
  background-color:#d68d2f;
}
.img02{
  background-image: url(02.jpg);
  background-color:#d1c6ce;
}
.img03{
  background-image: url(03.jpg);
  background-color:#90b7b2;
}

CSS1～4行目は、ブラウザの差異をなくすCSSです。この記事の主旨と反れるので説明は省略しますが、CSSの最初に記述することが多いです。

CSS5行目以降、フルスクリーン表示に全て必要なCSSです。順番に見ていきましょう。

CSS6行目、height: 100vh;
セクションの高さの指定です。単位は％ではなくvhです。vhについては後述します。

CSS7行目、width:auto;
セクションの横幅の指定です。他の要素の指定を基に自動算出させるためautoを指定します。

CSS8行目、background-size: auto 100%;
背景画像のサイズを指定しています。
autoは横幅を、100%は高さの指定になります。ここでは単位が%であるところに注意です。

CSS9行目、background-position: center;
背景画像の位置の指定です。ウィンドウの中央に表示したいので、centerを指定します。

CSS10行目、background-repeat: no-repeat;
画像の繰り返しは不要です。

CSS12行目～CSS23行目、各セクションに各クラス名を付けて（img01～img03）、背景画像と背景色を設定しています。

表示条件 1 と 3 を実現するには、

上記のCSSはフルスクリーン表示にはどれも必要なコードですが、冒頭で示したDEMOの表示条件「1. 画像の高さがウィンドウの高さいっぱいになるように」「3. レスポンシブ対応である」を実現するためには、下記の2行のCSSがポイントです。

CSS6行目、height: 100vh;
CSS8行目、background-size: auto 100%;

便利なレスポンシブな単位！vhについて

vhは「viewport height」の頭文字をとったもので、ビューポートの高さを指定する単位です。

ビューポートとはウィンドウの表示領域のことで、vhを単位に指定するとPCやスマホなどデバイスが違ってもそれごとに表示領域の数値が算出されます。
height:100vh;とは表示領域の高さ100%に、という指定になります。

スマホやタブレットなど様々なサイズのあるデバイスで活躍するレスポンシブな単位で、簡単に言うとheight:100vhを指定すると、スマホの向きを縦にしようが横にしようが、ブラウザの高さいっぱいに要素を表示してくれます。

background-size: auto 100%;は、画像の高さを100%に、横を縦横の比率を変えずに高さに合わせて自動算出された数値（auto）で表示するよう指定しています。
height:100vh;とともに指定すると、デバイスのサイズが何であろうと、ウィンドウの高さいっぱいに（100%に）画像が表示されます。
つまり表示条件「1. 画像の高さがウィンドウの高さいっぱいになるように」と「3. レスポンシブ対応である。」が実現されます。

表示条件 2 を実現するには、

それと、表示条件2の「画像の中心がウィンドウの中心にくるようにする」を実現するためには、
CSS9行目、background-position:center;を記述します。

background-positionは背景画像の位置を指定するCSSで、画像をウィンドウの中心に配置するためにcenterを指定しています。他にbottomやtop、数値なども指定できます。

POINT

画像をフルスクリーン（ウィンドウの高さ100%）で表示するCSS

backgroundプロパティで画像を背景に指定する
height:100vh;を指定する
background-size: auto 100%;を指定する
background-position:center;を指定する

フルスクリーンに使用する画像サイズ（解像度）について

DEMOで使用した画像のオリジナルサイズは、横2000px ×　縦990px です。

このサイズは、ワイドタイプでシェアが一番の「1920px × 1080px」のフルHDと呼ばれるモニターで画質が粗くなることなく表示させるために決めたサイズです。
※ここでサイズと言っているのは解像度のことです。

1920px × 1080pxを基準にしたので、横幅は1920より少し大きく2000pxにしました。
縦はモニターの上部には大抵ツールバーがあり、その分、表示領域が狭くなります。
そのため、1080pxより少し小さくして990pxにしました。

サイト内関連リンク

フルスクリーンに使用する画像サイズについては、別に記事にしていますのでよかったらご覧ください。

フルスクリーン(全画面表示)に使用する画像サイズは？重要なのは縦横の比率(横型パソコンの場合) – NATSUKIMEMO

さらに小技として・・・・

モニターサイズはたくさんありますが、どのモニターでも上下左右に隙間が空かないように表示させなくてはいけません。

冒頭で示したDEMOの表示条件「1. 画像の高さがウィンドウの高さいっぱいになるように」を実現させるために、background-size: auto 100%;で画像の高さを100％で表示するようにしました。
そうなると高さを基準に画像が拡大・縮小されるので、モニターのサイズや上部のツールバーの高さによっては、左右に隙間が空いてしまう可能性があります。

左右に隙間が空いた時に、おかしく見えないように、小技として私は画像を下記のように加工しています。