button 要素は「ユーザーに“何かのきっかけ”を押してもらうためのスイッチ」
<button> は、 「ユーザーにクリック（タップ）してもらうことで、何かの処理を始めるためのスイッチ」 です。
フォームを送信する ダイアログを開く 値を計算する 表示を切り替える
こういう「きっかけ」が欲しい場面で、必ず登場します。
<a> が「ページ移動のためのリンク」なのに対して、 <button> は「アプリの中で何かを起こすためのボタン」というイメージです。
button の超重要ポイント：「type」で“性格”が決まる
type=”submit” は「フォームを送信するボタン」
フォームの中でいちばんよく使うのが type="submit" です。
<form action="/login" method="post">
<p>ユーザー名：</p>
<input type="text" name="username">
<p>パスワード：</p>
<input type="password" name="password">
<button type="submit">ログイン</button>
</form>
この場合、「ログイン」ボタンを押すと、
フォーム全体が送信される action="/login" に向かって、username と password が送られる
という動きになります。
フォームの中で「送信ボタン」を作りたいときは、 必ず type="submit" を明示する癖をつけてください。
実は、type を書かないとデフォルトで submit になります。
<button>送信</button> <!-- 実は type="submit" と同じ -->
フォームの中でこれをやると、 「ただのボタンのつもりが、押した瞬間にフォーム送信される」 という事故が起きます。
「送信するボタンなのか、そうじゃないのか」を 自分でちゃんと決めて書くことが大事です。
type=”button” は「ただのボタン（JSで何かする用）」
フォームの中に「送信はしないボタン」を置きたいときは、 type="button" を使います。
<form>
<p>メモ：</p>
<textarea name="memo"></textarea>
<button type="button" id="preview">プレビュー</button>
<button type="submit">送信</button>
</form>
ここでは、
「プレビュー」ボタン → 送信しない。JavaScript で何かする用。 「送信」ボタン → フォームを送信する。
という役割分担になっています。
もし type="button" を書き忘れると、 プレビューボタンも submit として扱われてしまい、 押した瞬間にフォームが送信されます。
フォームの中のボタンは、 「これは送信する？ しない？」を必ず自分で決めて、 type="submit" か type="button" を明示する。 ここが button を正しく使ううえで、超重要なポイントです。
type=”reset” は「フォームの入力をリセットするボタン」
あまり使われませんが、type="reset" もあります。
<form>
<p>お名前：</p>
<input type="text" name="username">
<p>メールアドレス：</p>
<input type="email" name="email">
<button type="reset">入力をクリア</button>
<button type="submit">送信</button>
</form>
「入力をクリア」ボタンを押すと、 フォーム内の入力欄が初期状態に戻ります。
便利なこともありますが、 ユーザーがうっかり押してしまうと全部消えるので、 最近はあまり積極的には使われません。
button の中身は「テキストだけじゃなく、何でも入れられる」
テキストだけのシンプルなボタン
<button type="button">クリックしてね</button>
いちばん基本はこれです。 中のテキストが、そのままボタンのラベルになります。
アイコン＋テキストのボタン
<button type="button">
🔍 検索
</button>
絵文字やアイコンフォントを使って、 「何をするボタンか」を視覚的に分かりやすくできます。
HTML要素を含むボタン
<button type="button">
<span class="icon">⭐</span>
<span class="label">お気に入りに追加</span>
</button>
<button> の中には、 <span> や <img> など、普通の HTML 要素を入れられます。
CSS で .icon と .label を整えれば、 かなりリッチなボタンデザインも作れます。
button は「ただのテキストボタン」ではなく、 「中に自由にコンテンツを入れられる“押せるコンポーネント”」だと考えると、 表現の幅が一気に広がります。
JavaScript と button：イベントの“起点”として使う
クリックイベントで「何かを起こす」
HTML：
<button type="button" id="hello">挨拶する</button>
<p id="result"></p>
JavaScript：
const button = document.querySelector("#hello");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
result.textContent = "こんにちは、MONO さん！";
});
ここでの流れは、
ユーザーがボタンをクリックする click イベントが発生する イベントハンドラの中で、画面の表示を変える
というものです。
button は「ユーザーの操作を、JavaScript の処理につなぐスイッチ」。 イベントの起点として使うのが基本パターンです。
フォーム送信を JS で制御する
HTML：
<form id="loginForm">
<p>ユーザー名：</p>
<input type="text" name="username" required>
<p>パスワード：</p>
<input type="password" name="password" required>
<button type="submit">ログイン</button>
</form>
<p id="message"></p>
JavaScript：
const form = document.querySelector("#loginForm");
const message = document.querySelector("#message");
form.addEventListener("submit", (event) => {
event.preventDefault(); // ← 通常の送信（ページ遷移）を止める
const formData = new FormData(form);
const username = formData.get("username");
const password = formData.get("password");
if (!username || !password) {
message.textContent = "ユーザー名とパスワードを入力してください。";
return;
}
message.textContent = `送信されたユーザー名：${username}`;
});
ここでのポイントは、
<button type="submit"> を押すと submit イベントが form に発生する JavaScript で event.preventDefault() すると、ページ遷移を止めて自分で処理できる
ということです。
button 自体は「押された」という事実を作り、 実際の処理は form の submit イベントで受ける。 この役割分担を理解すると、フォームまわりの JS が一気に整理されます。
CSS と button：見た目を“ちゃんとボタンっぽく”する
基本的なスタイル
<button type="button" class="primary">送信</button>
button.primary {
padding: 8px 16px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
font-size: 14px;
cursor: pointer;
}
button.primary:hover {
background-color: #0056b3;
}
ここでやっているのは、
余白（padding）で押しやすくする 角を少し丸める 背景色と文字色で「押せる感」を出す cursor: pointer; で「クリックできる」ことを示す hover でマウスオーバー時の色を変える
という基本的なボタンデザインです。
button は「意味としてのスイッチ」であり、 見た目は CSS でいくらでも変えられる。 HTML では“何をするボタンか”、CSS では“どう見せるか”を分けて考える。
button と a の違いをちゃんと理解する
a は「ページ移動」、button は「アプリ内の動作」
<a> と <button> は見た目が似ていて、 どちらも「クリックできるもの」ですが、役割が違います。
<a href="/profile">プロフィールを見る</a> → 別のページに移動するためのリンク。
<button type="button">プロフィールを編集モードにする</button> → 今いるページの中で何かの状態を変えるためのボタン。
ざっくり言うと、
ページを移動したい → a 今のページの中で何かを起こしたい → button
という使い分けです。
「これはページ移動か？ それともアプリ内の動作か？」 と自分に問いかけて、a と button を選び分けられるようになると、 HTML の意味づけが一気にきれいになります。
button を使うか迷ったときの判断基準
「ここは“何かの処理のきっかけ”を押してもらう場所か？」
自分にこう聞いてみてください。
ここでユーザーにしてもらいたいのは、 ページ移動ではなく「何かの処理を始めること」か？
YES → button NO → a や他の要素
フォーム送信 プレビュー表示 モーダルを開く タブを切り替える カウンターを増やす
こういったものは、 button を起点に JavaScript で処理を書くのが自然です。
初心者として「button」で絶対に掴んでほしいこと
<button> は、 「ユーザーにクリック（タップ）してもらうことで、何かの処理を始めるためのスイッチ」 です。
type="submit" はフォーム送信 type="button" は送信しない“ただのボタン”（JSで何かする用） type="reset" はフォームの入力をリセット フォームの中では、type を必ず意識して書く 中にはテキストだけでなく、アイコンや複数の要素も入れられる JavaScript では addEventListener("click", ...) でイベントの起点になる CSS で見た目を整えれば、押しやすく・分かりやすいボタンになる
あなたが button を書くときに、 「このボタンは“何のきっかけ”で、押されたらどんな処理が走るべきか？」 を毎回ちゃんとイメージできていたら、 もう button を“ただの押せる四角”ではなく、 “ユーザーとアプリのロジックをつなぐ、意味のあるスイッチ”として扱えている状態です。
