CSSで画面いっぱいに表示する方法
コーポレートサイトやポートフォリオサイトをみるとまずはじめに画面いっぱいの画像があることが多いです。今回はHTML,CSSにてパソコンでもスマホでも画面いっぱいに表示させる方法をご紹介します。
HTMLで画面分を作る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの書き方</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>まずはHTMLを用意します。HTMLは最低限のコードだけ記載します。
通常画像を読み込む場合<img>タグを使いますが、今回はCSSで画像を入れてみます。(理由は後ほど)
<body>内に画像の部屋を作ります。
<div class="image"></div><body>ないにdivのコードを入れます。
CSSを記入する
次にCSSを設定していきます。
style.cssにimageクラスに対しコードを記入します。
.image {
width: 100%;
height: 100vh;
background-image: url(リンクを入れてください);
background-size: cover;
background-position: center;
}width:100%にすることによって横幅いっぱいになります。<body>タグは元々画面はばに対して100%の大きさになるようになっているので.imageに対しても100%で指定します。
highe:100vhにより今見ているブラウザの縦幅と同じ縦幅の大きさで.imageが生成されます。vhはviewport heightの略です。ブラウザの見ている画面縦幅の100%で高さを指定することになります。
これによりどんな画面幅や、画面縦幅で見ても表示されるようになります。
backgroundで画像をいれる理由
今回はbackgroundで画像を挿入し、大きさも指定しました。ではなぜこうしたのでしょうか？
実は<img>タグではレイアウトが崩れてしまうのです。
<img>で画像の高さと幅を100vhにすれば画像は画面いっぱいに表示されるのですが、画面はばに合うように画像が引き延ばされてしまいます。画像のレイアウトを保つために<div class=”image”>の箱に合わせて画像を表示させました。backgroundでは画像の比率を崩すことなく、<div>ないを満たすように画像が配置されるので画面に対してきれいに表示されます。
コメント