1. ホーム
2. パソコン
3. javascript

【HTML】【CSS】【javascript】キーボードデザイン（Keyboard Design）とキーの値を取得する

投稿日 : 2022年08月05日 更新日 :

キーボードデザインと値の取得

HTML

展開

<div class="keybord-wrapper">
  <!-- 一番上の段 -->
  <div class="keys">
    <input type="button" value="Q" onclick="typed(event)" />
    <input type="button" value="W" onclick="typed(event)" />
    <input type="button" value="E" onclick="typed(event)" />
    <input type="button" value="R" onclick="typed(event)" />
    <input type="button" value="T" onclick="typed(event)" />
    <input type="button" value="Y" onclick="typed(event)" />
    <input type="button" value="U" onclick="typed(event)" />
    <input type="button" value="I" onclick="typed(event)" />
    <input type="button" value="O" onclick="typed(event)" />
    <input type="button" value="P" onclick="typed(event)" />
  </div>
  <!-- 真ん中の段 -->
  <div class="keys">
    <input type="button" value="A" onclick="typed(event)" />
    <input type="button" value="S" onclick="typed(event)" />
    <input type="button" value="D" onclick="typed(event)" />
    <input type="button" value="F" onclick="typed(event)" />
    <input type="button" value="G" onclick="typed(event)" />
    <input type="button" value="H" onclick="typed(event)" />
    <input type="button" value="J" onclick="typed(event)" />
    <input type="button" value="K" onclick="typed(event)" />
    <input type="button" value="L" onclick="typed(event)" />
  </div>
  <!-- 一番下の段 -->
  <div class="keys">
    <input type="button" value="Z" onclick="typed(event)" />
    <input type="button" value="X" onclick="typed(event)" />
    <input type="button" value="C" onclick="typed(event)" />
    <input type="button" value="V" onclick="typed(event)" />
    <input type="button" value="B" onclick="typed(event)" />
    <input type="button" value="N" onclick="typed(event)" />
    <input type="button" value="M" onclick="typed(event)" />
  </div>
  <div class="keys">
    <input type="button" value="SPACE" />
  </div>
</div>

CSS

展開

.keybord-wrapper {
  min-width: 300px;
  max-width: 650px;
  padding: 15px;
  border-radius: 10px;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
    2px 2px 5px rgba(94, 104, 121, 0.288);
  margin: 0 auto;
}
.keybord-wrapper .keys {
  display: flex;
  justify-content: center;
}
.keybord-wrapper .keys input {
  height: 50px;
  min-width: 28px;
  padding: 6px;
  border: none;
  outline: none;
  background: #dde1e7;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),
    -3px -3px 7px rgba(255, 255, 255, 0.05);
  margin: 4px;
  color: grey;
  font-size: 20px;
  border-radius: 5px;
  cursor: default;
}
/* ボタンが押された時 */
.keybord-wrapper .keys input:focus {
  font-size: 19px;
  font-weight: bold;
  color: #66db34;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -3px -3px 7px rgba(255, 255, 255, 0.05);
}
.keybord-wrapper .keys input[value="SPACE"] {
  width: 60%;
}
@media (max-width: 480px) {
  .keybord-wrapper {
    padding: 6px;
  }
}

javascript

function typed(e) {
  console.log(e.target.value);
}

参考

【javascript】onclickの書き方と使い方 クリックした値を取得する

まとめ