Skip to content

Instantly share code, notes, and snippets.

@ShikiOkasaka

ShikiOkasaka/ansi-x6004.html

Last active December 18, 2016 03:33
Show Gist options
  • Save ShikiOkasaka/b96c324e28df16b7a5139044f8e9c022 to your computer and use it in GitHub Desktop.
Save ShikiOkasaka/b96c324e28df16b7a5139044f8e9c022 to your computer and use it in GitHub Desktop.
Download ZIP
ANSI/新JIS配列 #JIS配列改
Raw
ansi-x6004.html
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<link rel='license' href='http://creativecommons.org/publicdomain/zero/1.0/'>
<title>ANSI/新JIS 配列</title>
<style>
body {
margin: 4px;
font-family: sans-serif;
font-size: 14px;
}
h1 {
font-size: 1.6em;
width: 720px;
text-align: center;
}
.layer {
position: absolute;
}
.layer>div {
display: inline-block;
padding: 1px;
width: 45px;
height: 45px;
margin: 1px;
vertical-align: bottom;
}
.layer>.k125 {
width: 57px;
}
.layer>.k150 {
width: 69px;
}
.layer>.k175 {
width: 81px;
}
.layer>.k200 {
width: 93px;
}
.layer>.k225 {
width: 105px;
}
.layer>.k275 {
width: 129px;
}
.layer>.k625 {
width: 300px;
}
.small {
border: 1px solid #666;
}
#L0 {
top: 64px;
left: 12px;
}
#L0>div {
padding: 0;
border: solid 1px black;
border-radius: 4px;
text-align: center;
line-height: 45px;
}
#L1 {
top: 64px;
left: 14px;
line-height: 45px;
}
#L2 {
top: 64px;
left: 12px;
text-align: center;
}
#L3 {
top: 77px;
left: 12px;
text-align: center;
line-height: 45px;
color: #666;
}
#L4 {
top: 66px;
left: 42px;
line-height: 45px;
color: #666;
}
</style>
</head>
<body>
<h1>ANSI/新JIS 配列</h1>
<div class='layer' id='L0'>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='k200'>BACKSPACE</div>
<br>
<div class='k150'>TAB</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='k150'></div>
<br>
<div class='k175'>CAPS</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='k225'>ENTER</div>
<br>
<div class='k225'>SHIFT</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='k275'>SHIFT</div>
<br>
<div class='k125'>CTRL</div><div class='k125'>❖</div><div class='k125'>ALT</div><div class='k625'></div><div class='k125'>ALT</div><div class='k125'>❖</div><div class='k125'>☰</div><div class='k125'>CTRL</div>
</div>
<div class='layer' id='L1'>
<div>`</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>0</div><div>-</div><div>=</div><div class='k200'></div>
<br>
<div class='k150'></div><div>Q</div><div>W</div><div>E</div><div>R</div><div>T</div><div>Y</div><div>U</div><div>I</div><div>O</div><div>P</div><div>[</div><div>]</div><div class='k150'>\</div>
<br>
<div class='k175'></div><div>A</div><div>S</div><div>D</div><div>F</div><div>G</div><div>H</div><div>J</div><div>K</div><div>L</div><div>;</div><div>'</div><div class='k225'></div>
<br>
<div class='k225'></div><div>Z</div><div>X</div><div>C</div><div>V</div><div>B</div><div>N</div><div>M</div><div>,</div><div>.</div><div>/</div><div class='k275'></div>
<br>
<div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k625'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div>
</div>
<div class='layer' id='L2'>
<div>~</div><div>!</div><div>@</div><div>#</div><div>$</div><div>%</div><div>^</div><div>&amp;</div><div>*</div><div>(</div><div>)</div><div>_</div><div>+</div><div class='k200'></div>
<br>
<div class='k150'></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>{</div><div>}</div><div class='k150'>|</div>
<br>
<div class='k175'></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>:</div><div>"</div><div class='k225'></div>
<br>
<div class='k225'></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>&lt;</div><div>&gt;</div><div>?</div><div class='k275'></div>
<br>
<div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k625'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div>
</div>
<div class='layer' id='L3'>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='k200'></div>
<br>
<div class='k150'></div><div>そ</div><div>け</div><div>せ</div><div>て</div><div><span class='small'>ょ</span></div><div>つ</div><div>ん</div><div>の</div><div>を</div><div>り</div><div>ち</div><div></div><div class='k150'>¥</div>
<br>
<div class='k175'></div><div>は</div><div>か</div><div>し</div><div>と</div><div>た</div><div>く</div><div>う</div><div>い</div><div>゛</div><div>き</div><div>な</div><div class='k225'></div>
<br>
<div class='k225'></div><div>す</div><div>こ</div><div>に</div><div>さ</div><div>あ</div><div><span class='small'>っ</span></div><div>る</div><div>、</div><div>。</div><div>れ</div><div class='k275'></div>
<br>
<div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k625'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div>
</div>
<div class='layer' id='L4'>
<div>〜</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class='k200'></div>
<br>
<div class='k150'></div><div><span class='small'>ぁ</span></div><div>゜</div><div>ほ</div><div>ふ</div><div>め</div><div>ひ</div><div>え</div><div>み</div><div>や</div><div>ぬ</div><div>「</div><div></div><div class='k150'></div>
<br>
<div class='k175'></div><div><span class='small'>ぃ</span></div><div>へ</div><div>ら</div><div><span class='small'>ゅ</span></div><div>よ</div><div>ま</div><div>お</div><div>も</div><div>わ</div><div>ゆ</div><div>」</div><div class='k225'></div>
<br>
<div class='k225'></div><div><span class='small'>ぅ</span></div><div><span class='small'>ぇ</span></div><div><span class='small'>ぉ</span></div><div>ね</div><div><span class='small'>ゃ</span></div><div>む</div><div>ろ</div><div>・</div><div>ー</div><div>？</div><div class='k275'></div>
<br>
<div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k625'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div><div class='k125'></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment