HTML

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

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

 

誠太
こんにちは、誠太です。

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

恐らく、Laravelで開発していてページの遷移に関してはコントローラとルーティングが呼び出されて移動するので、その当たりが邪魔してしまっているのかなと思っているので、いずれ解決方法を見つけて実装し直したいと思います。

 

今回実装したページは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を使おう!

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

 

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

 

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

 

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

 

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

 

それでは!

 

参考
【Bootstrap】 CSSが反映されないときの対処法

スポンサーリンク   BootstrapでCSSを適応させようとしたのに、上手く指定した内容が反映されない。   どうしたらいいのかわからなくて、手が止まってしまっている状況を解決 ...

続きを見る

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  ブログのSEO対策はいろんな情報があって、何が正しい対策なのかわからない場合が多く困ってしまいませんか?   本記事では、今回紹介するSEO対策を行い上位表示を確認できたことを ...

5

  誠太こんにちは、誠太です!   はてなブログをお使いのあなたにお伝えしなければいけないことがあります。 はてなブログから『はてなブログPro』に移行するのはやめましょう。 &n ...

-HTML
-

Copyright© SEITALITY , 2019 All Rights Reserved.