▲TOPへ戻る

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

keybord design

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

以下のようなキーボードを【HTML】【CSS】【javascript】で作ってみたいと思います。

なぜ必要になったかというと、タイピングゲームを実装した時に、PCとiosは動作するのに、 androidは動作しなかったので、自作でキーボードを作ってみることにしました。

typed :

HTML

input typeは 、button

valueは 、キーボード上の文字とする。

onclickの引数には、eventを指定します。

<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

box-shadowinsetを使うことにより、 ボタンが押された状態を表現。

.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

キーボードのvalueを受け取るコードはとてもカンタンです。

関数をonclickで指定。

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

参考

js
【javascript】onclickの書き方と使い方 クリックした値を取得する
ロリポップ!レンタルサーバーロリポップ レンタルサーバー SAMURAI ENGINEER(侍エンジニア)|無料カウンセリング予約 侍エンジニア

まとめ

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇