【授業メモ】ヒーローヘッダーを使ったレイアウト
ヒーローヘッダーを使ったレイアウト
ヒーローヘッダーとは？
一枚画像がフルで表示されている最近よくあるヘッダー。
画像が大きい＝データが大きいので、読み込みに時間がかかる場合もある。
パッと見でおしゃれな印象でとにかく今これが多い。
後でチェック→ https://ferret-plus.com/6810
ヒーローヘッダーの大きさは？
使っている人が一番多いモニターサイズに合わせる。
どれが一番使われてるサイズか常に把握しておく必要がある。
1920×1080（16:9の比率）が今一番多いサイズ。
画像が大きい→データが重い！
特にPNGだとすごく重い！！！
レイアウトにはviewportを使う
widthは幅いっぱいの時は100%に指定するが、高さの場合はvhを使う
画面の高さに 対して何%かで指定できる
vh=viewport height 今見ている画面の高さに対する割合
height: 100vh 見た目の画面の高さいっぱい
height: 50vh 見た目の画面の半分
background-sizeで画像を表示させる
ヘッダー画像を 1920×1080 にしても、見ているモニターのサイズで表示されてしまうため、
何も指定しないと画像がきちんと表示しきれない場合がある！
（モニターが画像より小さければ表示しきれないし、モニターのほうが大きければ余白ができてしまう）
contain
縦横比は保持して、背景bodyに収まる最大サイズにする
画像は全部見えるので、ロゴなどに向いている
縦横によっては余白が生じる場合がある
横長の画面では左右に隙間ができて、1:1になった時隙間は消えて、
スマホなどで画面を小さくしていくと縦に隙間ができてくる
body {
width: 100%; /*幅いっぱい!の時は100%*/
height: 100vh;/*画面に対しての高さ*/
background: url("img/01.jpg") no-repeat center/contain;
}
cover
縦横比は保持して、とにかく背景すべてを画像で埋めようとする
とにかく余白を作らない。すべて覆う。
全部覆いたいとき、ヒーローヘッダーにはこちらが向いている
body {
width: 100%; /*幅いっぱい!の時は100%*/
height: 100vh;/*画面に対しての高さ*/
background: url("img/01.jpg") no-repeat center/cover;
}
スクロールしてもずっと表示させたい場合
このままだと、100vhぶん（見ている画面のサイズのマックスぶん）でしか表示されないので、
container 2000pxとかだと、画面のほうが小さいので途中で表示されなくなってしまう。
body {
width: 100%; /*幅いっぱい!の時は100%*/
height: 100vh;/*画面に対しての高さ*/
background: url("img/header.jpg") no-repeat center/cover;
background-attachment: fixed;
}
background-attachment: fixed;を加えると、containerがどんなに長くても、ずっと表示できる。
body {
width: 100%; /*幅いっぱい!の時は100%*/
height: 100vh;/*画面に対しての高さ*/
background: url("img/header.jpg") no-repeat center/cover;
background-attachment: fixed;
}
100vhはmarginにも使える
#box {
width: 100%;
height: 100vh;
background: pink;
margin-bottom: 100vh;
}
→背景画像、色がついた部分と分けられるので、写真の上に文字を載せるのは見づらくなってしまうが、テキストを色部分に入れれば雰囲気を伝えつつも文章も載せやすくなる
vhが使えれば、画像をどう表示させるか色々と自由にしやすくなる！
100vh 今見ている画面のひとつ分！
色々いじって覚える
RGBaによる透明指定
背景が印象的な画像の場合など、背景も薄く見せつつ文字も見せるためにやるやり方
rgbにaを足して指定する
rgb(255,255,255); だと白→そこに透明を足すと薄く白く透明にできる
background: rgba(255,255,255,0.5);
一番最後のぶぶんがaの指定
opacityの時と同じで、
１だと完全に不透明＝何もしない状態＝見えている状態
0だと完全に透明
opacityとRGBaの違い
rgbaは要素の背景色の透明度
opacityは要素全体、その中にあるものすべての透明度（0にしちゃうと全部透明になっちゃう、hoverしたときの透明度クライにしか使わない）
ボタンにrgbaを使えば、ゴーストボタンや、少しだけ暗くするボタンなども作れる
p.btn a {
text-align: center;
line-height: 50px;
display: block;
color: white;
width: 100%;
background: rgba(0,0,0,0);
}
p.btn a:hover {
background: rgba(0,0,0,0.2);
}
vh使うと一気に今風になる！！
でも色々いじってみないとわからなそうなので、いじってみよう。
