position:fixed; をよく使うのは
・トップのナビ部分(headerとか)
・右下の「TOPに戻る」アイコン
など
z-index: 9999;/*重なり順 数字が高いほど前面に来る*/
positionをかけるとhtmlから浮く（レイヤーを重ねたように）
浮いた場所は重なる
一番下にしたいときはz-index: 1;とかにする。
あまり多用しないほうがいいらしい
理解してないと構造がややこしくなるみたい。
画像の上に文字を配置する
hero.jpg
なぜかメインビジュアルにこういう名前をつけるのが流行ってた？らしい
--->test_image.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="test_image.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>画像の上に文字を配置</h1>
<div class="hero_bg">
<div class="hero_title">
<h2>毎日の食事、<br>カラダに優しいものを</h2>
<p>日々の食事がおろそかになりがちな働き盛りのあなたへ</p>
</div>
</div>
<script src="test_image.js"></script>
</body>
</html>
--->test_image.css
.hero_bg{
/*width: 600px;*/
height: 520px;
background-image: url('hero.jpg');/*シングルでもダブルコートでも可*/
/*
background: linear-gradient(to top, rgba(217,177,217,0.7) 10% ,rgba(151, 217, 225, 0.7) 100%),url('hero.jpg');
*/
background-size: 600px; /*pxや％やcontainなどのいろんな指定がある*/
background-repeat: no-repeat;
}
background-size:
>contain
画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。
（ブラウザサイズを変えるとそれに合わせて拡大縮小する。よって画像の右側に隙間ができるかも）
cover
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
（containと違って右側に隙間ができないようにする）
auto
縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
<length>
その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。
<percentage>
その軸が背景配置領域の指定された割合になるよう拡大縮小します。背景は一領域とは、 background-origin の値（既定ではパディングボックス）によって定められます。しかし、背景の background-attachment の値が fixed の場合、配置領域はビューポート全体となります。負の値は使用できません。
これだと常に右側が切られる。
画像は真ん中を大事にして左右が切られるようにしたい。
background-position: center;/*画像を中心に配置*/
.hero_bg{}に
display: flex;/*親要素にこれをかけると子要素が横並びになる*/
をかける
→どういうメリットが？
子要素の縦幅が異なるときに、親要素のなかで上ぞろえ、中ぞろえ、下ぞろえ、どれにする？ができるようになる。
子要素が1つしかなくてもそれができる。
つまりこれをかけておくことで、親要素の中で子要素（1つでも）を上下中心どこでも揃えが可能になる
display: flex;/*親要素にこれをかけると子要素が横並びになる*/
align-items: center;/*親要素にこれを掛けると子要素が上下方向の中心に配置*/
