Webデザインのトレンドの1つにメインビジュアルとなる画像を、モニター画面横幅いっぱいに表示させるデザインが流行っています。
今回はCSSで、画像をモニター画面の横幅いっぱいに表示させる方法について説明します。PCやタブレットやスマートフォンなどの画面サイズが異なるデバイスでも、縦横比が崩れないように実装することが可能です。
デモ
まずはデモをご覧ください。PC、タブレット、スマートフォンなどの画面サイズの異なったさまざまなデバイスで閲覧しても、きれいにメインビジュアルが表示されます。
See the Pen CSSで画像を画面の横幅いっぱいに表示させる方法 by ayukat (@tak-kun) on CodePen.
実装方法
HTML
<div class="mainvisual">
<div class="catch">stay hungry, stay foolish</div>
</div>CSS
.mainvisual {
width: 100%;
height: 100vh;
background-image: url('https://takkun.html.xdomain.jp/test/css-background-image/mainvisual.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.catch {
height: 100%;
margin: auto;
font-size: 6.266vw;
color: #fff;
display:flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width:768px) {
.catch {
font-size: 2.8rem;
}
}HTMLの解説
画像を画面の横幅いっぱいに表示させるためには、背景画像として画像を設定する必要があります。そのため、HTMLにはimgタグを使って画像を設置するのではなく、背景画像を設定するためのタグを記述します。
ここではdivタグ（class="mainvisual"）に背景画像を設定します。そして画像中央にはメインビジュアルのキャッチコピーを設置しました。
CSSの解説
背景画像を設置するCSSについて説明します。
background-image
background-imageプロパティで背景画像にしたい画像のパスを記述します。background-imageプロパティで画像を設定するときは、相対パスでも絶対パスでも指定することが可能です。
最近はPCのモニターサイズが1980px以上のワイドモニターが多いので、画像サイズは横幅2000px以上の画像を準備しておけば綺麗に画像が表示されます。
background-position: center;
次にbackground-positionプロパティで、設定した画像の位置を設定します。値を「center」に設定しておけば、上下左右中央に画像を配置することができます。
background-repeat: no-repeat;
わざわざ解説するほどでもないですが、背景画像を繰り返し表示させないように background-repeatプロパティは「no-repeat」に設定しておきます。
background-attachment: fixed;
background-attachmentプロパティの値を「fixed」にすれば、背景画像の高さより、コンテンツ高さの方が高い場合に、スクロールしないように固定するために設定します。
つまり画面の縦のサイズいっぱいに背景画像を設定することができます。縦のサイズいっぱいに表示させる必要がない場合は、background-attachment: fixedを記述しなくて大丈夫です。
background-size: cover;
そして今回1番重要なCSSが、background-sizeプロパティを「cover」に設定することです。coverにすると、背景画像をさまざまなデバイスで見ても、縦横比を保ったまま画像を表示させることができます。
background-sizeプロパティの詳しい説明はこちらに詳しい内容が記載されていますので、よかったらご覧になってください。