HTML ボタン

Volardev 編集部 April 12, 2026

HTMLのボタンは、クリック可能な要素として、Webサイト上の様々なインタラクション（フォームの送信、モーダルの開閉、スクリプトの実行など）をトリガーするために使用されます。

1. HTML <button> 要素

HTMLにおいて、ボタンは <button> タグを使用して定義されます。

1.1 基本的な実装例

<button> タグの内部には、ボタン上に表示されるテキスト（または画像などの他の要素）を記述します。

<button type="button" onclick="alert('ハロー・ワールド！')">クリックしてね！</button>

[!NOTE]
ボタンの挙動を明確にするために、常に type 属性を指定することが推奨されます。一般的なボタンには type="button" を使用します。

2. onclick 属性と JavaScript

ボタンの最大の役割は、クリックされた際に何らかの動作を行うことです。最も簡単な方法は、onclick 属性を使用して JavaScript を直接呼び出すことです。

<button type="button" onclick="document.getElementById('demo').innerHTML = 'こんにちは！'">
  内容を変更する
</button>

<p id="demo"></p>

この例では、ボタンをクリックすると id="demo" を持つ要素のコンテンツが動的に書き換わります。これは、モダンな シングルページアプリケーション (SPA) における基本的なインタラクションの原点と言えるでしょう。

3. ボタンのスタイリング (Styling Buttons)

デフォルトのボタンの見た目はブラウザによって異なりますが、CSS を使用することで、Webサイトのデザインに合わせて自由にカスタマイズが可能です。

3.1 CSS による装飾例

背景色、文字色、パディング、角丸などを設定することで、より直感的で美しいボタンを作成できます。

<style>
.btn-primary {
  background-color: #04AA6D; /* 背景色 */
  border: none;             /* 境界線を消す */
  color: white;             /* 文字色 */
  padding: 15px 32px;       /* 内側の余白 */
  text-align: center;       /* テキストの中央揃え */
  text-decoration: none;    /* 下線なし */
  display: inline-block;
  font-size: 16px;          /* フォントサイズ */
  margin: 4px 2px;
  cursor: pointer;          /* ホバー時にマウスを手の形にする */
  border-radius: 8px;       /* 角丸 */
}
</style>

<button type="button" class="btn-primary">カスタムボタン</button>

4. ボタンのタイプ (Button Types)

<button> 要素の type 属性には、主に3つの値があります。用途に応じて正しく使い分けることが、フォーム制御において非常に重要です。

タイプ	説明
`button`	汎用的なクリック可能ボタン。スクリプトと連携させて使用します。
`submit`	フォームデータ（入力値）をサーバーに送信します（デフォルト値）。
`reset`	フォーム内のすべての入力値を初期状態にリセットします。

5. まとめ

HTMLボタンに関連する主要なポイントを整理しましょう。

要素 / 属性	説明
`<button>`	クリック可能なボタンを定義します。
`type`	ボタンの役割（button, submit, reset）を指定します。
`onclick`	クリック時に実行される JavaScript コードを定義します。

ボタンは単なる「クリックする場所」ではなく、ユーザーとシステムを繋ぐ重要なインターフェースです。適切な hover（ホバー）効果 や active（アクティブ）状態 のスタイルを追加して、ユーザー体験（UX）をさらに向上させていきましょう。