èª²é¡Œ10 MyStyle

èª²é¡Œ10 MyStyle å®Œæˆä¾‹

è¨˜è¿°ãƒã‚¤ãƒ³ãƒˆ

æ¨ªä¸¦ã³ã‚’ç¸¦ä¸¦ã³ã«å¤‰æ›´ã™ã‚‹ãŸã‚ã«ã€ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªå†…ã§ã€Œdisplay: block;ã€ã‚’æŒ‡å®šã™ã‚‹
ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã§ã®ãƒŠãƒ“ã‚²ãƒ¼ã‚·ãƒ§ãƒ³ã¯ã€ç”»é¢ã„ã£ã±ã„ã«æŠ¼ã—ã‚„ã™ã„çŠ¶æ…‹ã«åºƒã’ã¦è¨å®š
æ–‡å—ã‚’èªã¿ã‚„ã™ãã‚µã‚¤ã‚ºå¤‰æ›´

style.css

@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;
}
html {
  font-size: 100%;
}


/* -------------------------------------------
  body
------------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 1.0rem;
  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 / cover;
  background-attachment: fixed;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.header > .container {
  width: 100%;
}
.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: 6.0rem;
  }
    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: 1.75rem;
}
  .cta a {
    padding: 12px 60px 10px;
    border: 1px solid #fff;
    color: #fff;
  }
    .cta a:hover {
      background-color: rgba(255,255,255,0.6); 
    }

@media screen and (max-width: 767px) {
  .header {
    display: block;
    background: url(../img/main.webp) no-repeat 36% top / cover;
  }
    h1{
      width: 100%;
      margin-bottom: 0;
      padding-top: 40px;
      font-size: 2.6rem;
      border-bottom: 1px solid #fff;
      text-shadow: 0 0 6px #271811;
    }
    h2{
      font-size: 1.5rem;
    }
    .header p.cta {
      margin-bottom: 30px;
    }
    .header p.cta a{
      font-size: 1.5rem;
      color: #fff;
      border: 1px solid #fff;
      padding: 12px 9% 10px;
    }
    .header p.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: rgba(115, 79, 67, 0.7);
        color: #fff;
      }

@media screen and (max-width: 767px) {
  .gnav {
    position: static;
    background-color: transparent;
  }
  .gnav >ul {
    display: block;
  }
  .gnav > ul a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid #fff;
    color: #fff;
  }
  .gnav li:first-child a {
    border-top: 1px solid #fff;
  }
}


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

@media screen and (max-width: 767px) {
  .main{
    padding: 40px 0 0;
  }
    .main h3 {
      margin-bottom: 20px;
      font-size: 1.5rem;
    }
    .main p{
      font-size: 0.9125rem;
    }
}

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

index.html

<!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:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<!-- header -->
<header class="header">
  <div class="container">
    <h1>Hero Header</h1>
    <p class="mark"><img src="img/point.png" alt=""></p>
    <h2>Welcome to MyStyle</h2>
    <p class="cta"><a href="#">Infomation</a></p>
  </div><!-- /.container -->
  <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>