今回は、初心者の方でも安心してボタン作成の基本を理解できるよう、わかりやすく解説します。
この記事を読み終わるころには、自分でボタンを作って表示することができるようになりますよ！
ボタンを作るための基本タグ
HTMLでは、ボタンを作る方法がいくつかあります。それぞれの特徴を理解することで、目的に合ったボタンを作れるようになります。
<button> タグを使う
最も基本的なボタンの作り方は、<button> タグを使う方法です。シンプルにボタンを表示できます。
<button>クリックしてね！</button>ポイント： <button> タグの間に表示したいテキストを入れるだけでOK！
<input type=”button”> を使う
もう1つの方法として、<input type="button"> があります。このタグは、フォームで使われることが多いです。
<input type="button" value="押してみよう！">ポイント： value にボタンに表示する文字を指定します。
<a> タグをボタン風にする
リンクをボタンのように見せたいときは、<a> タグを使うこともできます。
<a href="#">ここをクリック！</a>ポイント： 見た目はリンクですが、ボタンとしても活用できます。
ボタンに機能を追加する
ボタンをクリックしたときに、何か動作を追加することもできます。ここでは、クリックするとメッセージが表示されるボタンを作ってみましょう。
<button onclick="alert('こんにちは！')">クリックしてね！</button>ポイント： onclick 属性を使うことで、クリック時に特定の動作を実行できます。
✅ コピペで試してみよう！
実際にコピーして貼り付けるだけで、どんなふうにボタンが表示されるか確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンのサンプル</title>
</head>
<body>
<h1>ボタンのサンプルページ</h1>
<!-- 基本のボタン -->
<button>クリックしてね！</button>
<!-- 入力タイプのボタン -->
<input type="button" value="押してみよう！">
<!-- リンクをボタン風に -->
<a href="https://mikeiken-engineer.com/">ここをクリック！</a>
<!-- クリックでメッセージを表示 -->
<button onclick="alert('こんにちは！')">メッセージを表示</button>
</body>
</html>ポイント： コードをコピペしてブラウザで開いてみましょう。実際にボタンを押して、どんな動作になるか確認してみてください！
✅ 確認問題
Q1. HTMLでボタンを作成するためのタグはどれ？
- <btn>
- <button>
- <input type=”button”>
正解： 2. <button>, 3. <input type="button">
Q2. <a> タグをボタン風にする場合、何を設定する必要がある？
- 何もいらない
- href 属性
- onclick 属性
正解： 2. href 属性
まとめ
<button>,<input type="button">,<a>を使ってボタンを作成できる。onclick属性でボタンに動作を追加できる。- コピペして実際に動作を確認しながら学ぶと理解が深まる。
コメントを残す