サイト模写 ｜ vietnam料理（ホームページ）

※サイト模写用に作成したページの解説です。

※使用画像はフリー素材からダウンロードしています。

※下記、模写サイトへボタンから該当のサイトへGo!!

MEMO HTML css js
模写サイトへ

MEMO

1.body

  • 最大幅1032px
  • 左右の余白は16px
  • ページ内メインカラーを#0A2A0A
  • jsで、ページ内スムーススクロール実装
  • グーグルフォントKaisei Decol使用

2.ヘッダー

  • 右上に固定
  • スマホの際は全幅表示
  • メニューをホバーしたら、メニューのカテゴリーが表示される
  • スマホの際はメニューをタップしたら、メニュのカテゴリーが表示される
  • ロゴを中央に配置し、シャドーを入れる

3.メインビジュアル

  • 横幅いっぱい
  • 画面の高さ100％表示

4.メニュー

  • 横幅いっぱいに背景画像を表示
  • PCはbackground-attachment: fixed;を指定
  • スマホはbackground-attachment: scroll;を指定
  • テキストを横並び配置
  • スマホの際は、左右のテキストを縦表示

5.食材について

  • 画像とテキストを横並び配置
  • スマホの際は、画像とテキストを縦表示
  • ボタンはホバーしたら色を変化させる

6.店舗情報

  • マップを埋め込み
  • グレー表示

7.フッター

  • メニューはヘッダーで実装したホバーしたら表示ではなく、最初から表示

8.レスポンシブ

  • ブレークポイントは768px

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vietnamese restaurant｜サイト模写</title>
  <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Permanent+Marker&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
  <script src="script.js" defer></script>
</head>
<body>
  <header id="header">
    <h1 class="logo">
      <img src="img/logo.png" alt="">
    </h1>
    <nav>
      <ul class="list">
        <li class="menu-list">
          <a href="#menu">メニュー</a>
          <ul>
            <li><a href="#rice-noodle">Rice・Noodle</a></li>
            <li><a href="#appetizer-salad">Appetizer・Salad</a></li>
            <li><a href="#fried-dimsum">揚げ物・点心</a></li>
          </ul>
        </li>
        <li class="menu-list"><a href="#ingredients">食材について</a></li>
        <li class="menu-list"><a href="#store">店舗情報</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="menu">
      <h2 class="section-title">MENU</h2>
      <div id="rice-noodle" class="bg-img">
        <div class="wrapper">
          <div class="item">
            <h3 class="bg-title">Rice</h3>
            <dl>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
            </dl>
          </div>
          <div class="item">
            <h3 class="bg-title">Noodle</h3>
            <dl>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
            </dl>
          </div>
        </div>
      </div>

      <div id="appetizer-salad" class="bg-img">
        <div class="wrapper">
          <div class="item">
            <h3 class="bg-title">Appetizer</h3>
            <dl>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
            </dl>
          </div>
          <div class="item">
            <h3 class="bg-title">Salad</h3>
            <dl>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
            </dl>
          </div>
        </div>
      </div>

      <div id="fried-dimsum" class="bg-img">
        <div class="wrapper">
          <div class="item">
            <h3 class="bg-title">揚げ物</h3>
            <dl>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
            </dl>
          </div>
          <div class="item">
            <h3 class="bg-title">点心</h3>
            <dl>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
              <dt>テキストテキストテキスト</dt>
              <dd>¥500</dd>
            </dl>
          </div>
        </div>
      </div>
    </section>

    <section id="ingredients">
      <div class="wrapper">
        <h2 class="section-title">食材について</h2>
        <div class="wrap">
          <div class="txt">
            <h3>提供するお料理はすべて自然由来のものを使用しております。</h3>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
          <div class="img">
            <img src="img/04.jpg" alt="">
          </div>
        </div>
        <a href="#">READ MORE</a>
      </div>
    </section>

    <section id="store">
      <div class="wrapper">
        <h2 class="section-title">店舗情報</h2>
        <div class="map">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975472315!2d139.74323885108987!3d35.658580480102394!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1634880228313!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
        <dl>
          <dt>お問い合わせ</dt>
          <dd>050-0000-0000</dd>
          <dt>住所</dt>
          <dd>東京都テキストテキストテキストテキストテキスト</dd>
          <dt>営業時間</dt>
          <dd>
            <p>平日 11:30 ～ 翌2:00</p>
            <p>祝日 12:00 ～ 翌2:00</p>
          </dd>
        </dl>
      </div>
    </section>
  </main>
  <footer id="footer">
    <div class="wrapper">
      <div class="source">
        <a href="index02.html#memo">MEMO</a>
        <a href="index02.html#html">HTML</a>
        <a> href="index02.html#css">CSS</a>
      </div>
      <div class="wrap">
        <h1 class="logo">
          <img src="img/logo.png" alt="">
        </h1>
        <nav>
          <ul class="list">
            <li>
              <a href="#menu">メニュー</a>
              <ul>
                <li><a href="#rice-noodle">Rice・Noodle</a></li>
                <li><a href="#appetizer-salad">Appetizer・Salad</a></li>
                <li><a href="#fried-dimsum">揚げ物・点心</a></li>
              </ul>
            </li>
            <li><a href="#ingredients">食材について</a></li>
            <li><a href="#store">店舗情報</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <p class="copy">© Vietnamese restaurant</p>
  </footer>
</body>
</html>

css

html {
  font-size: 100%;
}

body {
  font-family: 'Kaisei Decol', 'Permanent Marker', cursive, Arial, Helvetica, sans-serif;
  line-height: 1.7;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  display: block;
  transition: all .6s;
}

a:hover {
  opacity: 0.7;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

.wrapper {
  max-width: 1032px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  letter-spacing: 0.3rem;
  color: #333;
  font-weight: bold;
  display: inline-block;
  border-bottom: 5px solid #0A2A0A;
  margin-bottom: 60px;
}

.bg-img {
  width: 100%;
  padding: 60px;
  height: auto;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bg-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-bottom: 5px solid #0A2A0A;
  margin-bottom: 30px;
}

#header {
  width: 100%;
  height: 100vh;
  background-image: url(img/mv.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}

#header .logo {
  width: 350px;
}

#header .logo img {
  filter: drop-shadow(5px 2px #321a01);
}

#header nav {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #0A2A0A;
}

#header nav .list {
  display: flex;
}

#header nav .list .menu-list {
  padding: 10px 30px;
}

#header nav .list .menu-list a {
  color: #fff;
}

#header nav .list .menu-list:first-child {
  position: relative;
}

#header nav .list .menu-list:first-child:hover ul, #header nav .list .menu-list:first-child:active ul {
  display: block;
}

#header nav .list .menu-list:first-child ul {
  display: none;
  background-color: #0a2a0a;
  font-size: 0.8rem;
  width: 170px;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
}

#header nav .list .menu-list:first-child ul li {
  padding: 10px 10px 10px 30px;
}

main {
  text-align: center;
}

main #menu #rice-noodle {
  background-image: url(img/01bg.jpg);
  margin-bottom: 80px;
}

main #menu #appetizer-salad {
  background-image: url(img/02bg.jpg);
  margin-bottom: 80px;
}

main #menu #fried-dimsum {
  background-image: url(img/03bg.jpg);
}

main #menu .wrapper {
  background-color: rgba(3, 3, 3, 0.6);
  border-radius: 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 60px 20px;
}

main #menu .wrapper .item {
  width: 48%;
}

main #menu .wrapper .item:first-child {
  border-right: 1px solid #fff;
}

main #menu .wrapper .item dl {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}

main #menu .wrapper .item dl dt {
  width: 85%;
  margin-bottom: 20px;
  border-bottom: 1px dashed #fff;
}

main #menu .wrapper .item dl dd {
  width: 15%;
}

#ingredients {
  width: 100%;
  height: auto;
  padding: 80px 0;
}

#ingredients .wrapper {
  background-color: #fff;
  border-radius: 20px;
  border: 8px dotted #D17C06;
  padding: 60px 4%;
}

#ingredients .wrapper .wrap {
  display: flex;
  justify-content: space-between;
}

#ingredients .wrapper .wrap .txt {
  width: 48%;
  text-align: left;
}

#ingredients .wrapper .wrap .txt h3 {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

#ingredients .wrapper .wrap .txt p {
  margin-bottom: 20px;
}

#ingredients .wrapper .wrap .img {
  width: 48%;
}

#ingredients .wrapper .wrap .img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

#ingredients .wrapper a {
  font-size: 0.8rem;
  display: inline-block;
  margin-top: 30px;
  padding: 10px 50px;
  border: 1px solid #0A2A0A;
  color: #0A2A0A;
}

#ingredients .wrapper a:hover {
  color: #fff;
  background-color: #0A2A0A;
}

#store {
  background-image: url(img/05bg.jpg);
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 80px 0;
}

#store .map {
  width: 100%;
  margin-bottom: 30px;
}

#store .map iframe {
  filter: grayscale(1);
  width: 100%;
  height: 400px;
}

#store dl {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}

#store dl dt {
  width: 20%;
}

#store dl dd {
  width: 80%;
}

#footer {
  background-color: #0A2A0A;
  color: #fff;
  padding: 100px 0 15px;
  text-align: center;
}

#footer .source {
  display: flex;
  justify-content: end;
  margin-bottom: 30px;
}

#footer .source a {
  font-size: 0.8rem;
  padding: 10px 30px;
  border: 1px solid #fff;
  color: #fff;
  margin: 0 2px;
}

#footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

#footer .wrap .logo {
  width: 180px;
}

#footer .wrap .list li {
  margin-bottom: 10px;
}

#footer .wrap .list li:last-child {
  margin-bottom: 0;
}

#footer .wrap .list li a {
  text-align: left;
  color: #fff;
}

#footer .wrap .list li ul {
  display: inline-block;
  margin-left: 30px;
  font-size: 0.8rem;
  list-style: square;
}

#footer .copy {
  font-size: 0.7rem;
}

@media screen and (max-width: 768px) {
  .section-title {
    font-size: 1.6rem;
    border-bottom: 3px solid #0A2A0A;
  }
  .bg-img {
    padding: 60px 4%;
    background-attachment: scroll;
  }
  .bg-title {
    font-size: 1.2rem;
  }
  #header {
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 60px;
  }
  #header .logo {
    width: 80%;
  }
  #header nav {
    left: 0;
    width: 100%;
  }
  #header nav .list li {
    width: calc(100% / 3);
    justify-content: space-between;
    padding: 10px;
  }
  #header nav .list li ul {
    padding-left: 20px;
  }
  main #menu .wrapper {
    flex-direction: column;
  }
  main #menu .wrapper .item {
    width: 100%;
    margin-bottom: 60px;
  }
  main #menu .wrapper .item:last-child {
    margin-bottom: 0;
  }
  main #menu .wrapper .item:first-child {
    border-right: none;
  }
  main #ingredients {
    padding-left: 4%;
    padding-right: 4%;
  }
  main #ingredients .wrapper .wrap {
    flex-direction: column;
  }
  main #ingredients .wrapper .wrap .txt {
    width: 100%;
  }
  main #ingredients .wrapper .wrap .txt h3 {
    font-size: 1.2rem;
  }
  main #ingredients .wrapper .wrap .img {
    width: 100%;
  }
  main #ingredients .wrapper a {
    width: 100%;
  }
  main #store dl {
    flex-direction: column;
  }
  main #store dl dt {
    width: 100%;
  }
  main #store dl dd {
    width: 100%;
    margin-bottom: 10px;
  }
  main #store dl dd:last-child {
    margin-bottom: 0;
  }
  #footer .wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  #footer .wrapper .logo {
    margin: 0 auto;
    margin-bottom: 30px;
  }
}

js

$(function(){
  $('a[href^="#"]').click(function(){
    let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top;
    $("html, body").animate({scrollTop:position}, 600, "swing");
    return false;
  });
})
MEMO HTML css js
模写サイトへ
TOPページへ戻る
​