Skip to content

Instantly share code, notes, and snippets.

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