こんにちはTakaです。今回は『閉じるボタン』を簡単に作る方法をご紹介します。ここでいう閉じるボタンとは、Windowを非表示にするボタンのことです。
目次
HTML,CSSで閉じるボタンを作るメリット
閉じるボタンはJavascriptを使って作成することも可能ですが、HTMLとCSSだけでボタンをつくると画面を遷移しないでコンテンツを閉じることができます。そのため、Webサーバにリクエストする回数を最小限にすることが可能です。また、JavaScriptのDOM操作がいらないので、その分だけブラウザの負荷を軽減できます。
HTML,CSSで閉じるボタンを作るサンプルコード
まずはHTML, CSSで作る場合のソースコードを見ていきましょう。後ほどJavascriptを使う場合の方法も解説します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="close-btn.css"> <title>閉じるボタン</title> </head> <body> <div class="add-control"> <div class="action-close"> <input type="checkbox" class="checkbox" id="close" name="close" /><label for="close" class="btn">閉じる</label> <div class="box">閉じるコンテンツ</div> </div> </div> </body> </html> |
HTMLはチェックボックスとラベル、閉じるコンテンツだけです。ボタンのコントロール用クラス(add-control)を親要素にしています。閉じるボタンはチェックボックスとラベルを使って作ってみました。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.btn { color: #fff; background: #ffce5b; padding: .3em .5em; border-radius: .3em; text-align: center; display: table; cursor: pinter; } .btn:hover { cursor: pinter; } .btn:active { background: #f4d600; } .box { border: 2px solid #ffce5b; border-radius: .3em; height: 300px; } /* close button */ .action-close { position: relative; margin-top: 2em; } .action-close .btn { position: absolute; right: 0; top: -1em; } .action-close .box { margin-bottom: 2em; border: 2px solid #ffce5b; } /* checkbox 非表示 */ .add-control .checkbox { display: none; } /* close button's control */ .add-control .action-close #close:checked ~ .btn { display: none; } .add-control .action-close #close:checked ~ .box { display: none; } |
CSSは、チェックボックスのラベルにボタンの形と、ボタンを押したときのスタイルを入れました。割とシンプルなデザインにしています。
また、チェックボックスを非表示にする必要があるので、display: noneにしています。
|
1 2 3 |
.add-control .checkbox { display: none; } |
CSSの処理を簡単に説明すると、
・チェックボックス(checkbox)を非表示
・閉じるボタン(bnt)をクリック→閉じるボタン、コンテンツボックス(box)を非表示
こんな感じになります。
では実際に動かしてみましょう。
こちらが実行結果です。(Code Pen)
See the Pen
close-btn by Taka (@taka197)
on CodePen.
これでCSSで閉じるボタンの処理ができました。思ったより簡単ですね。
Javascriptで閉じる方法
先ほどはHTML,CSSを使って閉じるボタンを作る方法を紹介しましたが、Javascriptを使って閉じる方法も一応紹介していきます。
window.closeメソッドを呼び出す
window.closeメソッドは、WebページをJavaScriptで閉じるために用意されているメソッドです。このメソッドが呼ばれると、現在開かれているウィンドウが閉じられます。コードは以下のように書きます。
|
1 |
window.close() |
※ただし、このメソッドには制限があり、原則としてwindow.openで開かれたWebページしか閉じることができません。そのためブラウザによってはwindow.openで開いたページでないと閉じることが出来ないので注意しましょう。
window.closeメソッド以外の方法
以下のコードを書けばwindow.closeを使わずに閉じることが可能です。
|
1 |
window.open('about:blank','_self').close(); |
簡単に説明すると、一回自分自身に対して空タブを開くことでjsの操作対象にしてその上でclose()を実行しているというイメージです。ちなみにFireFoxではこちらの方法でも空タブが残ってしまうので注意しましょう。
Javascriptを使った場合のサンプルコード
下記がjavascriptを使った場合のサンプルコードになります。今回はGoogleのトップページを開くボタンと閉じるボタンを用意しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang='ja'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>閉じるボタン</title> </head> <body> <button onClick="openWindow()">open</button> <button onClick="closeWindow()">close</button> </body> </html> <script> let win const openWindow = () => { win = window.open("https://google.com") } const closeWindow = () => { win.close() } </script> |
OpenでGoogleのトップページを開き、Closeで閉じることができます。
こちらが実行結果です。
See the Pen
close-btn by Taka (@taka197)
on CodePen.
まとめ
いかがでしたか？今回は「閉じるボタン」について解説しました。閉じるボタンの挙動はプログラミング初心者にとっては見た目と動きで難しく感じてしまう方もいますが、実際はとても簡単です。是非参考にしてみてくださいね。
