メイン画像をPC画面の縦横 ピッタリに収める

ファーストビュー

サイトにアクセスしたとき、モニタ画面に表示される領域を
ファーストビューといいます。

ファーストビューを作る

• 画像とキャッチコピーをグループ化
• 親にposition指定(rerative)
• 画像の横幅100%にする
• キャッチコピー部分にposition指定(absolute)
• とりあえずキャッチコピー部分にtop:50px left:50pxを指定

表示されたもの↓

画面からはみ出した画像をPC画面いっぱいに表示させる

・画像とキャッチコピーのグループに高さ100vhを指定する
・overflowを使ってはみ出し部分を消す

.firstview{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.firstview img{
    width: 100%;
}
.catch{
    position: absolute;
    top: 50px;
    left: 50px;
}

キャッチコピーを真ん中に

・top50%,left50%ではキャッチコピーの開始地点が50%の位置になるだけなのでtransformプロパティをつかい位置を調整する

.firstview{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.firstview img{
    width: 100%;
}
.catch{
    position: absolute;
    /* top: 50px; */
    /* left: 50px; */

    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}