【ページネーションまとめ】HTMLでプログラミングする戻るボタンと進むボタン

この記事は約3分で読めます。

現役エンジニアがおすすめするプログラミングスクール!

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回 日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。


無料相談はこちら!


Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社(株式会社LIG)が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。


無料相談はこちら!


テックキャンプ デザイナー転職(旧:【TECH::EXPERT】デザインスクール)

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。


無料相談はこちら!


SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。


無料相談はこちら!

ポートフォリオ制作実績

戻るボタンと進むボタンのページネーションを作るためには、以下のソースコードをHTMLの<body></body>内に埋め込んでみましょう。

ついでにページの更新をするときに表示されるリロードもプログラミングしてみましょう。

スポンサーリンク

【ページネーションまとめ】HTMLでプログラミングする戻るボタンと進むボタン

戻るボタン

<form><input type=”button” value=” 戻る ” onClick=”history.back()”></form>

進むボタン

<form><input type=”button” value=” 戻る ” onClick=”history.forward()”></form>

戻るボタンと進むボタンの応用(ページネーション)

<form><input type=”button” value=” 2頁戻る ” onClick=”history.go(-2)”></form>

<form><input type=”button” value=” 2頁進む ” onClick=”history.go(2)”></form>

リロードボタンのソースコード

リロードとは「更新」を意味しています。javascript1.1以降で使えるようになりました。

<form><input type=”button” value=” 更新中 ” onClick=”location.reload()”></form>

 

元のページへ戻れないようにするソースコード

元のページに戻れないサイトはなかなかないですが、特別な意図や目的がある場合に使います。

以下のソースコードでプログラミングする.replace()メソッドは、今表示しているサイトのURLから()内のURLのhttps://updowntech.comに置き換えます。

 

そのため、元のページのURLが履歴に残らなくなって、「戻る」ボタンを使っても元のページに戻れません。

javascript1.1以降にプログラミングできるようになりました。

<form><input type=”button” value=” 戻れません ” onClick=”window.location.replace(‘https://updowntech.com’)”></form>

 

スポンサーリンク

まとめ

ページ送りやページネーション機能を実装できれば、1ページで終わらない、複数のページを載せたサイトを作ることができます。

 

 

 

タイトルとURLをコピーしました