- ベストアンサー
htmlで鍵盤を描きたい
ホームページにピアノの鍵盤の一部が表示されており、例えば「ド」のところにリンク文字が書いてあってそのリンク文字をクリックすると別のページにジャンプするということをhtmlで記述して作ってみたいと考えています。 白鍵のみであればテーブルタグを使って簡単に作ることができるのですが、白鍵と白鍵の間にある黒鍵を上手く入れることができません。黒鍵と黒鍵の間に2つのテーブルの隙間が入ってしまったり、黒鍵をひとつのテーブルタグの中に記述しようとしてもうまく形にならなかったり、、と苦戦しています。 リンク文字を含む鍵盤を記述する方法をご存知でしたらアドバイスをお願いします。
- みんなの回答 （5）
- 専門家の回答
その他の回答 (4)
- rukuku
- ベストアンサー率42% (401/933)
＃４の補足です。 白鍵は上下２つに分けて描き、間の境界線を表示させなくします。 以下は実際のＨＴＭＬの例です。IE6とFireFox3で確認しました。 もしかしたら、他のブラウザでは多少見え方が違うかもしれません。 <HTML> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"><!-- Table{ border:2px solid #000000; border-collapse:collapse; } TD.hakken1{ border-left:1px solid #000000; height:4em; } TD.hakken2{ width:3em; height:5em; border-left:1px solid #000000; } TD.kokken{ background-color:#000000; } --></STYLE> </HEAD> <BODY> <TABLE> <TR> <TD colspan="3" class="hakken1"> </TD> <TD colspan="2" class="kokken"> </TD><!-- 黒 --> <TD colspan="2" class="hakken1"> </TD> <TD colspan="2" class="kokken"> </TD><!-- 黒 --> <TD colspan="3" class="hakken1"> </TD> <TD colspan="3" class="hakken1"> </TD> <TD colspan="2" class="kokken"> </TD><!-- 黒 --> <TD colspan="2" class="hakken1"> </TD> <TD colspan="2" class="kokken"> </TD><!-- 黒 --> <TD colspan="2" class="hakken1"> </TD> <TD colspan="2" class="kokken"> </TD><!-- 黒 --> <TD colspan="3" class="hakken1"> </TD> </TR> <TR> <TD colspan="4" class="hakken2"> </TD> <TD colspan="4" class="hakken2"> </TD> <TD colspan="4" class="hakken2"> </TD> <TD colspan="4" class="hakken2"> </TD> <TD colspan="4" class="hakken2"> </TD> <TD colspan="4" class="hakken2"> </TD> <TD colspan="4" class="hakken2"> </TD> </TR> </TABLE> </BODY> </HTML>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
mapを使うと <div class="Menue"> <object data="gif/piano.gif" type="image/gif" width="420" height="324" usemap="#piano"></p> <map name="piano"> <ul> <li><a href="index.html" shape="rect" coords="45,8,75,144">トップ</a></li> <li><a href="shortcut.html" shape="poly" coords="7,8,44,8,44,145,54,145,54,234,7,234">MIDI</a></li> </map> </object> </div> ☆添付画像はjpegになっている(仕様)なのでgifに変換すること ですが、訪問済みか見訪問かが判らないなどの問題もあるのと、もっとリアルにポインタが乗るとすこし色が変わったり、クリックするとへこんだりとしたい場合は<map>わ使わずスタイルシートでデザインしたほうがよいと思います。 <map>～</map>をobjectの外に出すと、別に表示はされますが・・
お礼
ご回答ありがとうございました。 map使う方法がよく分からず、結局no.4の方のアドバイスを参考にして鍵盤の絵を描くのとリンク文字を載せることができました。 回答いただき誠にありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableはリンクのリストを示すのに使うのは論外ですが、いくつか方法がありますが、 ・・そもそもリンクは何箇所ぐらい？ ・・鍵盤にどんな文字を書くのか？ ・・鍵盤はたて？横？鍵盤を縦に置くほうが文字を入れるなら良い リンクリストを具体的に示してください。 <ul> <li><a href="./index.html">Top</a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> というふうに・・
補足
早速のご回答ありがとうございました。 まさにこの画像のような絵を描きたいと思っています。 鍵盤の置き方はこの画像で言うと右側のように横置きにして、1つ1つの白鍵の上に文字（トップ、概要、お問い合わせ、リンクなどの文字）を書きたいと思っています。使用する白鍵の数は8個ほどです。 当方、htmlはまだ勉強中でtableをリンクのリストに使用したり見当違いのことをやっているかもしれません。次のご回答をよろしくお願いいたします。
- yambejp
- ベストアンサー率51% (3827/7415)
鍵盤の絵を用意しておいて、イメージマップしてみては？
お礼
ご回答ありがとうございました。 ご指摘の方法でできました。 いろいろとありがとうございました。