빠른손 LAB
[HTML/CSS] 일본 키보드 구현해보기
빠른손
2022. 1. 27. 21:09
728x90
일본에 있을 때 심심해서 그냥 만들어 본 키보드
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J">
<title>Keyboard</title>
<style>
#totalbox { width: 1265px; height: 400px; border: 3px dotted #007bff;}
div.keys { display: block;}
div.key { background-color: #e6f2ff; font-size: 11px; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 13px 2px 8px 13px; width: 43px; height: 21px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left; }
div.key:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.key1 { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 46px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.key1:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
.orange { color: orange; font-size: 12px;} .orange1 { color: orange; font-size: 12px;}
div.key2 { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 46px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.tab { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 70px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.tab:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.key2:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.enter { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 88px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.enter:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.caps {font-size: 15px; background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 2px 10px; width: 78px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.caps:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.enter2 { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 80px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.shift-left { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 121px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.shift-right { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 0px 2px 10px; width: 105px; height: 30px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.shift-left:hover, div.shift-right:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.enter2:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.space { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 152px; height: 35px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.zero { background-color: #e6f2ff; color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 4px 10px; width: 112px; height: 35px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.key3 { background-color: #e6f2ff;color: #cc8800; border: 1px solid skyblue; padding: 2px; margin: 8px 2px 5px 10px; width: 46px; height: 35px; text-align: center; border-bottom: 3px solid skyblue; border-right: 3px solid skyblue; font-weight: bold; display: inline; float: left;}
div.key3:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.space:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.zero:hover { background-color: skyblue; color: white; border: 1px solid blue; font-weight: bold; text-align: center; border-top: 3px solid blue; border-left: 3px solid blue;}
div.yajirusi {color: #cc8800; padding: 2px; margin: 2px 1px 2px 10px; width: 144px; height: 40px; text-align: center; font-weight: bold; display: inline; float: left;}
td.yajiru { background-color: #e6f2ff; border: 1px solid skyblue; color: #cc8800; border-bottom: 3px solid skyblue; border-right: 2px solid skyblue;}
td.yajiru:hover { border: 1px solid blue; background-color: skyblue; color: white; border-top: solid 2px blue; border-left: solid 2px blue; }
.romaji { font-size: 10px;} .henkan { font-size: 13px;} .roma { font-size: 11px;} .title { color: black;}
</style>
</head>
<body>
<div id="totalbox">
<h2 align="center" style="font-family:Courier New; color: #b35900"><span class="title"><i>HTML5/CSS3</i></span> Practice :Keyboard(laptop ver) / designed by 鄭</h2>
<!-- top key -->
<div class="keys">
<div class="key">ESC</div> <div class="key">F1</div> <div class="key">F2</div> <div class="key">F3</div>
<div class="key">F4</div> <div class="key">F5</div> <div class="key">F6</div> <div class="key">F7</div>
<div class="key">F8</div> <div class="key">F9</div> <div class="key">F10</div> <div class="key">F11</div>
<div class="key">F12</div> <div class="key">INS <span class="orange1">SCROLL</span></div> <div class="key">DEL</div> <div class="key">HOME <span class="orange">SYSRQ</span></div>
<div class="key">END <span class="orange">PRTSC</span></div> <div class="key">PGUP <span class="orange">BREAK</span></div> <div class="key">PGDN <span class="orange">PAUSE</span></div>
</div>
<!-- key lv1 -->
<div class="keys">
<div class="key1">半/全 <span class="orange">漢字</span></div> <div class="key1">1</div> <div class="key1">2</div>
<div class="key1">3</div> <div class="key1">4</div> <div class="key1">5</div>
<div class="key1">6</div> <div class="key1">7</div> <div class="key1">8</div>
<div class="key1">9</div> <div class="key1">0</div> <div class="key1">-</div>
<div class="key1">^</div> <div class="key1">\</div> <div class="key1"><span class="roma">BACK SPACE</span></div>
<div class="key1"><span class="roma">NUM LOCK</span></div> <div class="key1">/</div> <div class="key1">*</div> <div class="key1">-</div>
</div>
<!-- key lv2 -->
<div class="keys">
<div class="tab">TAB</div> <div class="key2">Q</div> <div class="key2">W</div>
<div class="key2">E</div> <div class="key2">R</div> <div class="key2">T</div>
<div class="key2">Y</div> <div class="key2">U</div> <div class="key2">I</div>
<div class="key2">O</div> <div class="key2">P</div> <div class="key2">@</div>
<div class="key2">[</div> <div class="enter">ENTER ←</div> <div class="key2">7 <span class="orange">HOME</span></div>
<div class="key2">8 <span class="orange">↑</span></div> <div class="key2">9 <span class="orange">PGUP</span></div> <div class="key2">+</div>
</div>
<!-- key lv3 -->
<div class="keys">
<div class="caps">CAPS LOCK</div> <div class="key2">A</div> <div class="key2">S</div> <div class="key2">D</div>
<div class="key2">F</div> <div class="key2">G</div> <div class="key2">H</div>
<div class="key2">J</div> <div class="key2">K</div> <div class="key2">L</div>
<div class="key2">;</div> <div class="key2">:</div> <div class="key2">]</div>
<div class="enter2">ENTER ←</div>
<div class="key2">4 <span class="orange">←</span></div> <div class="key2">5</div> <div class="key2">6 <span class="orange">→</span></div>
<div class="key2">+</div>
</div>
<!-- key lv4 -->
<div class="keys">
<div class="shift-left">SHIFT</div> <div class="key2">Z</div> <div class="key2">X</div> <div class="key2">C</div>
<div class="key2">V</div> <div class="key2">B</div> <div class="key2">N</div>
<div class="key2">M</div> <div class="key2"><</div> <div class="key2">></div>
<div class="key2">?</div> <div class="key2">_</div> <div class="shift-right">SHIFT</div>
<div class="key2">1 <span class="orange">END</span></div> <div class="key2">2 <span class="orange">↓</span></div> <div class="key2">3 <span class="orange">PGDN</span></div>
<div class="key2">ENTER</div>
</div>
<!-- key lv5 -->
<div class="keys">
<div class="key3">CTRL</div> <div class="key3"><span class="orange">FN</span></div> <div class="key3">Win</div>
<div class="key3"><span class="orange">ALT</span></div> <div class="key3"><span class="henkan">無変換</span></div> <div class="space">SPACE</div>
<div class="key3">変換</div> <div class="key3"><span class="romaji">カナ/かな</span> <span class="orange">ローマ字</span></div> <div class="key3"><span class="orange">ALT</span></div> <div class="key3">文書</div>
<div class="key3">CTRL</div>
<div class="yajirusi">
<table align="center">
<tbody><tr>
<td></td><td class="yajiru" style="width: 60px;">↑</td><td></td>
</tr>
<tr>
<td class="yajiru" style="width: 60px;">←</td>
<td class="yajiru" style="width: 60px;">↓</td>
<td class="yajiru" style="width: 60px;">→</td>
</tr></tbody></table>
</div>
<div class="zero">0 <span class="orange">INS</span></div> <div class="key3">. <span class="orange">DEL</span></div> <div class="key3">ENTER</div>
</div>
</div>
<p>改善が必要な部分 : +(key-pad: plus)、Enter(center)、Enter(key-pad)、特文字</p>
</body></html>728x90