初心者生徒画面幅いっぱいの画像の中央にテキストを配置したメインビジュアルをデザインしました。でも、ヘッダーを固定させる記述をすると、中央からテキストがずれてしまいます。
どうすればいいですか？
講師今回のような、スクロール時にヘッダーを固定させるときの場合だと……
・メインビジュアルをブラウザの縦幅いっぱいに表示させる
・メインビジュアルの中のテキストのエリアを、上下左右中央揃えにする
上記2点をCSSで調整しましょう、早速やり方を説明していきますね！
①ヘッダーを追従させる
まず、ヘッダーに下記HTML・CSSを指定して、ヘッダーを固定しましょう。
<header>
<h1>SAMPLE SITE</h1>
</header>header {
height: 80px; /*← ヘッダーの高さを80pxに指定*/
position: fixed; /*← ヘッダーを固定する*/
top: 0; /*← 一番上から０pxの位置にヘッダーを固定*/
width: 100%;
text-align: center;
background: #b6c7d7;
}
h1 {
font-size: 30px;
padding: 18px 0;
}
②メインビジュアルの背景を指定する
メインビジュアルには下記HTML・CSSを指定します。
<div class="mv">
<div class="text">
<p>メインビジュアルの<br>中央に文字を配置</p>
</div>
</div>背景には星空の画像を「background: url(../images/mv.jpg) center;」で入れました。（center=背景画像を中央に配置）
.mv {
background: url(../images/mv.jpg) center;
background-size: cover;
}③テキストを中央揃えにする
メインビジュアルに表示させるテキストは、Flexboxを利用して上下左右の中央揃えにします。
CSSでblock要素（今回は文字のpタグ）を上下中央揃えにする方法はいくつかありますが、現在はFlexboxを使う方法が1番お手軽です。
中央揃えしたい要素の親要素に対して、次の3行を記述するだけ！
- display: flex;
- justify-content: center;
- align-items: center;
.text {
display: flex; /*← フレックスアイテムに設定*/
justify-content: center; /*← 左右の中央寄せ*/
align-items: center; /*← 上下の中央寄せ*/
color: #fff;
font-size: 80px;
}④メインビジュアルをブラウザの縦幅いっぱいに表示させる
③で指定したクラス名「text」に追加指定しましょう。
初心者生徒ブラウザの縦幅いっぱいに表示させたいから、「height: 100vh;」ですよね！
講師……と思いますよね？
どんな表示になるか、記述して実際に確認してみましょうか。
.text {
height: 100vh; /*→ メインビジュアルの高さを指定*/
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 80px;
}
初心者生徒あれっ、テキストが上にずれてしまいました…。
講師テキストが上にずれて、下に余白ができてしまいましたね。
この余白のサイズをよく見てください。どこかで見たことありませんか？
初心者生徒あっ！①で設定した、ヘッダーの高さ「80px」と同じ余白ですね。
講師その通りです！ここで「calc」というプロパティ使って、高さの指定をやり直してみましょう。
「calc」とは？
calcは、プロパティの値に四則演算（足し算・引き算・掛け算・割り算）計算式を使うことが出来る関数です。
今回のheightの指定方法は、画面縦幅「100vh」からヘッダーの高さ「80px」を引き算したいので、「calc(100vh – 80px);」となります。
.text {
height: calc(100vh - 80px); /*→ メインビジュアルの高さを指定*/
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 80px;
}heightに「calc(100vh – 80px);」を指定すると、こんな見た目になります。
初心者生徒あれ～っ！calcでちゃんと計算式を入れたのに、背景画像ごと上にずれてしまったんですケド…。
講師背景もテキストも、80px上にずれてしまいましたね。今の状態は、ヘッダーとクラス名「mv」が重なっている状態です。
CSSにもう一行「margin-top: 80px;」を足しましょう！
.text {
margin-top: 80px; /*→ ヘッダーの高さ分の余白をとる*/
height: calc(100vh - 80px); /*→ メインビジュアルの高さを指定*/
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 80px;
}
「margin-top」はなぜ必要？
今回はヘッダーを固定させるために、「position: fixed;」を指定しました。ということは、ブラウザのトップを起点として、ヘッダーが宙に浮いている状態になるということです。
このままではヘッダーと下の要素が重なってしまうので、「margin-top」でヘッダーの高さ分の余白を取ることが必要です。
初心者生徒「position: fixed;」って浮くんですね。
講師そうなんです。
そしてメインビジュアルの外側に余白を付けたいので「padding」ではなく「margin」を使いましょう。
今回のポイント
講師いかがでしたか？
今回はcalc関数とFlexboxの組み合わせを使った、CSSの応用編でした。
- Flexboxを使った上下左右中央揃えの指定
- なぜヘッダー分の高さの余白を指定するのか
- calc関数を使った高さの指定
上の3つのポイントをしっかり理解し、実践してみましょう！
