Written by Kasumi

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

HTMLタグだけで前のページ・次のページへ戻るリンクボタンを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

<!-- aタグ -->
<a href="#" onclick="history.back()">前のページへ戻る</a>
<a href="#" onclick="history.forward()">次のページへ進む</a>
<!-- buttonタグ -->
<button type="button" onclick="history.back()">前のページへ戻る</button>
<button type="button" onclick="history.forward()">次のページへ進む</button>

前のページ・次のページに戻るサンプルHTMLコードです。

実装にはaタグもしくはbuttonタグを使います。

onclick属性を指定し、以下メソッドを指定します。

前のページへ戻るには以下メソッドを使用

onclick=”history.back()”

次のページへ進むには以下メソッドを使用

onclick=”history.forward()”

aタグを使う場合はhref属性に#を指定します。

以上で実装完了です。

まとめ

HTMLタグに属性値を指定するだけでブラウザバッグを簡単に実装できます。

以上で解説を終わります。

目次

関連記事

HTMLCSS

【CSS】formタグ内のデフォルトCSSをリセットする方法

更新日:2019.11.28
157
HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
1528
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
1290
HTMLCSS

input:text要素をクリックした時の枠線をCSSで変更する方法

2022.05.04
451