practice

　　　　

<html>

<style>
.アコーディオン{position:fixed;
top:100px;
left:100px;
width:100px;
height:40px;
z-index:-20;}
span{padding-top:2px;
padding-left:30px;}
.スパン{padding-top:4px;
padding-left:100px;}
.ホワイト_EU{position:fixed;
top:139px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_EU span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;}
.ホワイト_EU span:nth-child(2){display:none;}
.ホワイト_EU:hover span:nth-child(1){display:none;}
.ホワイト_EU:hover span:nth-child(2){display:block;}
.ホワイト_DU{position:fixed;
top:170px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_DU span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;}
.ホワイト_DU span:nth-child(2){display:none;}
.ホワイト_DU:hover span:nth-child(1){display:none;}
.ホワイト_DU:hover span:nth-child(2){display:block;}
.ホワイト_CU{position:fixed;
top:201px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_CU span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;}
.ホワイト_CU span:nth-child(2){display:none;}
.ホワイト_CU:hover span:nth-child(1){display:none;}
.ホワイト_CU:hover span:nth-child(2){display:block;}
.ホワイト_BL{position:fixed;
top:232px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_BL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;}
.ホワイト_BL span:nth-child(2){display:none;}
.ホワイト_BL:hover span:nth-child(1){display:none;}
.ホワイト_BL:hover span:nth-child(2){display:block;}
.ホワイト_AL{position:fixed;
top:263px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_AL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;
z-index:10;}
.ホワイト_AL span:nth-child(2){display:none;}
.ホワイト_AL:hover span:nth-child(1){display:none;}
.ホワイト_AL:hover span:nth-child(2){display:block;}
.ホワイト_GL{position:fixed;
top:295px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_GL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;
z-index:10;}
.ホワイト_GL span:nth-child(2){display:none;}
.ホワイト_GL:hover span:nth-child(1){display:none;}
.ホワイト_GL:hover span:nth-child(2){display:block;}
.ホワイト_FL{position:fixed;
top:326px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_FL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;
z-index:10;}
.ホワイト_FL span:nth-child(2){display:none;}
.ホワイト_FL:hover span:nth-child(1){display:none;}
.ホワイト_FL:hover span:nth-child(2){display:block;}
.ホワイト_EL{position:fixed;
top:357px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_EL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;
z-index:10;}
.ホワイト_EL span:nth-child(2){display:none;}
.ホワイト_EL:hover span:nth-child(1){display:none;}
.ホワイト_EL:hover span:nth-child(2){display:block;}
.ホワイト_DL{position:fixed;
top:388px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_DL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;}
.ホワイト_DL span:nth-child(2){display:none;}
.ホワイト_DL:hover span:nth-child(1){display:none;}
.ホワイト_DL:hover span:nth-child(2){display:block;}
.ホワイト_CL{position:fixed;
top:419px;
left:364px;
width:126px;
height:25px;
background-color:white;
border-radius:4px;
cursor:pointer;}
.ホワイト_CL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:black;
font-weight:bold;}
.ホワイト_CL span:nth-child(2){display:none;}
.ホワイト_CL:hover span:nth-child(1){display:none;}
.ホワイト_CL:hover span:nth-child(2){display:block;}
.ブラック_EbU{position:fixed;
top:157px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_EbU span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_EbU span:nth-child(2){display:none;}
.ブラック_EbU:hover span:nth-child(1){display:none;}
.ブラック_EbU:hover span:nth-child(2){display:block;}
.ブラック_DbU{position:fixed;
top:189px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_DbU span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_DbU span:nth-child(2){display:none;}
.ブラック_DbU:hover span:nth-child(1){display:none;}
.ブラック_DbU:hover span:nth-child(2){display:block;}
.ブラック_BbL{position:fixed;
top:251px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_BbL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_BbL span:nth-child(2){display:none;}
.ブラック_BbL:hover span:nth-child(1){display:none;}
.ブラック_BbL:hover span:nth-child(2){display:block;}
.ブラック_AbL{position:fixed;
top:282px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_AbL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_AbL span:nth-child(2){display:none;}
.ブラック_AbL:hover span:nth-child(1){display:none;}
.ブラック_AbL:hover span:nth-child(2){display:block;}
.ブラック_GbL{position:fixed;
top:313px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_GbL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_GbL span:nth-child(2){display:none;}
.ブラック_GbL:hover span:nth-child(1){display:none;}
.ブラック_GbL:hover span:nth-child(2){display:block;}
.ブラック_EbL{position:fixed;
top:376px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_EbL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_EbL span:nth-child(2){display:none;}
.ブラック_EbL:hover span:nth-child(1){display:none;}
.ブラック_EbL:hover span:nth-child(2){display:block;}
.ブラック_DbL{position:fixed;
top:406px;
left:364px;
width:84px;
height:20px;
background-color:black;
cursor:pointer;
z-index:10;}
.ブラック_DbL span{position:absolute;
top:0;
left:0;
margin:0px;
font-size:16px;
color:white;
font-weight:bold;
z-index:10;}
.ブラック_DbL span:nth-child(2){display:none;}
.ブラック_DbL:hover span:nth-child(1){display:none;}
.ブラック_DbL:hover span:nth-child(2){display:block;}
</style>

<div class="アコーディオン"><img src="accordion.png"width=400px></div>
<div class="ホワイト_EU"><span></span><span class="スパン">E</span></div>
<div class="ホワイト_DU"><span></span><span class="スパン">D</span></div>
<div class="ホワイト_CU"><span></span><span class="スパン">C</span></div>
<div class="ホワイト_BL"><span></span><span class="スパン">B</span></div>
<div class="ホワイト_AL"><span></span><span class="スパン">A</span></div>
<div class="ホワイト_GL"><span></span><span class="スパン">G</span></div>
<div class="ホワイト_FL"><span></span><span class="スパン">F</span></div>
<div class="ホワイト_EL"><span></span><span class="スパン">E</span></div>
<div class="ホワイト_DL"><span></span><span class="スパン">D</span></div>
<div class="ホワイト_CL"><span></span><span class="スパン">C</span></div>
<div class="ブラック_EbU"><span></span><span>Eb</span></div>
<div class="ブラック_DbU"><span></span><span>Db</span></div>
<div class="ブラック_BbL"><span></span><span>Bb</span></div>
<div class="ブラック_AbL"><span></span><span>Ab</span></div>
<div class="ブラック_GbL"><span></span><span>Gb</span></div>
<div class="ブラック_EbL"><span></span><span>Eb</span></div>
<div class="ブラック_DbL"><span></span><span>Db</span></div>

</html>