Home > ウェブデザイン備忘録 > ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法

ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法

20.10.07

ウェブデザイン備忘録

TOPページの一番上のイメージ部分をブラウザの縦幅いっぱいに表示して
その中央に画像などのコンテンツを置くサイトよく見かけますよね？今回はその方法をご紹介します。

ブラウザの縦幅サイズちょうど表示の方法は簡単です。

height: 100vh;

1	height: 100vh;

高さを100vhにします。vhは　viewpoint heightの略です。100vhは100%の意味になります。

それに中央にコンテンツを置くcssを加えると以下になります。
▼HTML

<div class="container">
<div class="box"></div>
</div>
<div class="next_contents">
</div>

1

2

3

4

5

<div class="container">

<div class="box"></div>

</div>

<div class="next_contents">

</div>

▼css

.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;
	}

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;

}

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« contactform7でドメインと異なるメールアドレス(Gmail)を送信者とするときに迷惑メールにならないようにする方法。

css js【簡単】下からふわっと出てくるアニメーションの作り方 »

関連記事

2022.05.09 Xサーバーメールアドレスの追加方法
2018.11.20 フォトショップやイラレで使っているフォントを他のＰＣに引っ越す方法
2023.02.13 Google SiteKit設定方法　サーチコンソール、アナリティクスと連動の方法
2023.08.02 wordpress カスタムフィールドACFを使ったif elseif else endifまとめ　
2021.05.25 Pagespeed insights高速化まとめ
2020.05.07 wordpress PC用のページをそのままスマホで表示する方法（非レスポンシブ）