【初心者向け】HTMLでボタンを作成する方法!サンプルコードで確認しよう!
  • facebookページ
  • twitterページ
  • 2020.04.28

    【初心者向け】HTMLでボタンを作成する方法!サンプルコードで確認しよう!

    Webサイト作成において、必ず1つ以上は必要になると言っても過言ではないのが、HTMLでのボタン作成です。

    本記事では、HTMLでのボタン作成方法について、初心者プログラマー向けにサンプルコードを掲載しながら紹介していきたいと思います。

    HTMLでのボタン作成方法は大きく3つ


    HTMLでボタンを作成する方法としては、大きく3つの方法が利用可能です。

    • HTMLとCSSでボタンを作成
    • HTMLのボタンタグを使用
    • HTMLのinputタグでフォーム用ボタンを実装

    HTMLとCSSでボタンを作成

    HTMLとCSSでボタンを作成する方法は、複数のタグでボタンを実装することが可能です。

    また、CSSでいくらでもデザインの自由が効くため、汎用的なボタンを作成したい場合に利用します。

    HTMLのボタンタグを使用

    HTML5からは「button」タグが利用可能になりました。

    buttonタグでは、デフォルトで既にボタンとして表示されるようなデザインとなっているため、簡単にWebサイト上にボタンを配置することが可能です。

    ただし、自分好みのボタンデザインを作成したい場合には、buttonタグに元々設定されたデザインを上書きするように作る必要があるため、少し手間が多くなります。

    HTMLのinputタグでフォーム用ボタンを実装

    HTMLの「ログインフォーム」や「送信フォーム」といったフォーム内では、「input」タグを利用してボタンを実装する方法が一般的です。

    フォーム内で「inputタグ」でボタンを作成した場合、Javascriptで別途送信用の処理を記述する必要がなく、簡単にデータ送信を行うことが可能です。

    HTMLとCSSでボタンを作成しよう


    HTMLとCSSでボタンを作成する場合、「aタグ」を利用する方法が一般的です。

    サンプルコードで確認してみましょう。

    サンプルコード

    サンプルコードでは、「aタグ」要素をCSSでボタンに見えるよう装飾しています。

    index.html

    style.css

    Webブラウザで表示したのが下記の画像です。

    最低限のコードでボタンを作成すると、サンプルのような形になります。

    「aタグ」で作成しているため、ボタンがクリックされると「href」属性に指定したURLに画面遷移します。

    サンプルコードを解説

    CSSでのボタン作成でいくつかのポイントを解説していきます。

    ボタン風に見せるコード

    aタグはデフォルト状態だと囲み枠は表示されませんが、「border-radius」プロパティを利用することで丸みを帯びた囲み枠を表現しています。

    ただし、ボタンとして枠線は不要なため、囲み枠を表示するような設定にはしていません。

    背景色を設定した状態で、枠に丸みを持たせることで、ボタンのように表現しています。

    また、「padding」プロパティでテキストと枠の幅を持たせることで、ボタンサイズを調整しています。

    デフォルトの文字色と下線を修正

    aタグはデフォルトの状態では、リンクとして判断しやすいように青色のテキストと下線が表示されてしまいます。

    まず下線を消すために「text-decoration」プロパティを「none」に設定します。

    さらに、文字色を変更するために「color」プロパティで「white」を指定しました。

    HTMLのボタンタグを使ってみよう


    次にHTML5より利用可能な「button」タグを使用してみましょう。

    CSSを利用しない場合のサンプル

    CSSで一切装飾をせず、「button」タグを表示します。

    index.html

    Webブラウザで表示すると下記の画像の通りとなります。

    CSSを利用した場合のサンプル

    次に上述した「aタグ」で作成したボタンと同じCSSを適用してみたいと思います。

    index.html

    style.css

    Webブラウザ上で表示した結果が下記の通りです。

    ほとんど同じように見えますが、枠線に影のようなものが表示されており、厳密には若干異なることをご確認頂けるかと思います。

    HTMLのフォーム用ボタンを実装してみよう


    HTMLのフォーム送信用ボタンとしては、「input」タグを利用する方法が一般的です。

    まずはCSSを使用せず、デフォルト状態の表示を確認してみましょう。

    CSSを使用しないフォームボタン

    CSSでデザインを施さない場合、「button」タグとは少し異なるシンプルなボタンが表示されます。

    index.html

    Webブラウザ上で表示した結果が下記の通りです。

    「button」タグで作成した時よりも、少し小さいシンプルなボタンが表示されています。

    CSSで装飾したフォームボタン

    「a(アンカー)」タグと「button」タグに適用したCSSを、「input」タグで作成したボタンにも適用してみましょう。

    index.html

    style.css

    Webブラウザで表示した結果が下記の通りです。

    さいごに:HTMLでのボタン作成は最頻出処理の1つ


    本記事では、HTMLでのボタン作成方法を3つの種類でご紹介してきました。

    一般的に「a(アンカー)」タグと「button」タグでフォーム以外のボタン処理、「input」タグのボタンでフォーム送信処理が実装されます。

    必ず決められたタグでボタンを作成しないといけないというようなルールはないため、自身のプログラムで利用しやすいタグを使ってボタン処理を実装しましょう。



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

    この記事をシェア

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









    ABOUT US

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

    READ MORE