Embedded Files
▼ 画像は拡大前（縮小サイズ）と拡大後（通常サイズ）の２枚 用意します。
NO.11（タップ・フェードイン）
NO.11 コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
#zoom {
width: 100%;
aspect-ratio: 600 / 375; /* 表示領域の比率 */
display: block;
cursor: zoom-in;
/* 縮小画像（そのまま表示） */
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPvy5p-Ylj7IScxRqsxGKZPMBsVwYf440JOTVtKRZX4KFtZT-6EQY6FfT49xnVK2un2bEe-xIWnElDlGH-x21k3DaO3ckwvWt1RsBBbTgnF8N7aGM7wZuULfkhSB1cfIMrE45paA4DpEZvmX4fKCpIWqA=w200-h125-s-no-gm");
background-repeat: no-repeat;
background-position: left top;
}
/* 拡大状態 */
#zoom.active {
cursor: zoom-out;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPVjqaCcBOZN3Nz2jSyNJf4SIx7voxtHfHaH4iSiSQF-LveEoPLQWZqjAd2APmOTaIbwxNJ-epb7aJf3-G3lz5l_Tr1nWWE0IvV2h01YNGJNQxTFkBCMBXvQKnsgz-frAZXuJr8Y-cLTKsPMuY5nJvmDQ=w600-h375-s-no-gm");
background-position: center;
background-size: contain;
animation-name: fadein;
animation-duration: 4s;
animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */
animation-timing-function: linear; /* linear 以外にも、ease・ease-in・ease-out・ease-in-out などお試しください */
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="zoom"></div>
<script>
const zoom = document.getElementById("zoom");
zoom.addEventListener("click", () => {
zoom.classList.toggle("active");
});
</script>
</body>
</html>
PC：マウスオーバー → 拡大 / マウスアウト → 縮小
スマホ：タップ → 拡大 / もう一度タップ → 縮小
NO.12（PC：マウスオーバー・フェードイン）
NO.12 コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
#zoom {
width: 100%;
aspect-ratio: 600 / 375;
cursor: zoom-in;
/* 縮小画像 */
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPvy5p-Ylj7IScxRqsxGKZPMBsVwYf440JOTVtKRZX4KFtZT-6EQY6FfT49xnVK2un2bEe-xIWnElDlGH-x21k3DaO3ckwvWt1RsBBbTgnF8N7aGM7wZuULfkhSB1cfIMrE45paA4DpEZvmX4fKCpIWqA=w200-h125-s-no-gm");
background-repeat: no-repeat;
background-position: left top;
background-size: auto;
}
/* ===============================
PC：マウスオーバー拡大
================================ */
@media (hover: hover) {
#zoom:hover {
cursor: zoom-out;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPVjqaCcBOZN3Nz2jSyNJf4SIx7voxtHfHaH4iSiSQF-LveEoPLQWZqjAd2APmOTaIbwxNJ-epb7aJf3-G3lz5l_Tr1nWWE0IvV2h01YNGJNQxTFkBCMBXvQKnsgz-frAZXuJr8Y-cLTKsPMuY5nJvmDQ=w600-h375-s-no-gm");
background-position: center;
background-size: contain;
animation-name: fadein;
animation-duration: 4s;
animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */
animation-timing-function: linear; /* linear 以外にも、ease・ease-in・ease-out・ease-in-out などお試しください */
}
}
/* ===============================
スマホ：タップ拡大
================================ */
#zoom.active {
cursor: zoom-out;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPVjqaCcBOZN3Nz2jSyNJf4SIx7voxtHfHaH4iSiSQF-LveEoPLQWZqjAd2APmOTaIbwxNJ-epb7aJf3-G3lz5l_Tr1nWWE0IvV2h01YNGJNQxTFkBCMBXvQKnsgz-frAZXuJr8Y-cLTKsPMuY5nJvmDQ=w600-h375-s-no-gm");
background-position: center;
background-size: contain;
animation-name: fadein;
animation-duration: 4s;
animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */
animation-timing-function: linear; /* linear 以外にも、ease・ease-in・ease-out・ease-in-out などお試しください */
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="zoom"></div>
<script>
const zoom = document.getElementById('zoom');
/* タップで拡大 ⇔ 縮小 */
zoom.addEventListener('click', () => {
zoom.classList.toggle('active');
});
</script>
</body>
</html>
▼ 画像は拡大後（通常サイズ）の１枚 でOKです。
NO.13（タップ）
NO.13 コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像クリック 拡大・縮小</title>
<style>
#zoom {
width: 100%;
aspect-ratio: 600 / 375; /* 画像比率固定(画像の大きさにより変更) */
display: block;
cursor: zoom-in;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczNjzAKQj7K6TjQLcpqx-xLNkqVaCrLvq1xU3Dvkj3Ftu-DvEGosW0mYor6X6mI0sM6qH63cAoX3rCXEB1CEDoEM5kArqYpHtFo1K18nBW3gerVqS91oL7sRydgjLx5vt9rNUmOuiJW17vyUlRCsl6hcjw=w600-h375-s-no-gm");
background-repeat: no-repeat;
background-position: left top;
background-size: 45%; /* 縮小倍率(画像の大きさにより変更) */
background-color: white; /* 背景色に合わせる */
}
#zoom.active {
cursor: zoom-out;
background-position: center;
background-size: contain;
}
</style>
</head>
<body>
<div id="zoom"></div>
<script>
const zoom = document.getElementById("zoom");
zoom.addEventListener("click", () => {
zoom.classList.toggle("active");
});
</script>
</body>
</html>
NO.14（タップ・フェードイン）
NO.14 コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像クリック 拡大・縮小（フェード付）</title>
<style>
/* ===============================
画像表示本体
================================ */
#zoom {
width: 100%;
aspect-ratio: 600 / 375; /* 画像比率（画像により変更） */
display: block;
cursor: zoom-in;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczNjzAKQj7K6TjQLcpqx-xLNkqVaCrLvq1xU3Dvkj3Ftu-DvEGosW0mYor6X6mI0sM6qH63cAoX3rCXEB1CEDoEM5kArqYpHtFo1K18nBW3gerVqS91oL7sRydgjLx5vt9rNUmOuiJW17vyUlRCsl6hcjw=w600-h375-s-no-gm");
background-repeat: no-repeat;
/* 縮小時 */
background-position: left top;
background-size: 45%; /* 縮小倍率(画像の大きさにより変更) */
background-color: #ece7ea; /* 背景色に合わせる */
}
/* ===============================
拡大状態
================================ */
#zoom.active {
cursor: zoom-out;
background-position: center;
background-size: contain;
}
/* ===============================
フェード演出
================================ */
#zoom.fade {
animation: fadein 4s linear;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="zoom" tabindex="0"></div>
<script>
const zoom = document.getElementById("zoom");
zoom.addEventListener("click", () => {
/* 拡大・縮小切替 */
zoom.classList.toggle("active");
/* フェードインを毎回有効化 */
zoom.classList.remove("fade");
void zoom.offsetWidth; // 強制リフロー（重要）
zoom.classList.add("fade");
/* focus 付与（Google Sites 対策） */
zoom.focus();
});
</script>
</body>
</html>
NO.15（複数画像タイトル入り、タップで拡大）
「ボタンアクション」もご覧ください
NO.15 コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像クリック等倍拡大</title>
<style>
table {
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
td {
padding: 0;
}
/* ===============================
タイトル文字
================================ */
.text {
font-size: 1.8vw;
line-height: 1.2;
color: dimgray;
text-align: left;
}
/* ===============================
一覧画像（縮小表示）
================================ */
.list img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
cursor: zoom-in;
max-width: none;
object-fit: unset;
background: transparent;
}
/* ===============================
拡大表示（等倍）
================================ */
#zoom-overlay {
position: fixed;
inset: 0;
background: white; /* 写真背景色 */
display: none;
z-index: 9999;
}
#zoom-box {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#zoom-img {
width: auto; /* 等倍 */
max-width: 100vw;
height: auto;
cursor: zoom-out;
object-fit: contain;
background: transparent;
}
</style>
</head>
<body>
<div class="list">
<table>
<tr class="text">
<td>owl</td>
<td>bird</td>
<td>puppy and kitten</td>
<td>puppy</td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczPVjqaCcBOZN3Nz2jSyNJf4SIx7voxtHfHaH4iSiSQF-LveEoPLQWZqjAd2APmOTaIbwxNJ-epb7aJf3-G3lz5l_Tr1nWWE0IvV2h01YNGJNQxTFkBCMBXvQKnsgz-frAZXuJr8Y-cLTKsPMuY5nJvmDQ=w600-h375-s-no-gm?authuser=0"></td>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczOn4RIyiyUAgejq3R7-eVtp_VjpQxyO7NFjQDCuhRSL-Cd4-DdKBHs19eNzf5L6LW_pV8rGKbYFE076_YzD_EWujZWuGTEOAkPnQyMHcjZ-mn2kgalylPFKniHYCofzgrNYNV0A11SFPDou50D5rl9KCg=w600-h375-s-no-gm"></td>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczOlAm_Ez7hLuGtRtm-QYoWDMZ8QdEV5vbYy4N3OtWBfOVJ2bfEm0xE5SZL5IL9hAClJchJKOt7eEANyhUq9v-5laGaqaxIpDkT_KxJjW65Q82nclcrY2H7BQP2w83RCihIzDZ5qpO8Dh6xVsOGnVDh4RA=w600-h375-s-no-gm"></td>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczPXn-cRU1GqimlKazsltWPHuS9vrL5Y_-Q0UaVm9PuLYWryjF5Tze0X0BVJJNFrM6bWZYtA9LOuE5jfCRyTdu9xtHjZmB5xVciB5MU5nDkrT2IX3dDyrWi87zPouKCADBtdprFitpJOnnm0D7N7dS-sDg=w600-h375-s-no-gm"></td>
</tr>
<tr class="text">
<td>piglet</td>
<td>hedgehog</td>
<td>kitten</td>
<td>rabbits</td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczMeM8NoWCwKDdYofIO646jBa8upNacwyJuI2KjFe5j9rUaN9Us231PxcvktqXfS8BUJDoRwj-LG04XdhVpRUHtaaqakquCEYK2tg7B7cE8bT7n4QnoHjw8InaGFGPWuk7JcNu_zIykektxrG8ie8zYtlg=w600-h375-s-no-gm"></td>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNcaauqfp-7BN3I-ufQgflBEHvotk9mMzMR8zNVDHoX6XD2oMgwWNLImxnJKm42GHbIsCi1RKWpyJKPCmH5-jXmBDbHnihQPj6_1wbbaNZxYYjTLVFH0LyN9JTf9Vko121Xo7kLwtHjfrYepz-tCHUpGg=w600-h375-s-no-gm"></td>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNL6a_rYKaG3ZVl6akrxCdKswEj_HIeoO85dM5aDCpOFks7ZbfwUa6XyNt6K_lrPL8EajCurx5gQXue2zWycGOt_oBAAsNzMUuWKsVFocXtj3Tvh33ArlCe8dIrnQDmDQtsRp2TQLJ0GXzLoUhprVV19w=w600-h375-s-no-gm"></td>
<td><img src="https://lh3.googleusercontent.com/pw/AP1GczNjzAKQj7K6TjQLcpqx-xLNkqVaCrLvq1xU3Dvkj3Ftu-DvEGosW0mYor6X6mI0sM6qH63cAoX3rCXEB1CEDoEM5kArqYpHtFo1K18nBW3gerVqS91oL7sRydgjLx5vt9rNUmOuiJW17vyUlRCsl6hcjw=w600-h375-s-no-gm"></td>
</tr>
</table>
</div>
<!-- 拡大表示 -->
<div id="zoom-overlay">
<div id="zoom-box">
<img id="zoom-img">
</div>
</div>
<script>
/* 拡大表示 */
const overlay = document.getElementById('zoom-overlay');
const zoomImg = document.getElementById('zoom-img');
document.querySelectorAll('.list img').forEach(img => {
img.addEventListener('click', () => {
zoomImg.src = img.src;
overlay.style.display = 'block';
});
});
/* 閉じる */
overlay.addEventListener('click', () => {
overlay.style.display = 'none';
zoomImg.src = '';
});
</script>
</body>
</html>
NO.16
NO.17
NO.18
Google Sites
Report abuse