STUDY_html_019_E.html
<html> <style> スタイル </style> <ul id="ピアノ"> <li data-key="C4"class="白鍵"></li><li data-key="C#4"class="黒鍵"></li><li data-key="D4"class="白鍵"></li><li data-key="D#4"class="黒鍵"></li><li data-key="E4"class="白鍵"></li><li data-key="F4"class="白鍵"></li><li data-key="F#4"class="黒鍵"></li><li data-key="G4"class="白鍵"></li><li data-key="G#4"class="黒鍵"></li><li data-key="A4"class="白鍵"></li><li data-key="A#4"class="黒鍵"></li><li data-key="B4"class="白鍵"></li><li data-key="C5"class="白鍵"></li><li data-key="C#5"class="黒鍵"></li><li data-key="D5"class="白鍵"></li><li data-key="D#5"class="黒鍵"></li><li data-key="E5"class="白鍵"></li> </ul> </html>
<style>
#ピアノ{width:80%;
position:relative;
max-width:600px;
margin-top:40px;}
.白鍵{width:8%;
height:220px;
text-align:center;
display:inline-block;
border:1px solid#789abc;
cursor:pointer;}
.白鍵:hover{background-color:#abcdef;}
.黒鍵{width:6%;
height:120px;
display:inline-block;
margin-left:-3%;
background-color:#456789;
position:absolute;
cursor:pointer;}
.黒鍵:hover{background-color:#123456;}
</style>
<script> 外部リンク </script>
sample_STUDY_html_020_E 
サンプル・ダウンロード 
