HTMLのボタンでリンクを作成する方法とは?【初心者向け】
  • facebookページ
  • twitterページ
  • 2020.04.28

    HTMLのボタンでリンクを作成する方法とは?【初心者向け】

    Webサイト上に配置されるボタンの役割として、他のページに遷移させるためのアクション起点として利用されることが多くあります。

    本記事では、HTMLのボタンで画面遷移用のリンクを作成する方法について、初心者プログラマー向けにご紹介していきたいと思います。

    HTMLのボタンでリンクを作成する方法は3種類


    HTMLのボタンでリンクを作成する方法として、3種類のタグを利用した作成方法をご紹介していきたいと思います。

    aタグ

    aタグにCSSで装飾し、ボタンの様に見せる方法です。

    後述する「button」タグや「input」タグと異なり、デフォルトではテキスト形式の表示となるため、CSSでのカスタマイズは必須です。

    buttonタグ

    HTML5より利用可能になったのが「button」タグです。

    汎用的なボタンとして利用可能です。

    ボタンをクリックしたアクションをJavascriptで記述することで、画面遷移だけでなく、様々な用途に利用可能です。

    inputタグ

    inputタグは「type」属性に「submit」または「button」値を設定することで、ボタン表示可能です。

    「submit」値は、フォームに入力された値を送信することを目的として実装されます。

    リンク用のボタンを作成する場合には、「button」値を設定して処理を実装していきます。

    HTMLのボタンでリンク作成1: aタグ


    HTMLのaタグでリンク用のボタンを作成する方法についてご紹介していきます。

    aタグでのリンク用ボタン作成

    aタグでリンク用ボタンを作成する際の基本的な記述方法は下記の様になります。

    aタグでは「href」属性に遷移先のURLを指定することでリンク処理が実装可能です。

    class属性で指定したクラスをCSSでボタンに見える様デザインしていきます。

    サンプルコード

    シンプルにボタンをクリックした際に、「index.html」と同一階層に配置した「sample.html」ファイルの内容を表示するサンプルコードを紹介します。

    index.html

    style.css

    sample.html

    サンプルコードを実行した結果が下記の通りです。

    HTMLのボタンでリンク作成2: buttonタグ


    続いてHTML5から使用可能な「button」タグについてご紹介していきます。

    buttonタグの基本

    「button」タグでは、特にCSSでデザインを指定しなくても、タグ名の通りデフォルトでボタンとしてWebサイト上に表示されます。

    buttonタグの「onclick」属性に「location.href=’URL’」を指定することで、クリックした際に指定したURLに画面遷移することが可能です。

    ポテパンダの一言メモ

    onclicke属性に指定した「location.href=’URL’」を「window.open(‘URL’)」と記述すると別タブで遷移先画面を開くことが可能です。

    サンプルコード

    全体像をサンプルコードで確認していきたいと思います。

    遷移先となる「sample.html」はaタグで利用したサンプルコードと同じですので、割愛しています。

    index.html

    サンプルコードを実行した結果が下記の通りです。

    今回のサンプルではCSSでのデザイン調整無しで、デフォルト状態のボタンを表示しています。

    HTMLのボタンでリンク作成3: inputタグ


    HTMLのボタンは「input」タグを利用することでも表示することが可能です。

    「input」タグでは「type」属性に「button」を指定することでボタンを表示します。

    リンクとして画面遷移を実装するには、「button」タグと同様、「onclick」属性に「location.href=’URL’」を指定します。

    input属性では閉じタグを指定しないため、ボタンに表示したいテキストは「value」属性に設定してください。

    サンプルコード

    inputタグでボタンを作成するサンプルコードの全体像を確認してみましょう。

    index.html

    sample.html

    サンプルコードを実行した結果が下記の通りです。

    ポテパンダの一言メモ

    sample.htmlに記載した様に「onclick」属性に「history.back()」を設定することで元の画面に遷移する処理を実装することが可能です。

    さいごに:HTMLのボタンでリンクは簡単に設定出来る!


    本記事では、HTMLのボタンでリンクを作成する方法についてご紹介してきました。

    リンク用のボタンは簡単に作成出来て、利用用途の多い機能の1つです。

    しっかりと使い方を確認して、プログラム作成に取り組んでみてください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE