押しボタン
このところ、JavaScriptを学んでいますが、目的はウェブサイトを動かすためなので必然的にHTMLやCSSの知識も要求されます。
IT業界人では無いボクにとっては、日々、使う知識では無いので、おさらいがてら、こうやって記事を書きます。
今回は、ボタンを押したら、ボタンが下がる挙動を書いてみます。
CSSとJavaScript
HTMLのdiv要素として、
<div id="button1">ボタン</div> …idにbutton1を指定
と書いただけです。
で、スタイルシートの中身はこれ。
#button1 {
color: #fff; …文字色は白
font-size: 40px; …フォントサイズ
font-weight: bold; …太字にする
text-align: center; …左右位置を中央に
line-height: 100px; …文字の行の高さ
margin: 48px auto 48px; …上下のマージン（スキマ）を48ピクセルに
width: 180px; …幅
height: 100px; …高さ
border-radius: 10%; …角の丸さ
background: #559; …背景色
border: 4px solid #a55; …境界線の太さ、形状、色
cursor: pointer; …マウスカーソルが重なったら手の形にする
opacity: 0.7; …透明度
box-shadow: 0 14px 0 #337; …影を下に14ピクセル
user-select:none; …文字が選択できないようにする
}
#button1:hover {
opacity: 1; …透明度を無くす
}
#button1.down {
margin: 54px auto 42px; …上のマージンを54ピクセルに6ピクセル増やし、その分、下のマージンを減らす
box-shadow: 0 8px 0 #337; …影の長さを短くする
}
最後にJavaScriptの内容は、
function(){
var button = document.getElementById("button1");
button.addEventListener("mousedown", function(){ this.className = "down"; });
button.addEventListener("mouseup", function(){ this.className = ""; });
})();
要するに、ドキュメントのbutton1と言うidを拾って来て、マウスが押されている時には、downクラスを、マウスが押されていない時には、クラス名が無しになります。
で、downクラスのときだけ、ボタンがの位置が少し下に降りるわけですね。
画像は一切使わずにCSSだけで表現しています。
ボタンが押されていない時には上のスキマは48ピクセルあり、押されるとスキマが56ピクセルになるので、ボタンが下がっているように見えるわけです。
同時に、影の高さも6ピクセル減らしています。下のスキマは逆に6ピクセル増やしています。
ちなみに、パソコンの場合はマウスカーソルですが、スマートフォンやタブレットの場合は、タッチです。
パソコンでマウスカーソルを押している場合と、スマートフォンやタブレットでタッチしている場合の動作を同じにしようと思いました。
その場合、HTMLのdiv要素に、
<div id="button1" ontouchstart="">ボタン</div>
と書いて、CSSに、これを追加すれば動くはずです。
#button1:active {
margin: 54px auto 42px;
box-shadow: 0 8px 0 #337;
}
ところが、何と、このブログで使っている、はてなブログと言うシステムでは、
ontouchstart=""
と書いても、勝手に消されてしまうんです。
なので、上記のボタンは、スマートフォンやタブレットでは動作しないはずです。
はてなブログを辞めたくなってきました。
はてなブログと言うシステムは、間違いを防ぐためにHTMLを自動的に修正する機能があるようですが、逆にそのおかげで、このように実現できないことが発生しています。
他のやり方もあるんでしょうが、今のボクのスキルでは無理です。
どなたか、教えてもらえませんか？
※と思って記事を公開してみたら、iPhoneでタッチすると、きちんとボタンが下がりますね。
まだまだ学ぶことは多い……。
