HTML5 Audio ピアノ制作 : Step0 – ピアノを表示しよう!
まずは CSS を駆使してピアノを表示します. 結構コードは多めですが, やってることはシンプルです.
SAMPLE
サンプルはこちらで見ることができます. まだ, ピアノが表示されるだけで何の反応もありません.
CODE
ピアノを配置するコードです. CSS3 の display:box を使用しています.
<html> <head> <meta charset="utf-8"> <title>TM Piano</title> <style> .piano { position:relative; height:200px; margin: 20px; } .white-key-set { position:absolute; left:0px; display:-webkit-box; display:-moz-box; display: box; } .white-key-set .keyboard { display:-moz-box; width:40px; height:200px; border:solid 1px black; background-color: #eee; } .black-key-set { display:-webkit-box; display:-moz-box; display: box; position:absolute; top: 1px; left: 25px; } .black-key-set .keyboard { display:-moz-box; width:30px; height:120px; border:solid 1px white; margin-right: 10px; background-color: #000; } </style> </head> <body> <h1>TM Piano</h1> <div class="piano"> <div class="white-key-set"> <div class="keyboard" name="C3"></div> <div class="keyboard" name="D3"></div> <div class="keyboard" name="E3"></div> <div class="keyboard" name="F3"></div> <div class="keyboard" name="G3"></div> <div class="keyboard" name="A3"></div> <div class="keyboard" name="B3"></div> <div class="keyboard" name="C4"></div> </div> <div class="black-key-set"> <div class="keyboard" name="pC3"></div> <div class="keyboard" name="pD3"></div> <div class="keyboard" name="nameless" style="visibility:hidden;"></div> <div class="keyboard" name="pF3"></div> <div class="keyboard" name="pG3"></div> <div class="keyboard" name="pA3"></div> </div> </div> </body> </html>
position 属性について
position プロパティはボックス要素の配置方法を指定することができます. 詳しくはこちらのサイトが参考になります.
ピアノを配置するために行っていることは, .white-key-set と .black-key-set に absolute を指定することで絶対位置, つまり left, top プロパティが反映されるようにしています.
さらに .piano の position に relative(static でなければ何でも良い) を指定することで, .white-key-set と .black-key-set の基準位置を同じにし, 重なるようにしています.
display:box について
CSS3 から追加された box. これを display プロパティに指定することで簡単に横並びにすることができます. 今までは, 横並びにしたい場合 float でゴニョゴニョやるのがセオリーでしたが, 今後 CSS3 が普及するにつれて display:box に置き換わっていくでしょう.
name 属性について
.keyboard を指定している要素それぞれに name 属性を指定しています. これは音ファイル名を指定するためのもので, 次の Step で活用します.
[…] Step0 – ピアノを表示しよう! […]