CSSだけでピアノ鍵盤を再現！クリックやホバーで音が出るような表現も可能に

11月 12, 2025 11月 12, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回はちょっと遊び心のあるテーマ、「CSSだけでピアノ鍵盤を再現する」テクニックをご紹介します。

HTMLとCSSの基本的なボックスレイアウトを活かしながら、白鍵と黒鍵の配置・比率・立体感を忠実に再現。
音を鳴らす機能を付けなくても、デザインパーツとして完成度の高い“ピアノ風UI”が作れます。
サイトの背景装飾や、音楽教室・アーティストページなどのデザインにぴったりの演出です。

HTML構造：白鍵と黒鍵を配置する

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まずは基本となるHTMLから。
白鍵と黒鍵をそれぞれクラスで区別して配置します。

<div class="piano">
  <div class="white-key"></div>
  <div class="black-key"></div>
  <div class="white-key"></div>
  <div class="black-key"></div>
  <div class="white-key"></div>
  <div class="white-key"></div>
  <div class="black-key"></div>
  <div class="white-key"></div>
</div>

このように、白鍵と黒鍵を交互に配置することで、ピアノのキー構造を表現します。

CSSでピアノ鍵盤のデザインを再現

次に、白鍵・黒鍵の見た目をCSSで整えていきます。
position: absolute;を活用して、黒鍵を白鍵の上に重ねて配置します。

HTML CSSResult Skip Results Iframe
EDIT ON
 body {
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .piano {
    position: relative;
    display: flex;
    width: 560px;
    height: 200px;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
  }
  .white-key {
    flex: 1;
    background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
    border-right: 1px solid #aaa;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  }
  .black-key {
    position: absolute;
    width: 60px;
    height: 120px;
    background: linear-gradient(to bottom, #333 0%, #000 100%);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.5);
    z-index: 2;
  }
  .black-key:nth-child(2) {
    left: 60px;
  }
  .black-key:nth-child(4) {
    left: 160px;
  }
  .black-key:nth-child(7) {
    left: 360px;
  }

これで、白鍵と黒鍵が重なって見えるリアルなピアノデザインが完成します。