CSSとJavaScriptでキーボードを再現する

執筆日: 2021-09-04

概要

CSSのグリッドレイアウトの練習としてキーボードレイアウトを作成しました。
JavaScriptを使用し、キーを押すと押下エフェクトを出すようにしています(一部キーコードが不明な部分は押下エフェクトがなされませんので、悪しからず)。

コード

コツ

グリッドレイアウトに関しては、グリッドをいくつに分けて、キーに応じた占有範囲を考えると上手く組めると思います。

キー押下時は、押下したキーコードとあらかじめhtmlで割り振っているdata-key属性を照らし合わせてクラス付与・除去をしています。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店