TEST 4のコーディングです。デザイン重視のサイトです
HTMLのヘッダーまでの部分（headerは二枚使いです）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test2</title>
<meta name="description" content="これはJsのTestページです" />
<meta name="keywords" content="test, サンプル, ウェブサイト" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<!--スマホのズーム無効化-->
<!-- Google Fontsの読み込み -->
<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=Noto+Serif+JP:wght@ 200..900&display=swap"
rel="stylesheet"
/>
<!-- CSSファイルの読み込み -->
<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/header.css" />
<link rel="stylesheet" type="text/css" href="css/mv.css" />
<link rel="stylesheet" type="text/css" href="css/carousel.css" />
<link rel="stylesheet" type="text/css" href="css/design.css" />
</head>
<body>
<header class="header_design">
<div class="header_inner_design">
<div class="header_logo_design">
<a href="index.html"
><img src="images/logo_design.svg" alt="ロゴ画像"
/></a>
</div>
<nav class="header_nav_design pc-only">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="access.html">Access</a></li>
</ul>
<div class="header_btn_design">
<a href="#" class="btn_basic">お問い合わせ</a>
</div>
</nav>
<div class="openbtn mobile-only">
<span></span>
<span></span>
</div>
<nav class="g-nav mobile-only">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
<div class="g_nav_btn">
<a href="#" class="g_nav_btn_link">お問い合わせ</a>
</div>
</ul>
</div>
</nav>
</div>
</header>
<header class="header_hide">
<div class="header_hide_inner_design">
<div class="header_hide_logo_design">
<a href="index.html"
><img src="images/logo_design.svg" alt="ロゴ画像"
/></a>
</div>
<nav class="header_hide_nav_design pc-only">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="access.html">Access</a></li>
</ul>
<div class="header_btn_design">
<a href="#" class="btn_basic">お問い合わせ</a>
</div>
</nav>
<div class="openbtn mobile-only">
<span></span>
<span></span>
</div>
<nav class="g-nav mobile-only">
<div id="g-nav-list">
<!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
<div class="g_nav_btn">
<a href="#" class="g_nav_btn_link">お問い合わせ</a>
</div>
</ul>
</div>
</nav>
</div>
</header>htmlのmv部分まで
<main id="main">
<section class="mv_top_wrapper_design">
<h2 class="mv-title">
<span class="mv-title-line-mask">
<span class="mv-title-line">自然も、暮らす人も</span>
</span>
<span class="mv-title-line-mask">
<span class="mv-title-line">ゆたかに暮らし、創造する未来へ</span>
</span>
</h2>
<div class="mv_top_wrapper_design_mv">
<div class="mv_top_inner_design">
<div class="mv_top_content_design">
<ul>
<li>
<picture>
<source
media="(max-width: 769px)"
srcset="images/d_mv_1_sp.webp"
/>
<source
media="(min-width: 770px)"
srcset="images/d_mv1.webp"
/>
<img class="mv_image" src="images/d_mv1.webp" alt="説明" />
</picture>
</li>
<li>
<picture>
<source
media="(max-width: 769px)"
srcset="images/d_mv_2_sp.webp"
/>
<source
media="(min-width: 770px)"
srcset="images/d_mv2.webp"
/>
<img class="mv_image" src="images/d_mv2.webp" alt="説明" />
</picture>
</li>
<li>
<picture>
<source
media="(max-width: 769px)"
srcset="images/d_mv_3_sp.webp"
/>
<source
media="(min-width: 770px)"
srcset="images/d_mv3.webp"
/>
<img class="mv_image" src="images/d_mv3.webp" alt="説明" />
</picture>
</li>
<li>
<picture>
<source
media="(max-width: 769px)"
srcset="images/d_mv_4_sp.webp"
/>
<source
media="(min-width: 770px)"
srcset="images/d_mv4.webp"
/>
<img class="mv_image" src="images/d_mv4.webp" alt="説明" />
</picture>
</li>
</ul>
</div>
</div>
</div>
</section>htmlの商品ラインアップの箇所
<section class="product_design_section">
<div class="product_design_inner">
<h2 class="section_title_design fadein-effect fadein-right">
<span>PRODUCT</span>商品ラインアップ
</h2>
<p class="tl_sub fadein-effect fadein-up">
北海道十勝の自然の恵みをより身近に感じられる商品を販売しています。
</p>
<ul class="product_design_items">
<li class="product_design_item fadein-effect fadein-up">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_design_item_title_wrapper">
<h3 class="product_design_item_title">製品名が入ります</h3>
<p class="product_design_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_design_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_design_item fadein-effect fadein-up">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_design_item_title_wrapper">
<h3 class="product_design_item_title">製品名が入ります</h3>
<p class="product_design_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_design_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_design_item fadein-effect fadein-up">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_design_item_title_wrapper">
<h3 class="product_design_item_title">製品名が入ります</h3>
<p class="product_design_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_design_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
</ul>
<div class="btn_more fadein-effect fadein-up">
<a href="#">商品ラインアップ一覧</a>
</div>
</div>
<div class="product_design_image_group">
<figure class="product_design_image_1 fadein-effect fadein-up">
<picture>
<source media="(max-width: 769px)" srcset="images/neta_sp1.png" />
<source media="(min-width: 770px)" srcset="images/neta1.png" />
<img
class="product_design_image_bg_1"
src="images/neta1.png"
alt="背景画像"
/>
</picture>
</figure>
<figure class="product_design_image_2 fadein-effect fadein-up">
<picture>
<source media="(max-width: 769px)" srcset="images/neta_sp2.png" />
<source media="(min-width: 770px)" srcset="images/neta2.png" />
<img
class="product_design_image_bg_1"
src="images/neta2.png"
alt="背景画像"
/>
</picture>
</figure>
<figure class="product_design_image_3 fadein-effect fadein-up">
<picture>
<source media="(max-width: 769px)" srcset="images/neta_sp3.png" />
<source media="(min-width: 770px)" srcset="images/neta3.png" />
<img
class="product_design_image_bg_1"
src="images/neta3.png"
alt="背景画像"
/>
</picture>
</figure>
<figure class="product_design_image_4 fadein-effect fadein-up">
<picture>
<source media="(max-width: 769px)" srcset="images/neta_sp4.png" />
<source media="(min-width: 770px)" srcset="images/neta4.png" />
<img
class="product_design_image_bg_1"
src="images/neta4.png"
alt="背景画像"
/>
</picture>
</figure>
</div>
</section>HTMLのオススメ商品の箇所
<section class="recomend_product_section">
<div class="recomend_product_inner">
<h2 class="section_title_recomend fadein-effect fadein-right">
<span>RECOMMEND</span>おすすめ商品
</h2>
<p class="tl_sub_recomend fadein-effect fadein-up">
当店おすすめの商品をご紹介します。
</p>
<div class="recomend_product_wrapper fadein-effect fadein-up">
<ul class="product_recomend_items">
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
<li class="product_recomend_item">
<a href="#">
<img src="images/pr.png" alt="製品画像" />
<div class="product_recomend_item_title_wrapper">
<h3 class="product_recomend_item_title">
製品名が入ります
</h3>
<p class="product_recomend_item_text">
ここに製品の説明が入ります。ここに製品の説明が入ります。ここに製品の説明が入ります。
</p>
<div class="product_recomend_item_more">
<span class="c_btn">詳しく見る</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="carousel-controls">
<button class="carousel-prev" aria-label="前へ">＜</button>
<button class="carousel-next" aria-label="次へ">＞</button>
</div>
</div>
</section>
</main>HTMLのfooterから終わりの箇所
<footer class="p_footer">
<div class="p_footer_inner">
<div class="ft_logo">
<a href="#"><img src="images/logo_design.svg" alt="ロゴ画像" /></a>
</div>
<nav class="ft_nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="access.html">ACCESS</a></li>
</ul>
</nav>
<small class="ft_copyright">
© 2025 test2 All Rights Reserved.
</small>
</div>
</footer>
<!-- JavaScriptファイルの読み込み -->
<script src="js/anime_mv.js"></script>
<script src="js/carousel.js"></script>
<script src="js/carousel_secondary.js"></script>
<script src="js/mv_text.js"></script>
<script src="js/hamburger.js"></script>
<script src="js/header_hide_open.js"></script>
<script src="js/fadein.js"></script>
<script src="js/fadein-sequence.js"></script>
<script src="js/carousel_recomend.js"></script>
</body>
</html>サイトは
こちらから