【marginをマイナス値で指定】htmlで「ボタンの中にボタン」を作る方法！（ピアノの白鍵と黒鍵を作ってみた）

6974 ワード
デザイン HTML button CSS 初心者 HTML テキストリンク

（前置き）buttonタグだけでピアノを作りたい！⇒白鍵と黒鍵の重なりをどうしよう？

htmlには「button」というタグがあって、＜button＞~＜/button＞という簡単な記述でボタンを作り出すことができます。これを使って、ブラウザでピアノを作ってみることにしました！

とりあえず、「ド」の鍵盤を作ってみました。

piano.html
<html>
<head>
<link rel="stylesheet" href="piano.css">
</head>
<body>

<div align="center">

<button id="do">ド</button>

</div>

</body>
</html>

＜div align="center"＞＜/div＞で囲んだ要素は、ページの中央に表示されます。
鍵盤がページの真ん中にあった方が見栄えがいいので使ってみました。

続いて、cssでボタンの幅と高さを指定していきます。
ピアノの鍵盤と言えば、真っ白縦長の長方形ですよね！

piano.css
#do
{width : 80px;
  height : 400px;
  font-size : 20px;
  background-color : #ffffff;
  border-color : #000000;}

実際に表示してみると

いい感じですね。
続いて「ド#」を作ります。同じようにbuttonタグで

piano.html
<html>
<head>
<link rel="stylesheet" href="piano.css">
</head>
<body>

<div align="center">

<button id="do">ド</button>
<button id="dos">ド#</button>

</div>

</body>
</html>

cssで黒鍵の色、形を指定します。
黒鍵と言えば、白鍵よりちょっと小さくて黒いですよね。

piano.css
#dos
{width : 64px;
  height : 320px;
  font-size : 20px;
  background-color : #000000;
  color : #fffafa;}

こんな風に指定して、表示してみると…？

思ってたんと違う。2点ほど問題がありますね。
①上端ぞろえになっていない
②黒鍵と白鍵が重なっていない

①を解決するためには、cssに次のような付けたしをしてあげましょう！

piano.css
#do, #dos
  {display: inline-block;
    vertical-align : top;}

メインでやりたいことは「vertical-align : top;」、つまり
「『ド』の鍵盤と『ド#』の鍵盤を両方とも上端揃えで表示してよ！」
という指示なのですが、このvertical-alignは本来テキスト要素用の書き方らしく、単独ではボタンなどのボックス要素に対して効いてくれません。
そこで「display: inline-block;」を足してあげるというわけですね。

この部分は私自身もまだ理解が浅いので、しっかり理解出来たらまた別の記事に書こうと思います。

ともかく、vertical-alignを設定してあげることで、表示は

無事、上端揃えになりました！
次に、「黒鍵と白鍵が重なっていない問題」を解決していきます。

（本題）marginタグでボタンとボタンを重ねよう！

html・cssでは「margin」という値を指定することができます。
margin は、「要素と要素の間の空白」の長さのことです。

marginは、上下左右をそれぞれ指定することができます。

上側：　margin-top：○○px;
下側： margin-bottom：○○px;
右側： margin-right：○○px;
左側： margin-left：○○px;

そして、marginには負の値を設定することもできます！！
marginがマイナスならば、要素同士は重なることになります。

なので、黒鍵を白鍵に重ねるには、重ねる側の「ド#」にcssで次のような付けたしをしてあげます。

piano.css
#dos
  {margin-left : -20px;}

表示してみると、

白鍵と黒鍵が重なって、ピアノらしい見た目になりました！

以上です。
「marginは負の値も設定できる」ことを知らずに私はハマってしまいました。
htmlに取り組むどなたかの助けになれば嬉しいです。