TEST 2のコーディングです。参考にできます
HTMLのヘッダーまでの部分
<!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="これはTestページです" />
<meta name="keywords" content="test, サンプル, ウェブサイト" />
<!-- OGP -->
<meta property="og:type" content="website" />
<meta property="og:title" content="test2" />
<meta property="og:description" content="これはTestページです" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="test2" />
<meta property="og:image" content="https://example.com/img/ogp.jpg" />
<!-- X Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="test2" />
<meta name="twitter:description" content="これはTestページです" />
<meta name="twitter:image" content="https://example.com/img/ogp.jpg" />
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- 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/footer.css" />
<link rel="stylesheet" type="text/css" href="css/mv.css" />
<link rel="stylesheet" type="text/css" href="css/section.css" />
<!-- 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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- SVGスプライト定義 -->
<svg style="display: none">
<symbol id="attention_icon" viewBox="0 0 50 50">
<mask
id="mask0"
style="mask-type: luminance"
maskUnits="userSpaceOnUse"
x="5"
y="2"
width="9"
height="21"
>
<path
d="M5.33398 2.66602H13.334V22.666H5.33398V2.66602Z"
fill="white"
/>
</mask>
<g mask="url(#mask0)">
<path
d="M12.5111 3.31315L7.76628 2.81836L7.73502 3.31836L7.47982 3.29753L6.22461 22.5423L7.55273 22.5892L7.67252 22.11L7.83919 22.1152L12.5111 3.31315Z"
/>
</g>
<g>
<path
d="M24.6862 9.22852L24.4102 9.71289L24.3997 9.70768L14.8789 26.5879L16.0299 27.2337L28.3997 12.2702L28.332 12.2337L28.6862 11.7962L24.6862 9.22852Z"
/>
</g>
<g>
<path
d="M36.5918 20.0684L22.7168 33.5684L23.6387 34.5215L39.6699 23.709L36.5918 20.0684Z"
/>
</g>
<g>
<path
d="M44.4219 36.5098L26.2031 42.541L26.6042 43.8171L45.5677 41.1764L44.4219 36.5098Z"
/>
</g>
</symbol>
</svg>
<header id="header">
<div class="header_inner">
<div class="header_logo">
<a href="index.html"
><img src="img/test_logo.svg" alt="ロゴ画像"
/></a>
</div>
<nav class="header_nav pc-only">
<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="test3.html">Test3</a></li>
</ul>
<div class="header_btn">
<a href="#" class="btn_basic">お問い合わせ</a>
</div>
</nav>
</div>
</header>HTMLのmain_visualの部分まで
<div class="main_visual">
<picture>
<source media="(max-width: 768px)" srcset="img/mv_sp.png" />
<source media="(max-width: 1440px)" srcset="img/mv1.png" />
<img src="img/mv1.png" alt="メインビジュアル" loading="lazy" />
</picture>
</div>HTMLのsectionのmainの部分
<main id="main">
<section class="section_test_one">
<div class="section_inner">
<h2 class="section_title">
Cordinate<svg class="icon-attention" width="50px" height="50px">
<use href="#attention_icon" fill="#333" />
</svg>
</h2>
<div class="section_items">
<ul class="section_item">
<li>
<a href="#">
<div class="section_item_img">
<img
src="img/test1.png"
alt="アイテム画像"
loading="lazy"
/>
</div>
<div class="section_item_text">
<h3 class="item_title">Item Title 1</h3>
<p class="item_desc">
ゆったりとしたドロップショルダーながら、着丈と袖丈のバランスを調整することで、一枚でサマになる洗練されたオーバーサイズシルエットを実現。体型カバーにも最適です。
</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="section_item_img">
<img
src="img/test2.png"
alt="アイテム画像"
loading="lazy"
/>
</div>
<div class="section_item_text">
<h3 class="item_title">Item Title 2</h3>
<p class="item_desc">
ゆったりとしたドロップショルダーながら、着丈と袖丈のバランスを調整することで、一枚でサマになる洗練されたオーバーサイズシルエットを実現。体型カバーにも最適です。
</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="section_item_img">
<img
src="img/test1.png"
alt="アイテム画像"
loading="lazy"
/>
</div>
<div class="section_item_text">
<h3 class="item_title">Item Title 3</h3>
<p class="item_desc">
ゆったりとしたドロップショルダーながら、着丈と袖丈のバランスを調整することで、一枚でサマになる洗練されたオーバーサイズシルエットを実現。体型カバーにも最適です。
</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="section_item_img">
<img
src="img/test2.png"
alt="アイテム画像"
loading="lazy"
/>
</div>
<div class="section_item_text">
<h3 class="item_title">Item Title 4</h3>
<p class="item_desc">
ゆったりとしたドロップショルダーながら、着丈と袖丈のバランスを調整することで、一枚でサマになる洗練されたオーバーサイズシルエットを実現。体型カバーにも最適です。
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<div class="contact_wrapper">
<div class="contact_inner">
<img src="img/back3.png" alt="背景画像" class="contact_bg" />
<div class="contact_content">
<h2 class="contact_title">Contact</h2>
<p class="contact_desc">
お問い合わせは下記のボタンよりお願いいたします。
</p>
<div class="contact_btn">
<a href="#" class="btn_large">お問い合わせフォームへ</a>
</div>
</div>
</div>
</div>
</main>HTMLのfooterから終わりの部分
<footer>
<div class="footer_inner">
<div class="footer_logo">
<a href="index.html"
><img src="img/test_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="test3.html">Test3</a></li>
</ul>
</nav>
</div>
<div class="footer_copyright">
<p>© 2024 test2. All rights reserved.</p>
</div>
</footer>
<!-- JavaScriptファイルの読み込み -->
</body>
</html>サイトは
こちらから