Bootstrapで戻るボタンを作る方法を紹介！
Bootstrapで「戻るボタン」を作る方法を解説します！Bootstrapではボタンのデザインを簡単に指定することができ、それを活用して戻るボタンを作っていきます。戻るボタンを作成できると、ページの使いやすさが格段にアップします。
Bootstrapで戻るボタンを作る方法
作ったページに戻るボタンを作ることができたらとても便利ですよね。
今回はBootstrapを使って戻るボタンを作成する方法を解説します。
history.back()
まず、戻るボタンを作成するにはJavascriptを使用する必要があります。
戻るボタンを実装する際に必要となるJavaScriptの知識としては、history.back()のみです。
history.back()は一つ引数をとり、その引数には戻るページ数を設定します。例えば1つ前に戻りたい場合は、history.back(-1)です。2ページ前であればhistory.back(-2)です。この引数は自分の作りたい機能に合わせて変えてください。
戻る機能を持つボタンを作る
ボタンに戻る機能を持たせるには、戻る機能をもたせたい要素のonclick属性に先ほど説明したhistory.back()を設定します。
<button class="btn btn-primary" onclick="history.back(-1)">戻る</button>
<a class="btn btn-primary" role="button"onclick="history.back(-1)">戻る</a>
<input class="btn btn-primary" type="button" onclick="history.back(-1)" value="戻る">Bootstrapを使うと、button要素以外のa要素やinput要素をボタンの見た目にすることができ、戻るボタンとして活用できます。
Bootstrapを使ってa要素やinput要素をボタンにするには、btnをクラス名に追記し、role属性(aの時)もしくはtype属性(inputの時)にbuttonを指定します。また、btn-primaryなどの見た目を指定するクラスを使うと、より綺麗にすることができます。クラス名とデザインにどんなものがあるのかは以下のBootstrap公式サイトを参考にしてください。
このようにして戻るボタンを作成すると以下のようになります！
戻るボタンがうまく動かない時は？
ブラウザによっては戻るボタンがうまく動かないときがあります。
そんなときの対処法は以下の記事にまとめてあるので、困った時はこちらを見てください。
まとめ
戻るボタンの作り方
- onclick属性に
history.back(-1)を適用させる - クラスに
btnなどを指定する
いかがでしたか？戻るボタンを実装できるとホームページの使いやすさが格段にアップするので是非活用してみてください！
