http://tyosuke20xx.com/Gamazon.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gamazon</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #131921;
color: white;
}
.navbar h1 {
font-size: 1.5rem;
}
.navbar nav ul {
list-style: none;
display: flex;
}
.navbar nav ul li {
padding: 0 10px;
}
.navbar nav ul li a {
text-decoration: none;
color: white;
}
.product {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 200px;
float: left;
}
.product img {
width: 100%;
height: auto;
}
.featured-products .carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.featured-products .carousel div {
scroll-snap-align: start;
flex: 0 0 90%;
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<h1>My Gmazon Store</h1>
<input type="text" placeholder="商品を検索" id="search-box">
<button onclick="searchProduct()">検索</button>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品カテゴリ</a></li>
<li><a href="#">セール</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="featured-products">
<h2>特選商品</h2>
<div class="carousel">
<!-- カルーセル用のJavaScriptで動的に商品を挿入 -->
</div>
</section>
<section class="product-list">
<h2>商品リスト</h2>
<div class="products">
<!-- 商品リスト -->
</div>
</section>
<section class="customer-reviews">
<h2>ユーザーレビュー</h2>
<div class="reviews">
<!-- レビュー -->
</div>
</section>
</main>
<footer>
<p>© 2024 My Gmazon Store. All rights reserved.</p>
</footer>
<script>
function searchProduct() {
const searchInput = document.getElementById('search-box').value;
alert('検索した商品: ' + searchInput);
}
// 他にもカルーセルの動きやユーザーレビューを動的に表示する関数を追加
</script>
</body>
</html>
