<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=393, initial-scale=1.0">
<title>Game Screen</title>
<style>
body {
margin: 0;
background: #ddd;
display: flex;
justify-content: center;
font-family: sans-serif;
}
/* 画面全体 */
.screen {
position: relative;
width: 393px;
height: 852px;
background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%);
overflow: hidden;
}
/* ===== 中央 写真グリッド ===== */
.photo-grid-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* タイトル */
.photo-title {
position: absolute;
top: -56px; /* 写真の上に配置 */
left: 50%;
transform: translateX(-50%);
margin: 0;
font-size: 28px;
font-weight: 700;
color: black;
letter-spacing: 0.08em;
text-shadow:
0 2px 6px rgba(0,0,0,0.6);
pointer-events: none; /* クリック邪魔しない */
}
.photo-grid {
width: 372px;
height: 496px;
display: grid;
grid-template-columns: repeat(3, 110px);
grid-template-rows: repeat(4, 110px);
gap: 16px;
}
.photo-grid img {
width: 110px;
height: 110px;
object-fit: cover;
outline: 7px solid white;
box-sizing: border-box;
background: #ccc;
}
/* ===== 下部メニューバー ===== */
.menu-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 88px;
background: white;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 2px solid black;
}
.menu-item {
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.menu-item img {
width: 44px;
height: 44px;
}
.menu-item.center img {
width: 48px;
height: 48px;
}
.menu-item.active {
transform: translateY(-4px);
}
</style>
</head>
<body>
<div class="screen">
<!-- 中央 写真グリッド -->
<div class="photo-grid-wrapper">
<h1 class="photo-title">旅人達の図鑑</h1>
<div class="photo-grid">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
<img src="https://placehold.co/110x110" alt="">
</div>
</div>
<!-- 下部メニューバー -->
<nav class="menu-bar" id="menuBar"></nav>
</div>
<script>
/* ===== メニュー object（Reactで使っていた想定） ===== */
const menuItems = [
{ id: "home", label: "ホーム", src: "https://placehold.co/44x44" },
{ id: "map", label: "マップ", src: "https://placehold.co/44x44" },
{ id: "camera", label: "カメラ", src: "https://placehold.co/48x48", center: true },
];
const menuBar = document.getElementById("menuBar");
/* ===== React の map() → HTML ===== */
menuItems.forEach(item => {
const btn = document.createElement("button");
btn.className = "menu-item";
if (item.center) btn.classList.add("center");
const img = document.createElement("img");
img.src = item.src;
img.alt = item.label;
btn.appendChild(img);
menuBar.appendChild(btn);
btn.addEventListener("click", () => {
document.querySelectorAll(".menu-item")
.forEach(b => b.classList.remove("active"));
btn.classList.add("active");
console.log("select:", item.id);
});
});
</script>
</body>
</html>
