<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=393, initial-scale=1.0">
<title>旅人達の図鑑 - 酒田図鑑</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;
}
.title {
font-size: 36px;
font-weight: bold;
text-align: center;
}
/* ===== 中央 写真グリッド ===== */
.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: bold;
color: black;
letter-spacing: 0.08em;
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;
}
/* ===== 下部メニューバー ===== */
.bottom-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 66px;
background: white;
border-top: 2.5px solid black;
display: flex;
justify-content: space-around;
align-items: center;
}
.bottom-icon {
width: 48px;
height: 48px;
background: gray;
font-size: xx-large;
text-align: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="screen">
<h1 class="title">旅人達の図鑑</h1>
<!-- 中央 写真グリッド -->
<div class="photo-grid-wrapper">
<!--<h1 class="photo-title">旅人達の図鑑</h1>-->
<div class="photo-grid">
<img src="./img/photo/IMG_1262.jpeg" alt="">
<img src="./img/photo/IMG_1569.jpg" alt="">
<img src="./img/photo/IMG_2039.jpg" alt="">
<img src="./img/photo/IMG_1467.jpg" alt="">
<img src="./img/photo/IMG_1396.jpg" alt="">
<img src="./img/photo/140436.jpg" alt="">
<img src="./img/photo/IMG_1296.jpeg" alt="">
<img src="./img/photo/IMG_1585.jpg" alt="">
<img src="./img/photo/IMG_1013.jpg" alt="">
<img src="./img/photo/IMG_1271.jpeg" alt="">
<img src="./img/photo/IMG_1293.jpeg" alt="">
<img src="./img/photo/IMG_1879.jpg" alt="">
</div>
</div>
<!-- 下部メニューバー -->
<div class="bottom-bar">
<button class="bottom-icon" onclick="location.href='mission.html'">⚔</button>
<button class="bottom-icon" onclick="location.href='tabibito.html'">📕</button>
<button class="bottom-icon" onclick="location.href='kanko.html'">📍</button>
</div>
</div>
</body>
</html>
