バナー画像

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

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="sample.html" class="btn">ボタン</a>
</body>
</html>

style.css

.btn {
  border-radius: 5px;
  background-color: lightblue;
  padding: 10px;
  text-decoration: none;
  color: white;
}

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

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

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

サンプルコードを解説

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

ボタン風に見せるコード

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

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

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

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

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

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

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

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

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


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

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

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

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Sample</title>
</head>
<body>
  <button>ボタン</button>
</body>
</html>

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

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

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

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Button Sample</title>
</head>
<body>
  <button class="btn">ボタン</button>
</body>
</html>

style.css

.btn {
  border-radius: 5px;
  background-color: lightblue;
  padding: 10px;
  text-decoration: none;
  color: white;
}

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

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

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


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

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

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

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

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Sample</title>
</head>
<body>
  <form>
    <input type="submit" value="ボタン">
  </form>
</body>
</html>

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

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

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

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

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Button Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form>
    <input type="submit" value="ボタン" class="btn">
  </form>
</body>
</html>

style.css

.btn {
  border-radius: 5px;
  background-color: lightblue;
  padding: 10px;
  text-decoration: none;
  color: white;
}

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

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


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

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

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

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。