HTML5 Audio ピアノ制作 : Step0 – ピアノを表示しよう!

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

まずは 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 で活用します.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT