Web白描

Webデザインの勉強 - 演習課題

課題 10 - MyStyle

★実践演習

Hero Header

ワイヤーフレーム

テキスト

Hero Header

Home
About
Shop
News
Staff
Contact

Welcome to MyStyle
Infomation

Hero Header Style

大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。
ランディングページなど注目を集めたいサイトにおすすめです。
ヒーローイメージで使用する写真は、サイトのイメージを端的に表すものを使用する[]
よう、心がけましょう。

© Hero Header Style

制作ポイント

「header」の高さ「100vh」で背景画像の固定（background-attachment: fixed;）
「nav」の位置を固定（position: fixed;）
「nav」の背景色を半透明に（background-color: rgba(R, G, B, Alpha : 透過度); ）
画像の拡張子を「.webp」に
書体は、Google Fonts指定

完成例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】MyStyle</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<!-- header -->
<header class="header">
  <div class="text_block">
    <h1>Hero Header</h1>
    <h2>Welcome to MyStyle</h2>
    <p class="cta"><a href="#">Infomation</a></p>
  </div>
  <nav class="gnav">
    <ul>
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<!-- /header -->

<!-- main -->
<main class="main">
  <div class="container">
    <h3>Hero Header Style</h3>
    <img src="img/sub.webp" alt="">
    <p>大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。<br>
    ランディングページなど注目を集めたいサイトにおすすめです。<br>ヒーローイメージで使用する写真は、サイトのイメージを端的に表すものを使用するよう、心がけましょう。</p>
    <ul>
      <li><img src="" alt=""></li>
    </ul>
  </div><!-- /.container -->
</main>
<!-- /main -->

<!-- footer -->
<footer class="footer">
  <p><small>&copy; Hero Header Style</small></p>
</footer>
<!-- /footer -->
</body>
</html>

@charset "UTF-8";

/* -------------------------------------------
  reset
------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* -------------------------------------------
  body
------------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family: "Josefin Slab", "Noto Sans JP", sans-serif;
  line-height: 1.0;
}


/* -------------------------------------------
  layout
------------------------------------------- */
.container {
  width: min(90%, 1240px);
  margin: 0 auto;
}


/* -------------------------------------------
  header
------------------------------------------- */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background: url(../img/main.webp) no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.text_block {
  width: 100%;
}
  h1 {
    width: 100%;
    margin-bottom: 30px;
    padding-top: 100px;
    font-size: 96px;
    border-bottom: 1px solid #fff;
  }
  h2 {
    position: relative;
    margin-bottom: 30px;
    padding-top: 60px;
    font-size: 36px;
  }
    h2::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      width: 60px;
      height: 60px;
      background: url(../img/point.webp) no-repeat center center;
      background-size: contain;
    }

/* CTA */
.cta {
  margin-bottom: 60px;
  font-size: 28px;
}
  .cta a {
    padding: 12px 60px 10px;
    border: 1px solid #fff;
    color: #fff;
  }
    .cta a:hover {
      background-color: rgba(255,255,255,0.6); 
    }


/* -------------------------------------------
  nav
------------------------------------------- */
.gnav{
  width: 100%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.6); 
}
  .gnav > ul {
    position: relative;
    display: flex;
    justify-content: center;
  }
    .gnav li {
        font-size: 24px;
        font-weight: 700;
      }
    .gnav a {
        display: block;
        padding: 10px 20px;
        color: #000;
        transition: .3s;
      }
      .gnav a:hover, .gnav a.current{
        background-color: #734F43;
        color: #fff;
      }


/* -------------------------------------------
  main
------------------------------------------- */
.main{
  padding: 100px 0 30px;
  background-color: #fff;
  color: #3D272B;
  text-align: center;
}
  .main h3 {
    margin-bottom: 30px;
    font-size: 36px;
    font-weight: 700;
  }
    .main img {
      margin-bottom: 30px;
    }
    .main p{
      margin-bottom: 30px;
      padding: 0 8%;
      line-height: 1.7;
      text-align: left;
    }


/* -------------------------------------------
  footer
------------------------------------------- */
.footer {
  padding: 24px 0;
  background-color: #3d272b;
  color: #fff;
  text-align: center;
}
  .footer small {
    font-size: 16px;
  }