ブラウザの行間はwin/macでデフォルトで違う
winのほうがちょっと狭いらしい
main部分のcssを付けていく
main_visual部分を自分でやってみましょう
うまくいかなかったところ
①文字が白くならない
↓
全称セレクタで文字を黒くしてしまった場合、後から白くしたかったら、
親要素でなく最終的な要素(h2とかpとか)で指定する必要がある
.hoge h2{/*hogeではだめで.hoge h2まで必要*/
color: #fff;
}
②.hoge h2と.hoge pに各々
position: absolute;
left: 4rem;
をかけようとした
↓
こうすると二つの要素が中央ぞろえで重なってしまう
親である(h2とpを内包した外ブロック).hogeのところで指定する必要あり
.hoge{
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 4rem;
}
③line-heightに関してはh2やpで指定する必要があるらしい
↓
.hoge h2{
color: #fff;
font-size: 3rem;
line-height: 3rem;
}
--->自分で書いてみた分
.hero_bg{
height: 480px;
background-image: url('../images/hm-Content-HomeHero.jpg');
background-size: cover;
background-repeat: no-repeat;
backgound-position: center;
position: relative;
}
.hoge{
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 4rem;
}
.hoge h2{/*hogeではだめで.hoge h2まで必要*/
color: #fff;
font-size: 3rem;
line-height: 5rem;
}
.hoge p{
color: #fff;
line-height: 5rem;
}
.hoge2{
width: 80%;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.hoge2 p{
color: #777;
line-height: 3rem;
}