<!-- ここにコードをそのまま貼る --><!-- ここにコードをそのまま貼る -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>スライドギャラリー + キャプションアニメーション</title>
<style>
body {
margin: 0;
font-family: sans-serif;
background: #faf8f5;
}
.gallery-container {
position: relative;
width: 95%;
max-width: 900px;
margin: 20px auto;
padding: 10px;
background: #faf8f5;
border: 3px solid #96514D;
border-radius: 16px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1),
inset 0 0 10px rgba(255, 255, 255, 0.4);
}
.scroll-wrapper {
position: relative;
background: linear-gradient(to right, #f8e8e0, #fff);
}
.scroll-gallery {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-padding-left: 10px;
scroll-padding-right: 10px;
}
.scroll-gallery-item {
flex: 0 0 100%;
scroll-snap-align: start;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px; /* 画像とキャプションの距離を狭くする */
overflow: hidden;
padding: 0 10px;
}
.scroll-gallery-item img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 10px;
border: 2px solid #ccc;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
will-change: transform;
margin: 0; /* マージン削除 */
}
.scroll-gallery-item img:hover {
transform: scale(1.02);
border-color: #999;
}
.caption {
font-size: 22px;
font-weight: bold;
font-family: 'Playfair Display', 'Georgia', serif;
text-align: center;
margin-bottom: 12px;
background: linear-gradient(90deg, #8c5c3e, #cfa98c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1.5px;
user-select: none;
opacity: 0;
transform: translateX(100px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-gallery-item.active .caption {
opacity: 1;
transform: translateX(0);
}
.scroll-button {
position: absolute;
top: 0px;
z-index: 10;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
user-select: none;
}
.scroll-button:hover {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
.scroll-left {
left: 10px;
}
.scroll-right {
right: 10px;
}
@media (max-width: 600px) {
.caption {
font-size: 14px !important;
}
}
.image-divider {
height: 4px;
background: linear-gradient(to right, #8B5E3C, #D2B48C, #8B5E3C);
border-radius: 3px;
margin: 30px 0;
}
.caption-bottom {
font-size: 14px;
color: #555;
margin-top: -6px; /* ← 距離を縮めるポイント！ */
text-align: center;
opacity: 0;
transform: translateX(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-gallery-item.active .caption-bottom {
opacity: 1;
transform: translateX(0);
}
</style>
</head>
<body>
<div class="gallery-container">
<div class="scroll-wrapper">
<!-- 左右ボタン -->
<button class="scroll-button scroll-left" aria-label="左にスクロール" onclick="scrollGallery(-1)">←</button>
<button class="scroll-button scroll-right" aria-label="右にスクロール" onclick="scrollGallery(1)">→</button>
<div class="scroll-gallery" id="gallery">
<!-- 1列目 -->
<div class="scroll-gallery-item">
<div class="caption">line 0/<br>ここにキャプションを上書きする</div>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像1" />
</a>
<div class="caption-bottom">Click to enlarge</div>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像2" />
</a>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 2列目 -->
<div class="scroll-gallery-item">
<div class="caption">line 1/<br>ここにキャプションを上書きする</div>
<a href=""><img src="" alt="画像1" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像1.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像2" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像2.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像3" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像3.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像4" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像4.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像5" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像5.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像6" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像6.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 3列目 -->
<div class="scroll-gallery-item">
<div class="caption">line 2/<br>ここにキャプションを上書きする</div>
<a href=""><img src="" alt="画像1" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像1.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像2" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像2.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像3" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像3.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像4" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像4.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像5" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像5.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像6" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像6.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 4列目 -->
<div class="scroll-gallery-item">
<div class="caption">line 3/<br>ここにキャプションを上書きする</div>
<a href=""><img src="" alt="画像1" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像1.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像2" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像2.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像3" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像3.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像4" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像4.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像5" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像5.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像6" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像6.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 5列目 -->
<div class="scroll-gallery-item">
<div class="caption">line 4/<br>ここにキャプションを上書きする</div>
<a href=""><img src="" alt="画像1" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像1.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像2" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像2.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像3" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像3.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像4" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像4.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像5" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像5.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像6" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像6.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 6列目 --> <!-- コピーはここから -->
<div class="scroll-gallery-item">
<div class="caption">line 5/<br>ここにキャプションを上書きする</div>
<a href=""><img src="" alt="画像1" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像1.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像2" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像2.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像3" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像3.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像4" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像4.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像5" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像5.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<div class="image-divider"></div>
<a href=""><img src="" alt="画像6" /></a>
<div class="caption-bottom">Click to enlarge</div>
<a href=""><img src="" alt="画像6.5" /></a>
<div class="caption-bottom">Tap to see English</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div> <!-- コピーはここまでがセット -->
</div>
<script>
const gallery = document.getElementById('gallery');
const items = gallery.querySelectorAll('.scroll-gallery-item');
function updateActiveItem() {
let closestItem = null;
let closestDistance = Infinity;
items.forEach(item => {
const rect = item.getBoundingClientRect();
const distance = Math.abs(rect.left - 10); // 少し左寄せ基準に調整
if (distance < closestDistance) {
closestDistance = distance;
closestItem = item;
}
});
items.forEach(item => item.classList.remove('active'));
if (closestItem) {
closestItem.classList.add('active');
}
}
// スクロール時に実行
gallery.addEventListener('scroll', () => {
requestAnimationFrame(updateActiveItem);
});
// 初期状態で1番目にactiveを追加
window.addEventListener('DOMContentLoaded', () => {
updateActiveItem();
});
// スクロールボタン動作
function scrollGallery(direction) {
const scrollAmount = gallery.offsetWidth;
gallery.scrollBy({ left: scrollAmount * direction, behavior: 'smooth' });
}
window.scrollGallery = scrollGallery;
</script>
</body>
</html>
<div>こんにちは！</div>こんにちは！