Embedded Files
▼ 画像は拡大前（縮小サイズ）と拡大後（通常サイズ）の2枚用意します。
NO.11（タップ）
NO.11 コード
画像タップで拡大
余白をクリックすると元画像に戻ります
<div tabindex="0"></div>
<style>
div {
/* 画像の実サイズをpxで指定するとスマホの画面には収まらなくなります */
width: 100%;
height: 100%;
display: block;
border-radius: 0px; /* 画像の角の丸み */
/* 縮小画像のパスです */
background: url("https://lh3.googleusercontent.com/pw/AP1GczPvy5p-Ylj7IScxRqsxGKZPMBsVwYf440JOTVtKRZX4KFtZT-6EQY6FfT49xnVK2un2bEe-xIWnElDlGH-x21k3DaO3ckwvWt1RsBBbTgnF8N7aGM7wZuULfkhSB1cfIMrE45paA4DpEZvmX4fKCpIWqA=w200-h125-s-no-gm?authuser=0") no-repeat;
}
div:focus {
display: block;
width: 100%;
height: 100%;
background-size: 100% 100%;
animation-name: fadein;
animation-duration: 4s;
animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */
animation-timing-function: linear; /* linear 以外にも、ease・ease-in・ease-out・ease-in-out などお試しください */
/* 拡大画像のパスです */
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPVjqaCcBOZN3Nz2jSyNJf4SIx7voxtHfHaH4iSiSQF-LveEoPLQWZqjAd2APmOTaIbwxNJ-epb7aJf3-G3lz5l_Tr1nWWE0IvV2h01YNGJNQxTFkBCMBXvQKnsgz-frAZXuJr8Y-cLTKsPMuY5nJvmDQ=w600-h375-s-no-gm?authuser=0");
}
@keyframes fadein {
from {
opacity: 0; /* 画像の透明度、通常は0から1 */
}
to {
opacity: 1;
}
}
</style>
NO.12（マウスオーバー）
NO.12 コード
マウスオーバーで拡大
スマホでは画像タップとなり、元画像には戻りません
<div tabindex="-1"></div>
<style>
div {
/* 画像の実サイズをpxで指定するとスマホの画面には収まらなくなります */
width: 100%;
height: 100%;
display: block;
border-radius: 0px; /* 画像の角の丸み */
/* 縮小画像のパスです */
background: url("https://lh3.googleusercontent.com/pw/AP1GczPvy5p-Ylj7IScxRqsxGKZPMBsVwYf440JOTVtKRZX4KFtZT-6EQY6FfT49xnVK2un2bEe-xIWnElDlGH-x21k3DaO3ckwvWt1RsBBbTgnF8N7aGM7wZuULfkhSB1cfIMrE45paA4DpEZvmX4fKCpIWqA=w200-h125-s-no-gm?authuser=0") no-repeat;
}
div:hover {
display: block;
width: 100%;
height: 100%;
background-size: 100% 100%;
animation-name: fadein;
animation-duration: 4s;
animation-delay: 0s; /* 最初に画像を表示するまでの時間、通常は0s */
animation-timing-function: linear; /* linear 以外にも、ease・ease-in・ease-out・ease-in-out などお試しください */
/* 拡大画像のパスです */
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczPVjqaCcBOZN3Nz2jSyNJf4SIx7voxtHfHaH4iSiSQF-LveEoPLQWZqjAd2APmOTaIbwxNJ-epb7aJf3-G3lz5l_Tr1nWWE0IvV2h01YNGJNQxTFkBCMBXvQKnsgz-frAZXuJr8Y-cLTKsPMuY5nJvmDQ=w600-h375-s-no-gm?authuser=0");
}
@keyframes fadein {
from {
opacity: 0; /* 画像の透明度、通常は0から1 */
}
to {
opacity: 1;
}
}
</style>
NO.13
NO.14
NO.15
Google Sites
Report abuse