最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
こういったレイアウトを作る際の１番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。
ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。
img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。
画像を可変にする方法は二通りのみ
img要素ならフルードイメージ
- フルードイメージの場合、基本的に拡大はさせない為、想定される範囲の中で最大サイズで書き出す。
- 拡大はNGなので、綺麗に見せたい商品画像などに使用
background画像なら「background-size」
- 「background-size」の場合、拡大・縮小ともに自由に出来る為、想定される範囲の中間付近のサイズで書き出す。
- 拡大・縮小を自由に出来る為、ディテールに拘らない、背景などの画像に使用
今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア（2016年6月現在）
さらにフルスクリーンのように大きなサイズの画像をwebで使う時は必ず下記のようなサービスを使ってデータを軽くし、ユーザビリティーの向上に努めましょう。
tinypng.com
background-sizeプロパティの指定方法
background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。
「contain」
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
「cover」
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
background-sizeのサンプル
background-sizeプロパティは、スマホサイト制作でよく使用されるプロパティなので、各値の違いをしっかり覚えて使えるようにしていきましょう。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>background-sizeの基本</title> <style> html,body { margin: 0; padding: 0; } body { width:100%; height:100vh; background-image: url(../img/bg.jpg); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像を繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646; } </style> </head> <body> </body> </html>
