tableタグで鍵盤を描く【HTML】


## 見本

![Mozilla_Firefox_と_scale2_html.png](https://qiita-image-store.s3.amazonaws.com/0/151314/586501b8-2e37-b92a-66f9-dfd6aec4dcd9.png)

## ソース

```html

<style type="text/css">
table#keyboard{
 width:90%;
 border-collapse:collapse;
}
#keyboard td{
 height:150px;
 border-color:gray;
 border-width:1px;
 border-style:solid;
 text-align:center;
}
</style>

<table id="keyboard" class="sample">
<tr>
<td class="c" colspan="3" style="width:30px;border-bottom-width:0;"></td>
<td class="cs" colspan="2" style="width:20px;border-bottom-width:1;background-color: #999;">C#</td>
<td class="d" colspan="2" style="width:20px;border-bottom-width:0;border-bottom-width:0;"></td>
<td class="ds" colspan="2" style="width:20px;border-bottom-width:1;background-color: #999;">D#</td>
<td class="e" colspan="3" style="width:30px;border-bottom-width:0;"></td>
<td class="f" colspan="3" style="width:30px;border-bottom-width:0;"></td>
<td class="fs" colspan="2" style="width:20px;border-bottom-width:1;background-color: #999;">F#</td>
<td class="g" colspan="2" style="width:20px;border-bottom-width:0;"></td>
<td class="gs" colspan="2" style="width:20px;border-bottom-width:1;background-color: #999;">G#</td>
<td class="a" colspan="2" style="width:20px;border-bottom-width:0;"></td>
<td class="as" colspan="2" style="width:20px;border-bottom-width:1;background-color: #999;">A#</td>
<td class="b" colspan="3" style="width:30px;border-bottom-width:0;"></td>
</tr>

<tr>
<td class="c" colspan="4" style="width:40px;height:80px;border-top-width:0;">C</td>
<td class="d" colspan="4" style="width:40px;height:80px;border-top-width:0;">D</td>
<td class="e" colspan="4" style="width:40px;height:80px;border-top-width:0;">E</td>
<td class="f" colspan="4" style="width:40px;height:80px;border-top-width:0;">F</td>
<td class="g" colspan="4" style="width:40px;height:80px;border-top-width:0;">G</td>
<td class="a" colspan="4" style="width:40px;height:80px;border-top-width:0;">A</td>
<td class="b" colspan="4" style="width:40px;height:80px;border-top-width:0;">B</td>
</tr>
</table>
```

# 応用編
せっかくなのでちょっとしたツールを作ってみました。

![Scale_and_Chord_と_scale2_html_と_Mozilla_Firefox.png](https://qiita-image-store.s3.amazonaws.com/0/151314/5419fab9-0de5-bc6d-2a3c-61ec2c00fb2e.png)

## ソース

```html
<html lang="ja">
<head>
<title>Scale and Chord</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
  <script type="text/javascript">
 $(document).ready(function(){

    function reset(){
        $("#decode").html('<h4>Choose Root and Scale(Chord)</h4>');
        $(".c").attr("bgColor", "white");
        $(".cs").attr("bgColor", "gray");
        $(".d").attr("bgColor", "white");
        $(".ds").attr("bgColor", "gray");
        $(".e").attr("bgColor", "white");
        $(".f").attr("bgColor", "white");
        $(".fs").attr("bgColor", "gray");
        $(".g").attr("bgColor", "white");
        $(".gs").attr("bgColor", "gray");
        $(".a").attr("bgColor", "white");
        $(".as").attr("bgColor", "gray");
    }
    reset();
  });
  $(function(){

    notes = ["c","cs","d","ds","e","f","fs","g","gs","a","as","b"];

    interval = [
        ["アイオニアンスケール",[0,2,2,1,2,2,2,1],"メジャー・キーの第1音から派生したスケール Maj7上などで使用可能"],
        ["ドリアンスケール",[0,2,1,2,2,2,1,2],"メジャー・キーの第2音から派生したスケール mi7上などで使用可能"],
        ["フリジアンスケール",[0,1,2,2,2,1,2,2],"メジャー・キーの第3音から派生したスケール mi7上などで使用可能"],
        ["リディアンスケール",[0,2,2,2,1,2,2,1],"メジャー・キーの第4音から派生したスケール Maj7上などで使用可能"],
        ["ミクソリディアンスケール",[0,2,2,1,2,2,1,2],"メジャー・キーの第5音から派生したスケール Dom7th上などで使用可能"],
        ["エオリアンスケール",[0,2,1,2,2,1,2,2],"メジャー・キーの第6音から派生スケール mi7上などで使用可能"],
        ["ロクリアンスケール",[0,1,2,2,1,2,2,2],"ジャー・キーの第7音から派生したスケール mi7♭5上などで使用可能"],
        ["オルタードスケール",[0,1,2,1,2,2,2,2],""],
        ["ディミニッシュスケール",[0,2,1,2,1,2,1,2],""],
        ["コンビネーションオブディミニッシュスケール",[0,1,2,1,2,1,2,1],""],
        ["ハーモニックマイナースケール",[0,2,1,2,2,1,3,1],""],
        ["メロディックマイナースケール",[0,2,1,2,2,2,2,1],""],
        ["パーフェクト５ｔｈビロースケール",[0,1,3,1,2,1,2,2],""],
        ["ホールトーンスケール",[0,2,2,2,2,2],""],
        ["メジャーペンタトニックスケール",[0,2,2,3,2],""],
        ["マイナーペンタトニックスケール",[0,3,2,2,3],""],
        ["ブルーノートスケール",[0,3,2,1,1,3],""],
        ["琉球音階",[0,4,1,2,4],""],
        ["メジャー",[0,4,3]],
        ["マイナー",[0,3,4]],
        ["サスフォー",[0,5,2]],
        ["オーギュメント",[0,4,4]],
        ["メジャーセブンス",[0,4,3,4]],
        ["マイナーセブンス",[0,3,4,3]],
        ["マイナーセブンス♭５",[0,3,3,4]],
        ["ディミニッシュ",[0,3,3,3,3]]
    ];

    function reset(){
        $("#memo").html('');
        $("#decode").html('<h4>Choose Root and Scale(Chord)</h4>');
        $(".c").attr("bgColor", "white");
        $(".cs").attr("bgColor", "gray");
        $(".d").attr("bgColor", "white");
        $(".ds").attr("bgColor", "gray");
        $(".e").attr("bgColor", "white");
        $(".f").attr("bgColor", "white");
        $(".fs").attr("bgColor", "gray");
        $(".g").attr("bgColor", "white");
        $(".gs").attr("bgColor", "gray");
        $(".a").attr("bgColor", "white");
        $(".as").attr("bgColor", "gray");
        $(".b").attr("bgColor", "white");
    }

    $("#button3").click(function(){
        reset();
    })

    $("#button4").click(function(){

    var si = $("input[name='scale']:checked").val();
    var sv = $("input[name='root']:checked").val();

    reset();

    $.each(interval[si][1],function(i,v){
        sv = parseInt(sv) + parseInt(v);
        if(sv > 11) sv-=12;

        var color = "pink";
        if(notes[sv].length == 2) color = "hotpink";
        if(sv==$("input[name='root']:checked").val()) color = "indianred";
            $("."+notes[sv]).attr("bgColor", color);
    });

    $("#decode").html('<h4>' + interval[si][0] + '</h4>');
    $("#memo").html(interval[si][2]);
    })
})
</script>

<style type="text/css">
table#keyboard{
 width:90%;
 border-collapse:collapse;
}
#keyboard td{
 height:150px;
 border-color:gray;
 border-width:1px;
 border-style:solid;
 text-align:center;
}
input[type="radio"]{
 display: none;
}
label{
 border: #000 solid 1px;
 background-color: #fff;
 padding: 10px;
 line-height: 400%;
}
input[type="radio"]:checked + label{
  background-color: #999;
}
</style>

</head>
<body>

<!-- keybord -->
<div id="decode"></div>
<table id="keyboard" class="sample">
<tr>
<td class="c" colspan="3" style="width:30px;border-bottom-width:0;"></td>
<td class="cs" colspan="2" style="width:20px;border-bottom-width:0;">C#</td>
<td class="d" colspan="2" style="width:20px;border-bottom-width:0;border-bottom-width:0;"></td>
<td class="ds" colspan="2" style="width:20px;border-bottom-width:0;">D#</td>
<td class="e" colspan="3" style="width:30px;border-bottom-width:0;"></td>
<td class="f" colspan="3" style="width:30px;border-bottom-width:0;"></td>
<td class="fs" colspan="2" style="width:20px;border-bottom-width:0;">F#</td>
<td class="g" colspan="2" style="width:20px;border-bottom-width:0;"></td>
<td class="gs" colspan="2" style="width:20px;border-bottom-width:0;">G#</td>
<td class="a" colspan="2" style="width:20px;border-bottom-width:0;"></td>
<td class="as" colspan="2" style="width:20px;border-bottom-width:0;">A#</td>
<td class="b" colspan="3" style="width:30px;border-bottom-width:0;"></td>
</tr>

<tr>
<td class="c" colspan="4" style="width:40px;height:80px;border-top-width:0;">C</td>
<td class="d" colspan="4" style="width:40px;height:80px;border-top-width:0;">D</td>
<td class="e" colspan="4" style="width:40px;height:80px;border-top-width:0;">E</td>
<td class="f" colspan="4" style="width:40px;height:80px;border-top-width:0;">F</td>
<td class="g" colspan="4" style="width:40px;height:80px;border-top-width:0;">G</td>
<td class="a" colspan="4" style="width:40px;height:80px;border-top-width:0;">A</td>
<td class="b" colspan="4" style="width:40px;height:80px;border-top-width:0;">B</td>
</tr>
</table>
<!-- /keyboard -->
<div id="memo"></div>
<br />
<h3>Root</h3>
<input type="radio" id="root-0" name="root" value="0" /><label for="root-0">C</label>
<input type="radio" id="root-1" name="root" value="1" /><label for="root-1">C#</label>
<input type="radio" id="root-2" name="root" value="2" /><label for="root-2">D</label>
<input type="radio" id="root-3" name="root" value="3" /><label for="root-3">D#</label>
<input type="radio" id="root-4" name="root" value="4" /><label for="root-4">E</label>
<input type="radio" id="root-5" name="root" value="5" /><label for="root-5">F</label>
<input type="radio" id="root-6" name="root" value="6" /><label for="root-6">F#</label>
<input type="radio" id="root-7" name="root" value="7" /><label for="root-7">G</label>
<input type="radio" id="root-8" name="root" value="8" /><label for="root-8">G#</label>
<input type="radio" id="root-9" name="root" value="9" /><label for="root-9">A</label>
<input type="radio" id="root-10" name="root" value="10" /><label for="root-10">A#</label>
<input type="radio" id="root-11" name="root" value="11" /><label for="root-11">B</label>

<h5>Scale</h5>
<div>
<input type="radio" id="scale-0" name="scale" value="0" /><label for="scale-0">アイオニアン(ナチュラルメジャー)スケール</label>
<input type="radio" id="scale-1" name="scale" value="1" /><label for="scale-1">ドリアンスケール</label>
<input type="radio" id="scale-2" name="scale" value="2" /><label for="scale-2">フリジアンスケール</label>
<input type="radio" id="scale-3" name="scale" value="3" /><label for="scale-3">リディアンスケール</label>
<input type="radio" id="scale-4" name="scale" value="4" /><label for="scale-4">ミクソリディアンスケール</label>
<input type="radio" id="scale-5" name="scale" value="5" /><label for="scale-5">エオリアン(ナチュラルマイナー)スケール</label>
<input type="radio" id="scale-6" name="scale" value="6" /><label for="scale-6">ロクリアンスケール</label>
</div>
<div>
<input type="radio" id="scale-7" name="scale" value="7" /><label for="scale-7">オルタードスケール</label>
<input type="radio" id="scale-8" name="scale" value="8" /><label for="scale-8">ディミニッシュスケール</label>
<input type="radio" id="scale-9" name="scale" value="9" /><label for="scale-9">コンビネーションオブディミニッシュスケール</label>
<input type="radio" id="scale-10" name="scale" value="10" /><label for="scale-10">ハーモニックマイナースケール</label>
<input type="radio" id="scale-11" name="scale" value="11" /><label for="scale-11">メロディックマイナースケール</label>
<input type="radio" id="scale-12" name="scale" value="12" /><label for="scale-12">ハーモニックマイナーパーフェクト5thビロースケール</label>
</div>
<div>

<input type="radio" id="scale-13" name="scale" value="13" /><label for="scale-13">ホールトーンスケール</label>
<input type="radio" id="scale-14" name="scale" value="14" /><label for="scale-14">メジャーペンタトニックスケール</label>
<input type="radio" id="scale-15" name="scale" value="15" /><label for="scale-15">マイナーペンタトニックスケール</label>
<input type="radio" id="scale-16" name="scale" value="16" /><label for="scale-16">ブルーノートスケール</label>
<input type="radio" id="scale-17" name="scale" value="17" /><label for="scale-17">琉球音階</label>
</div>

<h5>Chord</h5>
<input type="radio" id="scale-18" name="scale" value="18" /><label for="scale-18">メジャー</label>
<input type="radio" id="scale-19" name="scale" value="19" /><label for="scale-19">マイナー(m)</label>
<input type="radio" id="scale-20" name="scale" value="20" /><label for="scale-20">サスフォー(sus4)</label>
<input type="radio" id="scale-21" name="scale" value="21" /><label for="scale-21">オーギュメント(aug)</label>
<input type="radio" id="scale-22" name="scale" value="22" /><label for="scale-22">メジャーセブンス(maj7)</label>
<input type="radio" id="scale-23" name="scale" value="23" /><label for="scale-23">マイナーセブンス(m7)</label>
<input type="radio" id="scale-24" name="scale" value="24" /><label for="scale-24">マイナーセブンスフラッティドフィフス(m7b5)</label>
<input type="radio" id="scale-25" name="scale" value="25" /><label for="scale-25">ディミニッシュ(dim)</label>
<br /><br />

<input type="button" id="button4" value="get info"/>　
<input type="button" id="button3" value="reset"/>
<br />
<hr /><br />

</body>
</html>
```