現在、ドットインストールの「JavaScriptでおみくじを作ろう」というレッスンを受講中です。
こちらのレッスンではHTML5+CSS3+JavaScriptで簡単なおみくじプログラムを作るのですが、CSS+JavaScriptによるボタンの動作について、さりげなくテクニックが使われていて自分的に勉強になったのでメモしておきたいと思います。
CSSによるボタンの作成
まずはCSSによるボタンの作成です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> #btn { margin : 0 auto; width: 200px; padding: 5px; border-radius: 5px; background: #00aaff; box-shadow: 0 4px 0 #0088cc; text-align: center; color: white; font-weight: bold; cursor: pointer; } </style> </head> <body> <div id="btn">ボタンテスト</div> </body> </html>
実際にボタンを表示させるとこんな感じになります。
ボタンテスト
CSS部分をちょっと変えれば、大きさや色を自由に変えられます。
ボタンテスト２
マウスが重なったときにボタンを明るくする
マウスがボタンに重なったとき、ボタン部分を明るくして「このボタンはクリックできますよ」と利用者に教えてくれるサイトって良くありますよね。今までどうやるか知らなかったのですが、今回のレッスンではここもさらっと教えてくれました。CSSに次のような部分を追加します。 #btn:hover {
opacity: 0.8;
}
ボタンテスト
ボタンテスト２
ボタンをクリックしたとき、へこんだように見せる
ボタンを押したとき、押されたボタンがへこんだように見せるテクニックも紹介されていました。CSS+JavaScriptで実現しています。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> #btn { margin : 0 auto; width: 200px; padding: 5px; border-radius: 5px; background: #00aaff; box-shadow: 0 4px 0 #0088cc; text-align: center; color: white; font-weight: bold; cursor: pointer; } #btn:hover { opacity: 0.8; } #btn.pushed { margin-top: 10px; box-shadow: 0 2px 0 #0088cc; } </style> </head> <body> <div id="btn">ボタンテスト</div> <script> "use strict"; (function() { document.getElementById('btn').addEventListener('mousedown',function() { this.className = 'pushed'; }); document.getElementById('btn').addEventListener('mouseup',function() { this.className = ''; }); })(); </script> </body> </html>
実際実行してみるとこんな感じです。
ボタンテスト
今回のレッスンだとボタンが１番下にあるので気になりませんが、このままだと、このボタン以降の文章がボタンの挙動に合わせて動いてしまいます。実際に使う場合は、使う場所やCSSをもう一工夫する必要がありそうです。
動作確認用のサンプルでは、ボタンをdivタグで囲み、ボタンのpositionにabsolute指定を加えることで、見た目固定するようにしています。ソースはこちらです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> #box { margin:0 auto; width: 500px; height:80px; text-align:center; } #btn { position:absolute; margin : 0 auto; width: 200px; padding: 5px; border-radius: 5px; background: #00aaff; box-shadow: 0 4px 0 #0088cc; text-align: center; color: white; font-weight: bold; cursor: pointer; } #btn:hover { opacity: 0.8; } #btn.pushed { margin-top: 10px; box-shadow: 0 2px 0 #0088cc; } </style> </head> <body> <div id="box"> <div id="btn">ボタンテスト</div> </div> <script> "use strict"; (function() { document.getElementById('btn').addEventListener('mousedown',function() { this.className = 'pushed'; }); document.getElementById('btn').addEventListener('mouseup',function() { this.className = ''; }); })(); </script> </body> </html>
もう少し良い方法があるかもしれません。改善の余地ありですね。
