![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ホームページにピアノの鍵盤の一部が表示されており、例えば「ド」のところにリンク文字が書いてあってそのリンク文字をクリックすると別のページにジャンプするということをhtmlで記述して作ってみたいと考えています。
白鍵のみであればテーブルタグを使って簡単に作ることができるのですが、白鍵と白鍵の間にある黒鍵を上手く入れることができません。黒鍵と黒鍵の間に2つのテーブルの隙間が入ってしまったり、黒鍵をひとつのテーブルタグの中に記述しようとしてもうまく形にならなかったり、、と苦戦しています。
リンク文字を含む鍵盤を記述する方法をご存知でしたらアドバイスをお願いします。
No.5
- 回答日時:
#4の補足です。
白鍵は上下2つに分けて描き、間の境界線を表示させなくします。
以下は実際のHTMLの例です。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>
No.3
- 回答日時:
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の外に出すと、別に表示はされますが・・
![「htmlで鍵盤を描きたい」の回答画像3](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/2/650963_5497ef5bd1447/M.jpg)
ご回答ありがとうございました。
map使う方法がよく分からず、結局no.4の方のアドバイスを参考にして鍵盤の絵を描くのとリンク文字を載せることができました。
回答いただき誠にありがとうございました。
No.2
- 回答日時:
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>
というふうに・・
![「htmlで鍵盤を描きたい」の回答画像2](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/9/650963_5497ef5bb8c75/M.jpg)
この回答への補足
早速のご回答ありがとうございました。
まさにこの画像のような絵を描きたいと思っています。
鍵盤の置き方はこの画像で言うと右側のように横置きにして、1つ1つの白鍵の上に文字(トップ、概要、お問い合わせ、リンクなどの文字)を書きたいと思っています。使用する白鍵の数は8個ほどです。
当方、htmlはまだ勉強中でtableをリンクのリストに使用したり見当違いのことをやっているかもしれません。次のご回答をよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
レスポンシブWebデザインでリン...
-
Listの中に<br>を入れてはダメ...
-
リストマーカーをボックス内に...
-
ulとliで囲った文字の一部を変...
-
HTMLで組織図を作成する方法
-
ulやol、どの階層に居てもOKなc...
-
UL OL タグのインデントについて
-
疑似クラス :activeが効きません
-
<ol><li> 左側にスペースがで...
-
(HP作成)メニューバーのプル...
-
css 横並びのナビゲーションバ...
-
Tableの1セル内に画像・テキス...
-
ナビゲーションバーの表示につ...
-
リストの数字のフォントサイズ...
-
HTML5のfooterに見出しを付けて...
-
メニューの横並びで改行されて...
-
横並びのボタンの背景を片方だ...
-
Firefoxでメニューナビの全体幅...
-
li 3列表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報