忍者ブログ

からすまる日誌

20191204_pm01 main-visual部分

×

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

20191204_pm01 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

コメント

ブログ内検索

カレンダー

03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30