STUDY_html_002

　　STUDY_html_002_D.html

html
css
JavaScript

<!---必須---><!doctype html>
<html>

<style>　　　　　スタイル　　　　　</style>

<table>
<tr title="イギリスではセミブリーブと言う">
<td class="NOTATION"><img src="STUDY_html_image_002/W_Note_01.gif"width="80"height="80"border="0"></td>
<td class="BARRY-ALLEN">全音符</td>
<td class="GREEN-ARROW">(読み方) ぜんおんぷ</td>
<td class="OLIVER-QUEEN">[米] whole note</td>
<td class="OLIVER-QUEEN">[英] semibreve</td>
<td class="OLIVER-QUEEN">　</td>
<td class="GREEN-ARROW"><img src="STUDY_html_image_002/W_Note_01+.gif"width="80"height="80"border="0"></td>
</tr>
<tr title="イギリスではミニムと言う">
<td class="NOTATION"><img src="STUDY_html_image_002/W_Note_02.gif"width="80"height="80"border="0"></td>
<td class="BARRY-ALLEN">2分音符</td>
<td class="GREEN-ARROW">(読み方) にぶおんぷ</td>
<td class="OLIVER-QUEEN">[米] half note</td>
<td class="OLIVER-QUEEN">[英] minim</td>
<td class="OLIVER-QUEEN">　</td>
<td class="GREEN-ARROW"><img src="STUDY_html_image_002/W_Note_02+.gif"width="80"height="80"border="0"></td>
</tr>
<tr title="イギリスではクロチェットと言う">
<td class="NOTATION"><img src="STUDY_html_image_002/W_Note_03.gif"width="80"height="80"border="0"></td>
<td class="BARRY-ALLEN">4分音符</td>
<td class="GREEN-ARROW">(読み方) しぶおんぷ</td>
<td class="OLIVER-QUEEN">[米] quarterr note</td>
<td class="OLIVER-QUEEN">[英] crotchet</td>
<td class="OLIVER-QUEEN">　</td>
<td class="GREEN-ARROW"><img src="STUDY_html_image_002/W_Note_03+.gif"width="80"height="80"border="0"></td>
</tr>
<tr title="イギリスではクエーヴァーと言う">
<td class="NOTATION"><img src="STUDY_html_image_002/W_Note_04.gif"width="80"height="80"border="0"></td>
<td class="BARRY-ALLEN">8分音符</td>
<td class="GREEN-ARROW">(読み方) はちぶおんぷ</td>
<td class="OLIVER-QUEEN">[米] eighth note</td>
<td class="OLIVER-QUEEN">[英] quaver</td>
<td class="OLIVER-QUEEN">　</td>
<td class="GREEN-ARROW"><img src="STUDY_html_image_002/W_Note_04+.gif"width="80"height="80"border="0"></td>
</tr>
<tr title="イギリスではセミクエーヴァーと言う">
<td class="NOTATION"><img src="STUDY_html_image_002/W_Note_05.gif"width="80"height="80"border="0"></td>
<td class="BARRY-ALLEN">16分音符</td>
<td class="GREEN-ARROW">(読み方) じゅうろくぶおんぷ</td>
<td class="OLIVER-QUEEN">[米] sixteenth note</td>
<td class="OLIVER-QUEEN">[英] semi quaver</td>
<td class="OLIVER-QUEEN">　</td>
<td class="GREEN-ARROW"><img src="STUDY_html_image_002/W_Note_05+.gif"width="80"height="80"border="0"></td>
</tr>
<tr title="イギリスではデミセミクエーヴァーと言う">
<td class="NOTATION"><img src="STUDY_html_image_002/W_Note_06.gif"width="80"height="80"border="0"></td>
<td class="BARRY-ALLEN">32分音符</td>
<td class="GREEN-ARROW">(読み方) さんじゅうにぶぶおんぷ</td>
<td class="OLIVER-QUEEN">[米] thirty second note</td>
<td class="OLIVER-QUEEN">[英] demisemiquaver</td>
<td class="OLIVER-QUEEN">　</td>
<td class="GREEN-ARROW"><img src="STUDY_html_image_002/W_Note_06+.gif"width="80"height="80"border="0"></td>
</tr>
</table>
</html>

<style>
table{font:14px sans-serif;
display:block;}
tr{background:#ffffff;
display:inline-block;
text-align:center;
width:260px;
height:320px;
margin:4px;
padding:2px;
position:relative;
border:1px #123456 solid;}
td{display:block;}
.NOTATION{font:60px sans-serif;
line-height:2;}
.GREEN-ARROW, .OLIVER-QUEEN{visibility:hidden;}
.THE-FLASH{display:none;
position:absolute;
text-align:center;
background:silver;
color:black;}
tr:hover .NOTATION{font-size:30px;}
tr:hover .GREEN-ARROW, tr:hover .OLIVER-QUEEN{visibility:visible;}
xtr:hover .THE-FLASH{display:block;
top:100%;
left:0;}
.BARRY-ALLEN{font-weight:bold;}
</style>


　　　・・・JavaScriptは使われていません

sample_STUDY_html_002_D ▶[ 002_D_bit.pdf \ sample_STUDY_html_002_D.pdf \ STUDY_html_image_002 ]
サンプル・ダウンロード

← Contents

STUDY_html_002_D.html

　　← Contents

　　STUDY_html_002_D.html