htmlで鍵盤を描きたい

解決済

質問者：macky110
質問日時：2009/03/01 00:49
回答数：5件

ホームページにピアノの鍵盤の一部が表示されており、例えば「ド」のところにリンク文字が書いてあってそのリンク文字をクリックすると別のページにジャンプするということをhtmlで記述して作ってみたいと考えています。
白鍵のみであればテーブルタグを使って簡単に作ることができるのですが、白鍵と白鍵の間にある黒鍵を上手く入れることができません。黒鍵と黒鍵の間に2つのテーブルの隙間が入ってしまったり、黒鍵をひとつのテーブルタグの中に記述しようとしてもうまく形にならなかったり、、と苦戦しています。
リンク文字を含む鍵盤を記述する方法をご存知でしたらアドバイスをお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： rukuku
回答日時：2009/03/01 12:59

はじめまして

テーブルを使う方法です

まず、添付の図の左のように「２行２８列」のテーブルを用意します。
これを「colspan」で右の図のように連結していけば、できます。
後は、塗りつぶしや線をスタイルシートで設定します。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
ご指摘の方法でできました。
いろいろとありがとうございました。

通報する

お礼日時：2009/03/01 18:52

No.5

回答者： rukuku
回答日時：2009/03/01 13:51

＃４の補足です。

白鍵は上下２つに分けて描き、間の境界線を表示させなくします。

以下は実際のＨＴＭＬの例です。IE6とFireFox3で確認しました。
もしかしたら、他のブラウザでは多少見え方が違うかもしれません。

<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css"></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>

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2009/03/01 10:21

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の外に出すと、別に表示はされますが・・

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。
map使う方法がよく分からず、結局no.4の方のアドバイスを参考にして鍵盤の絵を描くのとリンク文字を載せることができました。
回答いただき誠にありがとうございました。

通報する

お礼日時：2009/03/01 18:51

No.2

回答者： ORUKA1951
回答日時：2009/03/01 01:25

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をリンクのリストに使用したり見当違いのことをやっているかもしれません。次のご回答をよろしくお願いいたします。

補足日時：2009/03/01 09:12

通報する