TEST 1のコーディングです。参考にできます
HTMLのヘッダーまでの部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test1</title>
<title>Tesページです</title>
<meta name="description" content="これはTestページです" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/banner_section.css" />
<link rel="stylesheet" type="text/css" href="css/about_shop.css" />
<link rel="stylesheet" type="text/css" href="css/price_section.css" />
<link rel="stylesheet" type="text/css" href="css/product.css" />
</head>
<body>
<!-- オーバーレイをここに追加 -->
<div id="overlay"></div>
<header id="header">
<div class="header_inner">
<div class="header_logo">
<a href="index.html"><img src="img/logo2.svg" alt="ロゴ画像" /></a>
</div>
<nav class="header_nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="test1.html">Test1</a></li>
<li><a href="test2.html">Test2</a></li>
<li><a href="access.html">Access</a></li>
</ul>
<div class="header_btn">
<a href="#" class="btn_gold">お問い合わせ</a>
</div>
</nav>
<div class="openbtn">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!--このレイアウトのみ、オーバーレイの回避用でタブレットナビをheaderの外に出しております-->
<nav id="g-nav">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Access</a></li>
<div class="g_nav_btn">
<a href="#" class="g_nav_btn_gold">お問い合わせ</a>
</div>
</ul>
</div>
</nav>mv_top_wrapperからバナーの部分まで
<main>
<div class="mv_top_wrapper">
<div class="mv_top_inner">
<div class="mv_top_header">
<div class="mv_top_header_inner">
<h1 class="mv_top_header_logo">
<a href="index.html"
><img src="img/logo.svg" alt="ロゴ画像"
/></a>
</h1>
<nav class="mv_top_header_nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="test1.html">Test1</a></li>
<li><a href="test2.html">Test2</a></li>
<li><a href="access.html">Access</a></li>
</ul>
<div class="mv_top_header_btn">
<a href="#" class="btn_gold">お問い合わせ・資料請求</a>
</div>
</nav>
<div class="openbtn_mv">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="mv_top_content">
<ul>
<li>
<picture>
<!-- 幅が768px以上の場合に表示する画像 -->
<source srcset="img/mv1.png" media="(min-width: 769px)" />
<!-- 幅が768px未満の場合に表示する画像 -->
<source srcset="img/mv1_tab.png" media="(max-width: 768px)" />
<!-- フォールバック用の画像 -->
<img src="img/mv1.png" alt="MV画像1" class="mv_image" />
</picture>
</li>
<li>
<picture>
<!-- 幅が768px以上の場合に表示する画像 -->
<source srcset="img/mv2.png" media="(min-width: 769px)" />
<!-- 幅が768px未満の場合に表示する画像 -->
<source srcset="img/mv2_tab.png" media="(max-width: 768px)" />
<!-- フォールバック用の画像 -->
<img src="img/mv2.png" alt="MV画像2" class="mv_image" />
</picture>
</li>
<li>
<picture>
<!-- 幅が768px以上の場合に表示する画像 -->
<source srcset="img/mv3.png" media="(min-width: 769px)" />
<!-- 幅が768px未満の場合に表示する画像 -->
<source srcset="img/mv3_tab.png" media="(max-width: 768px)" />
<!-- フォールバック用の画像 -->
<img src="img/mv3.png" alt="MV画像3" class="mv_image" />
</picture>
</li>
<li>
<picture>
<!-- 幅が768px以上の場合に表示する画像 -->
<source srcset="img/mv4.png" media="(min-width: 769px)" />
<!-- 幅が768px未満の場合に表示する画像 -->
<source srcset="img/mv4_tab.png" media="(max-width: 768px)" />
<!-- フォールバック用の画像 -->
<img src="img/mv4.png" alt="MV画像4" class="mv_image" />
</picture>
</li>
</ul>
</div>
<div class="mv_bottom_text_banner_wrapper">
<div class="mv_bottom_text_banner_inner">
<div class="mv_bottom_left_text">
<div class="bt_text_wrapper">
<p class="bt_text_one">
淹れたての<span class="bt_text_border">絶品コーヒーを</span>
</p>
<p class="bt_text_two">
あなたのもとへ<span class="bt_text_border"
>お届けします</span
>
</p>
</div>
<div class="bt_text_info">
<ul>
<li>恵比寿西口駅徒歩５分</li>
<li>営業時間 8:00〜20:00</li>
</ul>
</div>
</div>
<div class="mv_bottom_right_banner_btn">
<a href="#">
<img src="img/top_banner.png" alt="お買い得バナー" />
<div class="mbr_banner_text_wrapper">
<div class="mbr_banner_text_contents">
<p class="mbr_text_small">美味しいコーヒー豆</p>
<p class="mbr_text_large">販売しています</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="mv_bottom_text_banner_wrapper_sp">
<div class="mv_bottom_text_banner_inner_sp">
<div class="mv_bottom_text_sp">
<div class="bt_text_wrapper_sp">
<p class="bt_text_one_sp">
淹れたての<br class="sp-only" /><span class="bt_text_border"
>絶品コーヒーを</span
>
</p>
<p class="bt_text_two_sp">
あなたのもとへ<br class="sp-only" /><span
class="bt_text_border"
>お届けします</span
>
</p>
</div>
<div class="bt_text_info_sp">
<ul>
<li>恵比寿西口駅徒歩５分</li>
<li>営業時間 8:00〜20:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--バナーPC用-->
<div class="banner_contents_top_pc pc-only">
<div class="bct_inner">
<ul>
<li>
<a href="#" target="_blank">
<p>美味しいコーヒーの淹れ方講座</p>
<button class="bct_btn">詳しくはこちら</button>
</a>
</li>
<li>
<a href="#" target="_blank">
<p>おすすめコーヒーの産地</p>
<button class="bct_btn">詳しくはこちら</button>
</a>
</li>
</ul>
</div>
</div>
<!--バナータブレット・スマホ用-->
<div class="banner_contents_top_tab mobile-only">
<div class="bct_inner_tab">
<div class="top_banner_tab">
<a href="#" target="_blank">
<img src="img/top_banner.png" alt="お買い得バナー" />
<div class="top_banner_tab_text_wrapper">
<div class="top_banner_tab_text_contents">
<p class="mbr_text_small_tab">美味しいコーヒー豆</p>
<p class="mbr_text_large_tab">販売しています</p>
</div>
</div>
</a>
</div>
<ul>
<li>
<a href="#" target="_blank">
<p>美味しいコーヒーの淹れ方講座</p>
<button class="bct_btn">詳しくはこちら</button>
</a>
</li>
<li>
<a href="#" target="_blank">
<p>おすすめコーヒーの産地</p>
<button class="bct_btn">詳しくはこちら</button>
</a>
</li>
</ul>
</div>
</div>HTMLのsectionのabout_shopの部分
<section class="about_shop">
<div class="about_shop_inner">
<div class="about_shop_text_wrapper">
<h2 class="about_shop_title">About Our Shop</h2>
<p class="about_shop_text">
当店は、厳選されたコーヒー豆を取り扱う専門店です。<br
class="pc-only"
/>
豆の鮮度と品質にこだわり、焙煎から抽出まで一貫して行っています。<br
class="pc-only"
/>
お客様に最高の一杯を提供するために、日々努力しています。
</p>
</div>
<div class="about_shop_image_wrapper">
<img src="img/shop.png" alt="店舗イメージ画像" />
</div>
</div>
</section>HTMLのproduct_sectionの部分
<section class="product_section">
<div class="pt_inner">
<div class="pt_title_wrapper">
<p class="pt_subtitle">商品紹介</p>
<h2 class="pt_title">Coffee List</h2>
<div class="all_btn"><a href="#">全ての商品を見る</a></div>
</div>
</div>
<div class="product_carousel_container">
<div class="product_card_wrapper">
<div class="product_card">
<img src="img/pro1.png" alt="商品1" />
<h3>ブラジリアン1</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro2.png" alt="商品2" />
<h3>タンザ2</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro3.png" alt="商品3" />
<h3>インドネシアコーヒー3</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro4.png" alt="商品4" />
<h3>ジャマイカン4</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro1.png" alt="商品1" />
<h3>ブラジリアン5</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro2.png" alt="商品2" />
<h3>タンザ6</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro3.png" alt="商品3" />
<h3>インドネシアコーヒー7</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
<div class="product_card">
<img src="img/pro4.png" alt="商品4" />
<h3>ジャマイカン8</h3>
<div class="detail_wrapper">
<p><span class="pt_black">価格：</span>900円～</p>
<p class="detail_pro"><a href="#">詳細を見る</a></p>
</div>
<p>
<span class="pt_black">商品説明：</span
>この特別な豆が持つ個性を最大限に引き出すために、ギリギリまで浅く、かつ豆の芯まで火を通す絶妙な浅煎りに仕上げています。
</p>
</div>
</div>
</div>
<div class="carousel_control_wrapper">
<button class="carousel_btn" id="prevBtn">←</button>
<button class="carousel_control" id="carouselToggle">
<span class="play_icon">▶︎</span>
<span class="pause_icon">⏸︎</span>
</button>
<button class="carousel_btn" id="nextBtn">→</button>
</div>
</section>HTMLのprice_table_sectionの部分
<section class="price_table_section">
<div class="pts_inner">
<div class="pts_title_wrapper">
<p class="pts_subtitle">価格表</p>
<h2 class="pts_title">Plice List</h2>
<div class="all_btn"><a href="#">全ての価格を見る</a></div>
</div>
<p class="scrool_text">横スクロールできます</p>
<div class="table-wrapper">
<!-- 固定列テーブル -->
<div class="table-fixed">
<table class="price-table-left">
<thead>
<tr>
<th class="header-dark">コーヒー豆の品名</th>
</tr>
</thead>
<tbody>
<tr>
<td class="room-name">ブラジリアン</td>
</tr>
<tr>
<td class="room-name">タンザ</td>
</tr>
<tr>
<td class="room-name">インドネシアコーヒー</td>
</tr>
<tr>
<td class="room-name">ジャマイカン</td>
</tr>
<tr>
<td class="room-name">アメリカン</td>
</tr>
<tr>
<td class="room-name">コンガ</td>
</tr>
<tr>
<td class="room-name">ブルーマウンテン</td>
</tr>
</tbody>
</table>
</div>
<!-- スクロール可能テーブル -->
<div class="table-scroll">
<table class="price-table-right">
<thead>
<tr>
<th class="header-dark" rowspan="2">味</th>
<th class="header-dark" rowspan="2">産地</th>
<th class="header-dark time-header" colspan="8">
<h2 class="price-table-title">グラム別料金</h2>
<p class="price-table-legend">
<span class="legend-item"
><span class="color-box color-2year"></span
>浅煎り、</span
>
<span class="legend-item"
><span class="color-box color-3month"></span
>中煎り、</span
>
<span class="legend-item"
><span class="color-box color-1month"></span
>深煎り</span
>
</p>
</th>
<th class="header-dark" rowspan="2">
1カ月の定期購入<br />4500g
</th>
</tr>
<tr>
<th class="header-light">500g</th>
<th class="header-light">1000g</th>
<th class="header-light">1500g</th>
<th class="header-light">2000g</th>
<th class="header-light">2500g</th>
<th class="header-light">3000g</th>
<th class="header-light">3500g</th>
<th class="header-light">4000g</th>
</tr>
</thead>
<tbody>
<tr>
<td>フルーティー</td>
<td>サンパウロ</td>
<td class="price-cell bg-2year">900円</td>
<td class="price-cell bg-2year">1,000円</td>
<td class="price-cell bg-2year">2,000円</td>
<td class="price-cell bg-2year">3,000円</td>
<td class="price-cell bg-2year">4,000円</td>
<td class="price-cell bg-2year">5,000円</td>
<td class="price-cell bg-2year">6,000円</td>
<td class="price-cell bg-2year">7,500円</td>
<td class="price-cell">6,500円</td>
</tr>
<tr>
<td>苦味が濃い</td>
<td>タンザニア</td>
<td class="price-cell bg-3month">950円</td>
<td class="price-cell bg-3month">1,100円</td>
<td class="price-cell bg-3month">2,100円</td>
<td class="price-cell bg-3month">3,200円</td>
<td class="price-cell bg-3month">4,200円</td>
<td class="price-cell bg-3month">5,300円</td>
<td class="price-cell bg-3month">6,400円</td>
<td class="price-cell bg-3month">7,800円</td>
<td class="price-cell">7,000円</td>
</tr>
<tr>
<td>苦味が濃く・酸味有</td>
<td>ジャカルタ</td>
<td class="price-cell bg-1month">850円</td>
<td class="price-cell bg-1month">950円</td>
<td class="price-cell bg-1month">1,900円</td>
<td class="price-cell bg-1month">2,800円</td>
<td class="price-cell bg-1month">3,700円</td>
<td class="price-cell bg-1month">4,800円</td>
<td class="price-cell bg-1month">5,900円</td>
<td class="price-cell bg-1month">7,200円</td>
<td class="price-cell">6,800円</td>
</tr>
<tr>
<td>フルーティー・酸味強い</td>
<td>キングストン</td>
<td class="price-cell bg-2year">1,200円</td>
<td class="price-cell bg-2year">1,400円</td>
<td class="price-cell bg-2year">2,600円</td>
<td class="price-cell bg-2year">3,800円</td>
<td class="price-cell bg-2year">5,000円</td>
<td class="price-cell bg-2year">6,200円</td>
<td class="price-cell bg-2year">7,400円</td>
<td class="price-cell bg-2year">8,600円</td>
<td class="price-cell">8,000円</td>
</tr>
<tr>
<td>甘みがあり・酸味弱い</td>
<td>シアトル</td>
<td class="price-cell bg-3month">800円</td>
<td class="price-cell bg-3month">900円</td>
<td class="price-cell bg-3month">1,800円</td>
<td class="price-cell bg-3month">2,700円</td>
<td class="price-cell bg-3month">3,600円</td>
<td class="price-cell bg-3month">4,500円</td>
<td class="price-cell bg-3month">5,400円</td>
<td class="price-cell bg-3month">6,800円</td>
<td class="price-cell">6,300円</td>
</tr>
<tr>
<td>苦味強い・味は濃い</td>
<td>コンゴ</td>
<td class="price-cell bg-3month">920円</td>
<td class="price-cell bg-3month">1,050円</td>
<td class="price-cell bg-3month">2,050円</td>
<td class="price-cell bg-3month">3,100円</td>
<td class="price-cell bg-3month">4,100円</td>
<td class="price-cell bg-3month">5,200円</td>
<td class="price-cell bg-3month">6,300円</td>
<td class="price-cell bg-3month">7,600円</td>
<td class="price-cell">7,200円</td>
</tr>
<tr>
<td>極上の味・苦みや酸味のバランス良し</td>
<td>ジャマイカ</td>
<td class="price-cell bg-1month">1,500円</td>
<td class="price-cell bg-1month">1,700円</td>
<td class="price-cell bg-1month">3,000円</td>
<td class="price-cell bg-1month">4,300円</td>
<td class="price-cell bg-1month">5,600円</td>
<td class="price-cell bg-1month">6,900円</td>
<td class="price-cell bg-1month">8,200円</td>
<td class="price-cell bg-1month">9,500円</td>
<td class="price-cell">9,000円</td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="pts_tax_p">＊価格はすべて「税込み」になります</p>
</div>
</section>
</main>HTMLのfooterから終わりの部分
<footer>
<div class="footer_inner">
<div class="footer_logo">
<a href="index.html"><img src="img/logo.svg" alt="ロゴ画像" /></a>
</div>
<nav class="footer_nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="test1.html">Test1</a></li>
<li><a href="test2.html">Test2</a></li>
<li><a href="access.html">Access</a></li>
</ul>
<div class="footer_btn">
<a href="#" class="btn_gold">お問い合わせ</a>
</div>
</nav>
</div>
</footer>
<script src="js/header.js"></script>
<script src="js/mv-anime.js"></script>
<script src="js/hamburger.js"></script>
<script src="js/table-scroll.js"></script>
<script src="js/card_animation.js"></script>
<script src="js/scroll-text-animation.js"></script>
</body>
</html>サイトは
こちらから