博ログ。

地方の中小企業の事務員兼IT担当者やってます。日々の出来事やパソコン・スマートフォンなどIT・ガジェット全般について書いていきたいと思います。

スポンサーリンク

CSS+JavaScriptで作るボタン

スポンサーリンク

現在、ドットインストールの「JavaScriptでおみくじを作ろう」というレッスンを受講中です。

f:id:hiro-loglog:20170422012628p:plain

こちらのレッスンでは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部分をちょっと変えれば、大きさや色を自由に変えられます。

ボタンテスト2


マウスが重なったときにボタンを明るくする

 マウスがボタンに重なったとき、ボタン部分を明るくして「このボタンはクリックできますよ」と利用者に教えてくれるサイトって良くありますよね。今までどうやるか知らなかったのですが、今回のレッスンではここもさらっと教えてくれました。CSSに次のような部分を追加します。

        #btn:hover {
            opacity: 0.8;
        }


ボタンテスト

 

ボタンテスト2


ボタンをクリックしたとき、へこんだように見せる

 ボタンを押したとき、押されたボタンがへこんだように見せるテクニックも紹介されていました。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>

実際実行してみるとこんな感じです。


ボタンテスト

今回のレッスンだとボタンが1番下にあるので気になりませんが、このままだと、このボタン以降の文章がボタンの挙動に合わせて動いてしまいます。実際に使う場合は、使う場所や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>

もう少し良い方法があるかもしれません。改善の余地ありですね。

最後に

 今回の「JavaScriptでおみくじを作ろう」を受講していて、CSSで作るボタンに興味を持ち調べてみると色々テクニックがあるようです。自分で管理しているWebサイトでも利用できるようもう少し勉強してみたいと思います。