HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法

今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。

どのボタンもページ遷移の操作には欠かせない重要な要素です。

一見すると難しそうな操作ですが、ほんの数行を書くだけで済む簡単な作業ですので、みなさんもぜひ試してみてくださいね。

【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー	デイトラ	侍エンジニア
講師は全員現役エンジニア 週2回のマンツーマンメンタリング 無料の転職サポートあり 課題レビュー＆チャット質問し放題	1年間のエンジニアサポート カリキュラムは無期限閲覧可能 専用チャットコミュニティ参加 Webセミナー勉強会に参加	累計指導45,000人＆転職成功率98% オーダーメイドカリキュラム対応 無料の転職サポートあり 専属マンツーマンレッスン方式
公式サイト	公式サイト	公式サイト

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

HTMLとJavaScriptを使って戻るボタンを作る方法

まずはHTMLとJavaScriptを使って戻るボタンを作る方法ですが以下の通りです。

まずHTMLで、modoru()という関数が呼び出されるボタンを作成します。

modoru()関数では１つ前のページに戻るという操作「history.back()」をJavaScriptで指定しています。

HTMLとJavaScriptを使って進むボタンを作る方法

まずはHTMLとJavaScriptを使って進むボタンを作る方法ですが以下の通りです。

まずHTMLで、susumu()という関数が呼び出されるボタンを作成します。

susumu()関数では１つ前のページに進むという操作「history.forward()」をJavaScriptで指定しています。

HTMLとJavaScriptを使って更新ボタンを作る方法

まずはHTMLとJavaScriptを使って更新ボタンを作る方法ですが以下の通りです。

まずHTMLで、kousin()という関数が呼び出されるボタンを作成します。

koushin()関数では１つ前のページに戻るという操作「location.reload()」をJavaScriptで指定しています。

ちなみにHTMLだけを使って実装したい時は以下のコードを書きましょう。

ここではaタグで空のリンク先を設定しています。

HTMLの場合、リンク先が空のときはリロードする仕組みになっています。

まとめ：HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法

今回はHTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法について解説しました。

ご覧の通り、簡単なコードを数行書くだけで簡単に実装できるのでおすすめです。

みなさんも是非実践してみてください！

JavaScriptやHTML/CSSの学習でつまづいた時、独学に限界を感じた時はこちらの記事もオススメです。