【HTML】戻るボタンの作り方【コピペOK】

セイタ

こんにちは、セイタです。

先日、サイト制作をしていて『戻るボタン』の実装をしたので、自分の忘備録も含めてブログに残したいと思います。

とはいっても、特に難しいことはなく1行のコードで作成することが出来るので、実装される際はコピペで貼り付けてもらえれば大丈夫です。

本記事ではCSSに関しては考慮しておりませんので、デザインに関しては好みのレイアウトを組んでみてもらえれば幸いです。

【HTML】戻るボタンの作り方【コピペOK】

HTMLで戻るボタンの作り方としては、下記のようなコードを打ち込むだけでOKです。

<button type="button" class="btn btn-success"　onclick="history.back()">TOPに戻る</button>

実装方法としては、簡単なのですがいくつか注意しなければいけないことがあります。

まずひとつ目としては、type属性をbuttonにしなければいけません。

これはなぜかというと、このtype属性を指定しないと自動的にsubmit扱いになってしまうという特徴をもっているので、戻るボタンとして機能しなくなってしまいます。

そして、2つ目ですが最後に書いている『onclick="history.back()"』の部分です。

こちらのコードを記述することで、ひとつ前に戻るという効果を発揮してくれるので、書き間違いのないようにしましょう。

戻るボタンは制作環境によっては戻らない場合もある

先程の戻るボタン作成用のコードを入力して、実際にボタンをクリックしてみてもページバックしない場合があります。

ぼくの場合はローカル環境では上手くいって、本番環境で上手くいかないという状況になりました。

今回実装したページは404ページなので、.htaccessの部分も絡んできているのかもしれません。

ブログのようなPrevボタンではないので、とりあえずTOPページに戻るボタンとして作成して対処しました。

HTMLでトップページに戻るボタンコード

<a href="example.com"><button type="button" class="btn btn-success">TOPに戻る</button></a>

Laravelの場合の戻るボタンコード

<a href="{{ action('MainController@index')}}"><button type="button" class="btn btn-success">TOPに戻る</button></a>

戻るボタンのスタイルが面倒な場合はBootstrapを使おう！

皆さんご存知のチートCSSフレームワークBootstrapです。

一発でボタンのスタイルを整えてくれて、無難なボタンを実装できるのでおすすめです。

ただ、Bootstrapには少々癖があって、事前にCSSが組まれていることによって独自のCSSが適応されない場合があります。

解決方法としては、CSSの適応場所を明確にすることでCSSを適応させることが可能となっていて、【Bootstrap】 CSSが反映されないときの対処法にて確認しつつ実装してもらえるとスムーズにBootstrapを使用した開発が出来るでしょう。

それでは！