ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法
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; } |
関連記事
-
2022.05.09 Xサーバーメールアドレスの追加方法
-
2018.11.29 サーチコンソールとグーグルアナリティクスを同期させ検索パフォーマンスを上げる
-
2023.09.06 contactform7 確認画面(切り替え)とサンクスページの設定方法
-
2023.02.13 Google SiteKit設定方法 サーチコンソール、アナリティクスと連動の方法
-
2022.09.28 サイト立ち上げ時(SSL後)、「サイトが安全でない」の鍵マークが出た時の対処