ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法
20.10.07
TOPページの一番上のイメージ部分をブラウザの縦幅いっぱいに表示して
その中央に画像などのコンテンツを置くサイトよく見かけますよね?今回はその方法をご紹介します。
ブラウザの縦幅サイズちょうど表示の方法は簡単です。
1 |
height: 100vh; |
高さを100vhにします。vhは viewpoint heightの略です。100vhは100%の意味になります。
それに中央にコンテンツを置くcssを加えると以下になります。
▼HTML
1 2 3 4 5 |
<div class="container"> <div class="box"></div> </div> <div class="next_contents"> </div> |
▼css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { max-width: 60%; padding-top: 10vh; padding-bottom: 10vh; padding-left: 20vh; padding-right: 20vh; background-color:#ff0; } .next_contents{ background-color:#930; height:500px; } |
関連記事
-
2018.10.26 サクラサーバーにワードプレスをインストールするまでの流れ
-
2018.10.26 メインスライダーを画像が少し切れるカルーセルにする。
-
2022.09.28 サイト立ち上げ時(SSL後)、「サイトが安全でない」の鍵マークが出た時の対処
-
2018.10.27 デザインセンスの良いフリー画像
-
2018.10.27 センスの良いフォント フリー集