Skip to content

Instantly share code, notes, and snippets.

@ShikiOkasaka

ShikiOkasaka/new-stickney7.html

Created January 3, 2017 09:58
Show Gist options
  • Save ShikiOkasaka/cbd37d0f44b83ee112bac4f4e271d211 to your computer and use it in GitHub Desktop.
Save ShikiOkasaka/cbd37d0f44b83ee112bac4f4e271d211 to your computer and use it in GitHub Desktop.
Download ZIP
ANSI/New Stickney 7 配列(案)
Raw
new-stickney7.html
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<link rel='license' href='http://creativecommons.org/publicdomain/zero/1.0/'>
<title>ANSI/New Stickney 7 配列(案)</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 {
display: inline-block;
border: 1px solid #666;
width: 12px;
line-height: 12px;
text-align: center;
}
.kana {
color: #3c6
}
.h {
color: #42a5f5 /* 4b */
}
.r {
color: #42a5f5 /* 4b */
}
.y {
color: #42a5f5 /* 4b */
}
.a {
color: #1e88e5 /* 6b */
}
.k {
color: #1e88e5 /* 6b */
}
.m {
color: #1976d2 /* 7b */
}
.t {
color: #1565c0 /* 8b */
}
.n {
color: #0d47a1 /* 9b */
}
.s {
color: #0d47a1 /* 9b */
}
.w {
color: #0d47a1 /* 9b */
}
#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/New Stickney 7 配列(案)</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 kana'>前置/連続シフト</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 class='k'>け</div><div class='k'>く</div><div class='k'>き</div><div class='k'>こ</div><div class='t'>つ</div><div class='y'>や</div><div class='y'>ゆ</div><div class='y'>よ</div><div class='n'>な</div><div class='n'>に</div><div>「</div><div>」</div><div class='k150'>¥</div>
<br>
<div class='k175'></div><div class='t'>た</div><div class='h'>は</div><div class='s'>し</div><div class='k'>か</div><div class='t'>て</div><div class='w'>ん</div><div class='a'>う</div><div class='a'>い</div><div><span class='small'>゛</span></div><div class='n'>の</div><div><span class='small'>&nbsp;&nbsp;&nbsp;</span></div><div class='k225'></div>
<br>
<div class='k225'></div><div class='s'>そ</div><div class='s'>せ</div><div class='s'>す</div><div class='t'>と</div><div class='s'>さ</div><div><span class='small t'>っ</span></div><div class='r'>れ</div><div>、</div><div>。</div><div class='w'>を</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></div><div class='t'>ち</div><div class='n'>ぬ</div><div class='n'>ね</div><div></div><div class='m'>む</div><div class='m'>め</div><div class='a'>お</div><div class='m'>ま</div><div class='m'>み</div><div>『</div><div>』</div><div class='k150'></div>
<br>
<div class='k175'></div><div class='h'><span class='small'>゜</span></div><div class='h'>ひ</div><div class='h'>ふ</div><div class='h'>へ</div><div class='h'>ほ</div><div class='r'>り</div><div class='r'>る</div><div class='a'>あ</div><div class='w'>わ</div><div class='m'>も</div><div><span class='small'>・</span></div><div class='k225'></div>
<br>
<div class='k225'></div><div></div><div></div><div></div><div></div><div></div><div class='r'>ろ</div><div class='r'>ら</div><div class='a'>え</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