忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

基本(4) ヘルセム / main-visual部分

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

基本(4) ヘルセム / main-visual部分

ブラウザの行間は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;
}

PR

コメント