web023 ヒーローヘッダー(マルチイメージ)
ヒーローヘッダー(マルチイメージ)
■考え方
・2カラム(header,container)でfloatをかける。
・高さは単位vhで調整。
・横は%指定。
・headerのロゴを中央指定★ポイント
■コード
html
<body> <header> <img src="img/logo.svg" alt="logo"> </header> <div id="container"> <div class="ph topL"> <div class="text"> <h2>Frog</h2> <p>~Episode1~</p> </div> </div> <div class="ph topR"> <div class="text"> <h2>Waterfall</h2> <p>~Episode2~</p> </div> </div> <div class="ph btmL"> <div class="text"> <h2>Lizard</h2> <p>~Episode3~</p> </div> </div> <div class="ph btmM"> <div class="text"> <h2>Season</h2> <p>~Episode4~</p> </div> </div> <div class="ph btmR"> <div class="text"> <h2>Tori</h2> <p>~Episode5~</p> </div> </div> </div> <script> /* forAnimationArea */ </script> </body></html>
body{ overflow: hidden; } /* ----------------------- header */ header { width: 200px; height: 100vh; background-color: #343434; float: left; position: relative; } header img{ width: 180px; height: 180px; /* ---------------imgの中央寄せ*/ position: absolute; top: 0; left:0; right:0; bottom: 0; margin: auto; } /* ----------------------- .container */ #container{ width: calc(100% - 200px); height: 100vh; background-color: antiquewhite; float:right; } .ph{ height: 50vh; float:left; position: relative; } .topL{ width: 50%; background:url(../img/frog.png) no-repeat center center; background-size: cover; } .topR{ background: url(../img/taki1.png) no-repeat center center; background-size: cover; width: 50%; } .btmL{ background: url(../img/tokage.png) no-repeat center center; background-size: cover; width: 33.3%; } .btmM{ background: url(../img/taki2.png) no-repeat center center; background-size: cover; width: 33.3%; } .btmR{ background: url(../img/bird.png) no-repeat right; background-size: cover; width: 33.3%; } /* -----------------------animarion-text-area */ .text{ text-align: center; height: 15vh; width: 100%; background-color: rgba(0,0,0,0.5); color: #fff; position: absolute; bottom: 0vh; } .text h2{ padding-top: 15px; margin-bottom: 8px; } .text h2,.text p{ font-family: 'Vollkorn', serif; letter-spacing: 1px; }