ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

web023 ヒーローヘッダー(マルチイメージ)

ヒーローヘッダー(マルチイメージ)

f:id:neko_kick_panch:20170527012333p:plain

■考え方
・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>

css

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;
}