下層ページのヒーローエリアのコーディング①【Webサイト制作案件でよく使うサンプルコード】

<div class="HeroSection">
  <div class="Hero">
    <div class="Hero-Inner">
      <h2 class="Hero-Inner-Title">ABOUT</h2>
    </div>
  </div>
</div>コピー

/* ---------------------------- */
/* --- HeroSection --- */
/* ---------------------------- */
.HeroSection {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("背景画像のURL or パス") no-repeat center;
  background-size: cover;
  z-index: 0;
}
.HeroSection:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  opacity: .5;
  z-index: 1;
}
.Hero-Inner-Title {
  position: relative;
  color: #fff;
  font-weight: bold;
  font-size: 75px;
  z-index: 2;
}
@media screen and (max-width: 540px) {
  .Hero-Inner-Title {
    font-size: 40px;
  }
}コピー