main visual部分
先生版
main .main_visual{}に対して
background-image: url('../images/hm-Content-HomeHero.jpg');
→画像がめちゃめちゃ
→ height: 520px;/*高さ*/
→全体を見せたいぞ
→ background-size: cover;
→画像の中心を中心として画像を拡大縮小させたい
→ background-position: center;
→画像の繰り返しはしたくないな
→ background-repeat: no-repeat;
→文字を中心に置きたいですね
→ display:flex;
align-items: center;
文字をちょっと位置を修正したい
→main .main_visual div{}に対して
padding-left: 4rem;
文字を白とか灰色にしたいですよ
→あらかじめそういうクラスを作っておく（他でも使うし）
→
.white{
color: #fff;
}
.gray{
color: #555;
}
→それを（逆に）htmlに当てはめてやる
→<h2 class="white">
→<p class="white">
あとh2やpの文字サイズや行間をきれいにしたいですよ
→
main .main_visual div h2{
font-size: 3rem;
line-height: 1.2;
}
main .main_visual div p{
line-height: 1.2;
}
ここまで！
--->index.html（変更部分）
<div class="main_visual">
<div>
<h2 class="white">
毎日の食事、<br>
カラダに優しいものを
</h2>
--->style.css
main .main_visual{
height: 520px;/*高さ*/
background-image: url('../images/hm-Content-HomeHero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*上下方向の中心ぞろえ*/
display:flex;
align-items: center;
}
main .main_visual div{
padding-left: 4rem;
}
main .main_visual div h2{
font-size: 3rem;
line-height: 1.2;
}
main .main_visual div p{
line-height: 1.2;
}
.white{
color: #fff;
}
.gray{
color: #555;
}
display:flex;
ある要素に定義するだけで、その直下の要素が並列になる便利なスタイルです。
おそらくだがこの2つでセットなのだ（そうでした）
/*上下方向の中心ぞろえ*/
display:flex;
align-items: center;
display:flex;は本来「横並びにしますよ」だが、今回の使い方では特に横並びの意味は全然ない。
ただ、こうしておくと、そのあとの「align-items: center;」が「使えるようになる」！
flexのアイテムが１こだけ（まったく横並びの指定の意味はない）でも、親要素の中央ぞろえにしてやりたいなというときに利用できるなという、そういう使い方。
