practice

#写真_02{border-radius:5px;
cursor:pointer;
transition:0.3s;
width:100%;
max-width:100px;
border:solid 1px black;}
#写真_02:hover{opacity:0.5;}
.ばつ印_02{display:block;
text-align:center;
color:#00ff00;
font-size:80px;
font-weight:bold;
transition:0.5s;}
.すけーる_02{display:none;
position:fixed;
z-index:10;
padding-top:100px;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.9);}
.ばつ印_02:hover,
.ばつ印_02:focus{color:#ff00ff;
text-decoration:none;
cursor:pointer;}
.ウインドウ_02{display:block;
margin:auto;
width:80%;
max-width:700px;}
.ウインドウ_02{animation-name:ネーム_02;
animation-duration:2s;}
@keyframes ネーム_02{from{transform:scale(0)}
to{transform:scale(1)}}

#写真_03{border-radius:5px;
cursor:pointer;
transition:0.3s;
width:100%;
max-width:100px;
border:solid 1px black;}
#写真_03:hover{opacity:0.5;}
.ばつ印_03{display:block;
text-align:center;
color:#00ff00;
font-size:80px;
font-weight:bold;
transition:0.5s;}
.すけーる_03{display:none;
position:fixed;
z-index:10;
padding-top:100px;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.9);}
.ばつ印_03:hover,
.ばつ印_03:focus{color:#ff00ff;
text-decoration:none;
cursor:pointer;}
.ウインドウ_03{display:block;
margin:auto;
width:80%;
max-width:700px;}
.ウインドウ_03{animation-name:ネーム_03;
animation-duration:2s;}
@keyframes ネーム_03{from{transform:scale(0)}
to{transform:scale(1)}}
</style>

<p>Mozart Sonata 12 <audio controls><source src="Mozart_Sonata_12.mp3"></audio>
 <button onclick="りろーど()">Stop</button></p>

let すけーる_02=document.getElementById("もーだる_02");
let 画像_02=document.getElementById("写真_02");
let 音階_02=document.getElementById("表示_02");
画像_02.onclick=function()
{すけーる_02.style.display="block";
音階_02.src=this.src;}
let 拡大_02=document.getElementsByClassName("すけーる_02")[0];
拡大_02.onclick=function()
{すけーる_02.style.display="none";}

let すけーる_03=document.getElementById("もーだる_03");
let 画像_03=document.getElementById("写真_03");
let 音階_03=document.getElementById("表示_03");
画像_03.onclick=function()
{すけーる_03.style.display="block";
音階_03.src=this.src;}
let 拡大_03=document.getElementsByClassName("すけーる_03")[0];
拡大_03.onclick=function()
{すけーる_03.style.display="none";}

function りろーど()
{document.location.reload();}
</script>

</html>