HTMLのonclick属性でウィンドウを閉じるボタンを作る方法を徹底解説

2024.01.06

「HTMLにウィンドウを閉じるボタンを設置するにはどうしたらいいんだろう？」

このような悩みを抱えている方もいるのではないでしょうか。また、ウィンドウを閉じるボタンを実装したけれど動作しないと悩んでいる方もいるかもしれません。

HTMLのonclick属性を使うことで、簡単に閉じるボタンを実装できます。実装方法と同時に利用できない環境の把握も必要になるでしょう。

今回、WEBCAMP MEDIAは、HTMLのonclick属性でウィンドウを閉じるボタンを作る方法について解説していきます。

以上の項目に沿って説明します。

この記事を読むことで、HTMLで閉じるボタンを作る仕組みを理解できます。また、サンプルコードも記述しており、プログラミング初心者の方やコピペして利用できるのでぜひチェックしてみてくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

【サンプルコード付き】HTMLで閉じるボタンを作る方法

HTMLで閉じるボタンを作るため必要なonclick属性の解説と、閉じるボタンの作り方をサンプルコードを用いて解説します。

onclick属性は、指定したHTMLタグがクリックされるときにJavaScriptを実行できる属性です。

onclick属性の特徴を活かして、aタグやinputタグのようにボタンの役割を果たすタグに利用されることが多いです。

HTMLで作ったウィンドウを閉じるボタンを起動させるために、onclick属性にウィンドウを閉じる処理をJavaScriptで記述します。

ウィンドウを閉じる処理は、onclick属性に「window.close();」と指定します。

サンプルコード

<body>
   <input type="button" onclick="window.close();" value="ウィンドウを閉じる">
</body>

閉じるボタンを押しても閉じない理由は、実行している環境にある可能性が高いです。下記の環境で利用していないかチェックしてみましょう。

FireFoxでは独自の仕様により、window.close()を設置しても実行されません。

ウィンドウを閉じるボタンを設置する際は、事前に利用するブラウザをチェックしましょう。

window.close()関数には、ブラウザで開いている履歴(タブ)の数が1以上だと起動しないという処理がプログラムされています。

つまり、開いたWebサイトからまた別のページに遷移し、そこで閉じるボタンを実行すると実行されないのです。

今回、WEBCAMP MEDIAでは、HTMLのonclick属性でウィンドウを閉じるボタンを作る方法と注意点について解説しましたが、いかがでしたでしょうか。

HTMLのonclick属性を使い、JavaScritのコードである「window.close()」を実行することで、ウィンドウを閉じるボタンを作成できます。

また、閉じるボタンを作る際は、FireFoxを利用していたり、別のページに遷移しているときは利用できない点に注意しましょう。

ぜひ参考にしてみてくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

2024.01.04

2024.01.31

2024.01.29

2024.01.03

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする