<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
a:hover {text-decoration:none;}
</STYLE>
<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:treeMenu('treeMenu1')">■ Yahoo! Japan1</a><br>
<DIV id="treeMenu1" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<A href="javaScript:treeMenu('treeMenu2')">■ Yahoo! Japan2</a><br>
<DIV id="treeMenu2" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR>
</BODY>
</HTML>
2000年4月22日星期六
CSSでScrollTableを作る
<head><title></title></head>
<body>
<!--本体部分-->
<DIV>
<SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:100px;height:140px;
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
crollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF"
>
<TABLE border="1" style="width:100%">
<tr>
<td width="50%">F</TD>
<TD width="50%">G</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>P</td>
<td>Q</td>
</tr>
<tr>
<td>U</td>
<td>V</td>
</tr>
<tr>
<td>Z</td>
<td>AA</td>
</tr>
<tr>
<td>EE</td>
<td>FF</td>
</tr>
<tr>
<td>JJ</td>
<td>KK</td>
</tr>
<tr>
<td>OO</td>
<td>PP</td>
</tr>
</TABLE>
</SPAN>
<SPAN id="maincols" style="overflow:scroll;width:300px;height:140px" onscroll="fnc_scroll()">
<TABLE border="1" style="table-layout:fixed;width:450px">
<tr>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td>W</td>
<td>X</td>
<td>Y</td>
</tr>
<tr>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>GG</td>
<td>HH</td>
<td>II</td>
</tr>
<tr>
<td>LL</td>
<td>MM</td>
<td>NN</td>
</tr>
<tr>
<td>QQ</td>
<td>RR</td>
<td>SS</td>
</tr>
</TABLE>
</SPAN>
</DIV>
<SCRIPT language="javascript">
<!--
function fnc_scroll(){
document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop;
}
-->
</SCRIPT>
</body>
</html>
Flash素材
2000年4月21日星期五
HTMLでScrollTableを作る
<head>
<title>Scroll Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="non-cache">
<style type="text/css">
<!--
.t
{
table-layout :fixed;
border-collapse :collapse;
background-color :#007700;
}
.table_title
{
font-size :12;
border-width :1px;
border-style :solid;
color :#FFFFFF;
border-color :#AAAAAA;
text-align :center;
}
.style_1
{
font-size :12;
text-align :center;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_2
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
text-align :center;
background-color :#FFFFBB;
}
.style_3
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_4
{
background-color :#007700;
color :#FFFFFF;
}
.style_5
{
width :368;
height :109;
overflow :auto;
scrollbar-face-color :#007700;
scrollbar-arrow-color:#FFFFFF;
}
-->
</style>
<script type="text/javascript">
function Load() {
// 情報のスクロール位置設定
document.getElementById("scroll").scrollTop = document.getElementById("S_I").value;
}
/*
* 詳細ボタン押下時処理
*/
function OnClick(index) {
// 詳細ボタンのIndex
alert(index);
// 情報検索一覧のスクロール位置を格納
document.getElementById("S_I").value = document.getElementById("scroll").scrollTop;
}
</script>
</head>
<body bgcolor="#EEFFF0" onload="Load()">
<form name="main_form" id="main_form" method="post">
<table style="width:390px">
<tr>
<td>
<!-- ヘッダ部分 -->
<table class="t">
<tr>
<td class="table_title" style='width:60;height:20;'>詳細</td>
<td class="table_title" style='width:60;'>年度</td>
<td class="table_title" style='width:60;'>会計年度</td>
<td class="table_title" style='width:80;'>部門コード</td>
<td class="table_title" style='width:90;'>部門名</td>
</tr>
</table>
<!-- データ部分 -->
<DIV ID="scroll" class="style_5" >
<table style="table-layout: fixed; border-collapse:collapse;">
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('1')" id="detail1">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0001</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('2')" id="detail2">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0002</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('3')" id="detail3">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0003</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('4')" id="detail4">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0004</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('5')" id="detail5">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0005</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('6')" id="detail6">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0006</td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
<!-- 情報検索一覧スクロール位置 -->
<input type="hidden" name="S_I" id="S_I" value="28">
</form>
</body>
</html>
2000年4月20日星期四
Key DownのKeyCode
| Macintosh | Windows | ||||||
| キー | NN4 | IE4 | IE5 | NN6 | NN4 | NN6 | IE4,5 |
| powerKey(mac) | -- | -- | -- | -- | -- | -- | -- |
| tab | (9) | -- | 9 | 9 | -- | 9 | 9 |
| caps lock | -- | -- | -- | -- | -- | 240 | 240 |
| shift | -- | -- | 16 | -- | 0 | 16 | 16 |
| ctrl | -- | -- | 17 | -- | 0 | 17 | 17 |
| option(mac) | -- | -- | 18 | -- | -- | -- | -- |
| alt | -- | -- | -- | -- | -- | 18 | 18 |
| return | 13 | -- | 13 | 13 | 13 | 13 | 13 |
| enter(TenKey) | 3 | -- | 13 | 13 | 13 | 13 | 13 |
| insert | -- | -- | -- | -- | 0 | 45 | 45 |
| del | 127 | -- | 46 | 46 | 0 | 46 | 46 |
| back space | 8 | -- | 8 | 8 | 8 | (8) | (8) |
| esc | 27 | -- | 27 | 27 | -- | 27 | 27 |
| clear(mac),Num Lock | 27 | -- | 12 | 12 | -- | 144 | 144 |
| help | 5 | -- | 45 | 45 | -- | -- | -- |
| home | 1 | -- | -- | 36 | 0 | 36 | 36 |
| page up | 11 | -- | -- | 33 | 0 | 33 | 33 |
| page down | 12 | -- | -- | 34 | 0 | 34 | 34 |
| end | 4 | -- | -- | 35 | 0 | 35 | 35 |
| F1 | -- | -- | 112 | 112 | -- | 112 | 112 |
| F2 | -- | -- | 113 | 113 | -- | 113 | 113 |
| F3 | -- | -- | 114 | 114 | -- | 114 | 114 |
| F4 | -- | -- | 115 | 115 | 0 | 115 | 115 |
| F5 | 16 | -- | 116 | 116 | 0 | 116 | 116 |
| F6 | 16 | -- | 117 | 117 | -- | 117 | 117 |
| F7 | 16 | -- | 118 | 118 | 0 | 118 | 118 |
| F8 | 16 | -- | 119 | 119 | 0 | 119 | 119 |
| F9 | 16 | -- | 120 | 120 | 0 | 120 | 120 |
| F10 | 16 | -- | 121 | 121 | -- | 121 | 121 |
| F11 | 16 | -- | 122 | 122 | 0 | 122 | 122 |
| F12 | 16 | -- | 123 | 123 | 0 | -- | 123 |
| PrintScreen (F13) | 16 | -- | 124 | 44 | -- | -- | -- |
| Scroll Lock (F14) | 16 | -- | 125 | 145 | 0 | 145 | 145 |
| Pause (F15) | 16 | -- | 126 | 19 | 0 | 19 | 19 |
| 半角／全角 | -- | -- | -- | -- | -- | 229 | 243←→244 |
| 窓キー | -- | -- | -- | -- | -- | 91 | 91 |
| メニューキー | -- | -- | -- | -- | -- | 93 | 93 |
| 無変換 | -- | -- | -- | -- | -- | 229 | 29 |
| 前候補 | -- | -- | -- | -- | -- | 229 | 229 |
| カタカナ／ひらがな | -- | -- | -- | -- | -- | 229 | 242 |
| ctrl+A | 1 | -- | 17 | 65 | -- | 65 | 65 |
| ctrl+B | 2 | -- | 17 | 66 | -- | 66 | 66 |
| ctrl+C | 3 | -- | 17 | 67 | -- | 67 | 67 |
| ctrl+D | 4 | -- | 17 | 68 | -- | 68 | 68 |
| ctrl+E | 5 | -- | 17 | 69 | 5 | 69 | 69 |
| ctrl+F | 6 | -- | 17 | 70 | -- | 70 | 70 |
| ctrl+G | 7 | -- | 17 | 71 | -- | 71 | 71 |
| ctrl+H | 8 | -- | 17 | 72 | -- | 72 | 72 |
| ctrl+I | 9 | -- | 17 | 73 | -- | 73 | 73 |
| ctrl+J | 10 | -- | 17 | 74 | 10 | 74 | 74 |
| ctrl+K | 11 | -- | 17 | 75 | 11 | 75 | 75 |
| ctrl+L | 12 | -- | 17 | 76 | 12 | 76 | 76 |
| ctrl+M | 13 | -- | 17 | 77 | -- | 77 | 77 |
| ctrl+N | 14 | -- | 17 | 78 | -- | 78 | 78 |
| ctrl+O | 15 | -- | 17 | 79 | -- | 79 | 79 |
| ctrl+P | 16 | -- | 17 | 80 | -- | 80 | 80 |
| ctrl+Q | 17 | -- | 17 | 81 | -- | 81 | 81 |
| ctrl+R | 18 | -- | 17 | 82 | -- | 82 | 82 |
| ctrl+S | 19 | -- | 17 | 83 | -- | 83 | 83 |
| ctrl+T | 20 | -- | 17 | 84 | 20 | 84 | 84 |
| ctrl+U | 21 | -- | 17 | 85 | -- | 85 | 85 |
| ctrl+V | 22 | -- | 17 | 86 | -- | 86 | 86 |
| ctrl+W | 23 | -- | 17 | 87 | -- | 87 | 87 |
| ctrl+X | 24 | -- | 17 | 88 | -- | 88 | 88 |
| ctrl+Y | 25 | -- | 17 | 89 | 25 | 89 | 89 |
| ctrl+Z | 26 | -- | 17 | 90 | -- | 90 | 90 |
| ← | 28 | -- | 37 | 37 | 0 | 37 | 37 |
| → | 29 | -- | 39 | 39 | 0 | 39 | 39 |
| ↑ | 30 | -- | 38 | 38 | 0 | 38 | 38 |
| ↓ | 31 | -- | 40 | 40 | 0 | 40 | 40 |
| space | 32 | -- | 32 | 32 | 32 | 32 | 32 |
| ! | 33 | -- | 16 | 0 | 33 | 49 | 49 |
| " | 34 | -- | 16 | 222 | 34 | 50 | 50 |
| # | 35 | -- | 16 | 0 | 35 | 51 | 51 |
| $ | 36 | -- | 16 | 0 | 36 | 52 | 52 |
| % | 37 | -- | 16 | 0 | 37 | 53 | 53 |
| & | 38 | -- | 16 | 0 | 38 | 54 | 54 |
| (quote) | 39 | -- | 16 | 222 | 39 | 55 | 55 |
| ( | 40 | -- | 16 | 0 | 40 | 56 | 56 |
| ) | 41 | -- | 16 | 0 | 41 | 57 | 57 |
| * | 42 | -- | 16 | 0 | 42 | 59 | 186 |
| + | 43 | -- | 16 | 0 | 43 | 61 | 187 |
| , | 44 | -- | 188 | 188 | 44 | 188 | 188 |
| - | 45 | -- | 189 | 0 | 45 | 189 | 189 |
| . | 46 | -- | 190 | 190 | 46 | 190 | 190 |
| / | 47 | -- | 191 | 191 | 47 | 191 | 191 |
| 0 | 48 | -- | 48 | 48 | 48 | 48 | 48 |
| 1 | 49 | -- | 49 | 49 | 49 | 49 | 49 |
| 2 | 50 | -- | 50 | 50 | 50 | 50 | 50 |
| 3 | 51 | -- | 51 | 51 | 51 | 51 | 51 |
| 4 | 52 | -- | 52 | 52 | 52 | 52 | 52 |
| 5 | 53 | -- | 53 | 53 | 53 | 53 | 53 |
| 6 | 54 | -- | 54 | 54 | 54 | 54 | 54 |
| 7 | 55 | -- | 55 | 55 | 55 | 55 | 55 |
| 8 | 56 | -- | 56 | 56 | 56 | 56 | 56 |
| 9 | 57 | -- | 57 | 57 | 57 | 57 | 57 |
| : | 58 | -- | 16 | 0 | 58 | 59 | 186 |
| ; | 59 | -- | 186 | 59 | 59 | 61 | 187 |
| < | 60 | -- | 16 | 0 | 60 | 188 | 188 |
| = | 61 | -- | 187 | 61 | 61 | 109 | 189 |
| > | 62 | -- | 16 | 0 | 62 | 190 | 190 |
| ? | 63 | -- | 16 | 0 | 63 | 191 | 191 |
| @ | 64 | -- | 16 | 0 | 64 | 192 | 192 |
| A | 65 | -- | 65 | 65 | 65 | 65 | 65 |
| B | 66 | -- | 66 | 66 | 66 | 66 | 66 |
| C | 67 | -- | 67 | 67 | 67 | 67 | 67 |
| D | 68 | -- | 68 | 68 | 68 | 68 | 68 |
| E | 69 | -- | 69 | 69 | 69 | 69 | 69 |
| F | 70 | -- | 70 | 70 | 70 | 70 | 70 |
| G | 71 | -- | 71 | 71 | 71 | 71 | 71 |
| H | 72 | -- | 72 | 72 | 72 | 72 | 72 |
| I | 73 | -- | 73 | 73 | 73 | 73 | 73 |
| J | 74 | -- | 74 | 74 | 74 | 74 | 74 |
| K | 75 | -- | 75 | 75 | 75 | 75 | 75 |
| L | 76 | -- | 76 | 76 | 76 | 76 | 76 |
| M | 77 | -- | 77 | 77 | 77 | 77 | 77 |
| N | 78 | -- | 78 | 78 | 78 | 78 | 78 |
| O | 79 | -- | 79 | 79 | 79 | 79 | 79 |
| P | 80 | -- | 80 | 80 | 80 | 80 | 80 |
| Q | 81 | -- | 81 | 81 | 81 | 81 | 81 |
| R | 82 | -- | 82 | 82 | 82 | 82 | 82 |
| S | 83 | -- | 83 | 83 | 83 | 83 | 83 |
| T | 84 | -- | 84 | 84 | 84 | 84 | 84 |
| U | 85 | -- | 85 | 85 | 85 | 85 | 85 |
| V | 86 | -- | 86 | 86 | 86 | 86 | 86 |
| W | 87 | -- | 87 | 87 | 87 | 87 | 87 |
| X | 88 | -- | 88 | 88 | 88 | 88 | 88 |
| Y | 89 | -- | 89 | 89 | 89 | 89 | 89 |
| Z | 90 | -- | 90 | 90 | 90 | 90 | 90 |
| [ | 91 | -- | 219 | 219 | 91 | 219 | 219 |
| \ | 92 | -- | 220 | 220 | 92 | 226 | 220 |
| ] | 93 | -- | 221 | 221 | 93 | 221 | 221 |
| ^ | 94 | -- | 16 | 0 | 94 | 222 | 222 |
| _ | 95 | -- | 16 | 0 | 95 | 226 | 226 |
| ` | 96 | -- | 192 | 192 | 96 | 192 | 192 |
| a | 97 | -- | 65 | 65 | 97 | 65 | 65 |
| b | 98 | -- | 66 | 66 | 98 | 66 | 66 |
| c | 99 | -- | 67 | 67 | 99 | 67 | 67 |
| d | 100 | -- | 68 | 68 | 100 | 68 | 68 |
| e | 101 | -- | 69 | 69 | 101 | 69 | 69 |
| f | 102 | -- | 70 | 70 | 102 | 70 | 70 |
| g | 103 | -- | 71 | 71 | 103 | 71 | 71 |
| h | 104 | -- | 72 | 72 | 104 | 72 | 72 |
| i | 105 | -- | 73 | 73 | 105 | 73 | 73 |
| j | 106 | -- | 74 | 74 | 106 | 74 | 74 |
| k | 107 | -- | 75 | 75 | 107 | 75 | 75 |
| l | 108 | -- | 76 | 76 | 108 | 76 | 76 |
| m | 109 | -- | 77 | 77 | 109 | 77 | 77 |
| n | 110 | -- | 78 | 78 | 110 | 78 | 78 |
| o | 111 | -- | 79 | 79 | 111 | 79 | 79 |
| p | 112 | -- | 80 | 80 | 112 | 80 | 80 |
| q | 113 | -- | 81 | 81 | 113 | 81 | 81 |
| r | 114 | -- | 82 | 82 | 114 | 82 | 82 |
| s | 115 | -- | 83 | 83 | 115 | 83 | 83 |
| t | 116 | -- | 84 | 84 | 116 | 84 | 84 |
| u | 117 | -- | 85 | 85 | 117 | 85 | 85 |
| v | 118 | -- | 86 | 86 | 118 | 86 | 86 |
| w | 119 | -- | 87 | 87 | 119 | 87 | 87 |
| x | 120 | -- | 88 | 88 | 120 | 88 | 88 |
| y | 121 | -- | 89 | 89 | 121 | 89 | 89 |
| z | 122 | -- | 90 | 90 | 122 | 90 | 90 |
| { | 123 | -- | 16 | 219 | 123 | 219 | 219 |
| | | 124 | -- | 16 | 0 | 124 | 220 | 220 |
| } | 125 | -- | 16 | 221 | 125 | 221 | 221 |
| ~ | 126 | -- | 16 | 0 | 126 | 48 | 222 |
| TenKey : * | 42 | -- | 106 | 106 | 42 | 106 | 106 |
| TenKey : + | 43 | -- | 107 | 107 | 43 | 107 | 107 |
| TenKey : - | 45 | -- | 109 | 109 | 45 | 108 | 109 |
| TenKey : . | 46 | -- | 110 | 110 | 46 | 110 | 46 |
| TenKey : / | 47 | -- | 111 | 111 | 47 | 111 | 111 |
| TenKey : 0 | 48 | -- | 96 | 96 | 48 | 96 | 45 |
| TenKey : 1 | 49 | -- | 97 | 97 | 49 | 97 | 35 |
| TenKey : 2 | 50 | -- | 98 | 98 | 50 | 98 | 40 |
| TenKey : 3 | 51 | -- | 99 | 99 | 51 | 99 | 34 |
| TenKey : 4 | 52 | -- | 100 | 100 | 52 | 100 | 37 |
| TenKey : 5 | 53 | -- | 101 | 101 | 53 | 101 | 12 |
| TenKey : 6 | 54 | -- | 102 | 102 | 54 | 102 | 39 |
| TenKey : 7 | 55 | -- | 103 | 103 | 55 | 103 | 36 |
| TenKey : 8 | 56 | -- | 104 | 104 | 56 | 104 | 38 |
| TenKey : 9 | 57 | -- | 105 | 105 | 57 | 105 | 33 |
備考：
Netscape Navigator 4.x（NN4.x)
订阅：
博文 (Atom)