VIDEO LESSON

HTMLのbuttonタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十九本目は、ボタンタグです。
0:08ボタンは、クリックやキーボードの操作で、何かの処理を実行するための要素です。
0:13フォームを送信する、入力をリセットする、説明を開いたり閉じたりする、といった場面で使います。
0:20今回は、ボタンの意味、タイプ属性の三つの種類、基本の使い方、インプットとの違い、
0:26コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。
0:31特に、タイプを書き忘れると送信ボタンになってしまう落とし穴は、しっかり押さえておきましょう。
0:38まず、ボタンの役割を整理します。
0:40判断の目安はシンプルで、別のページや場所へ移動するのが目的ならリンク、つまりエータグを選び、
0:46その場で何かを実行するのが目的ならボタンを選びます。
0:51たとえば、メニューを開く、ダイアログを閉じる、並び順を切り替える、といった操作はボタンの担当です。
0:58ディブ要素にクリック処理を付けても似た見た目は作れますが、タブキーで移動できなかったり、
1:03エンターキーで押せなかったりします。
1:07標準のボタンなら、キーボード操作や読み上げへの対応が最初から備わっているため、
1:12誰にとっても使いやすい操作部品になります。
1:16基本の書き方を見ていきます。
1:18ボタンは空要素ではないので、開始タグと終了タグをセットで書き、その間にボタンに表示する文字を入れます。
1:26この文字が、そのまま操作の名前になるため、何が起こるか分かる言葉にすることが大切です。
1:32インプット要素と違い、タグの間に文字だけでなく、画像やスパンなどの要素も入れられるので、
1:37アイコンと文字を並べたボタンも作れます。
1:42配置する場所は、本文を表示するボディの中で、その操作が必要になる位置です。
1:47フォームと一緒に使う場合は、フォーム要素の中か、外から関連付ける形になります。
1:53ボタンの中心となる属性が、タイプです。
1:56値によってボタンの振る舞いが大きく変わります。
1:59サブミットは、所属するフォームを送信するボタンです。
2:04リセットは、フォームの入力内容を初期値に戻します。
2:07そしてボタンという値は、送信もリセットもしない汎用ボタンで、ジャバスクリプトで開閉や切り替えなどの処理を付けるときに使います。
2:17ここで一番の注意点は、フォームの中でタイプを省略すると、既定でサブミットとして扱われてしまうことです。
2:26送信するつもりがないボタンには、必ずタイプイコールボタンと明記してください。
2:32これが今回、最も覚えて帰ってほしいポイントです。
2:35タイプ以外の主な属性も確認します。
2:38ネームとバリューは、送信ボタンの場合に、そのボタンが押されたことを伝える名前と値の組になります。
2:44複数の送信ボタンを使い分ける場面で役立ちます。
2:47ディセーブルドは、ボタンを押せない状態にする真偽属性で、処理中や条件を満たしていないときに使います。
2:53なお、ディセーブルドイコールフォルスと書いても無効化は解除されず、解除したいときは属性自体を取り除きます。
3:00また、フォーム要素の外にあるボタンでも、フォーム属性にフォームのアイディーを指定すれば関連付けられます。
3:07送信先や方式をボタンごとに変えるフォームアクションやフォームメソッドといった属性もあります。
3:13記事の活用事例をもとに、コード例を確認します。
3:17場面は、クリックとキーボードで説明文を開いたり閉じたりすることです。
3:22ボタンにはヘルプトグルというアイディーと、タイプイコールボタンを指定し、
3:26送信ボタンにならないようにしています。
3:30エーリアエクスパンデッドは、今開いているかどうかを支援技術へ伝える属性で、
3:34初期値はフォルス、つまり閉じた状態です。
3:38エーリアコントロールズで、対象となる説明文のアイディーを結び付けます。
3:43説明文側にはヒドゥンを付けて、最初は隠しておきます。
3:47ジャバスクリプトでは、クリックのたびにヒドゥンを反転させ、エーリアエクスパンデッドも合わせて更新します。
3:55保存して再読み込みし、マウスだけでなくタブキーとエンターキーでも開閉できることを確認してください。
4:02似た見た目になる、インプットタイプイコールボタンとの違いも整理します。
4:08インプットは空要素なので終了タグがなく、ボタンに表示する文字はバリュー属性で指定します。
4:15そのため、中に画像や別の要素を入れることはできません。
4:20一方、ボタン要素は開始タグと終了タグの間に内容を書けるので、アイコンと文字を組み合わせたり、
4:25一部だけ装飾したりできます。
4:30送信ボタンについても、インプットタイプイコールサブミットと、ボタンタイプイコールサブミットは似た役割ですが、
4:38表現力と分かりやすさの面で、現在の制作ではボタン要素が選ばれることが多くなっています。
4:46特別な理由がなければ、ボタン要素で統一すると迷いにくくなります。
4:51見た目の整え方も見ておきます。
4:54ボタンはほかの要素と同じように、シーエスエスで背景色、文字色、余白、角の丸みなどを自由に指定できます。
5:01ブラウザー標準の見た目は地味なことが多いので、サイトのデザインに合わせて整えるのが一般的です。
5:08その際に大切なのが、キーボードで選択中であることを示すフォーカスの見た目を消してしまわないことです。
5:16アウトラインをなしにして終わりにするのではなく、フォーカスビジブルなどの擬似クラスを使って、
5:21目立つ輪郭や色の変化を用意してください。
5:26マウスでは気付かなくても、キーボード利用者にとっては今どこを選んでいるかを知る唯一の手がかりになります。
5:34使いやすさを左右するポイントをもう少し深掘りします。
5:38第一に、ボタンの文字は、押したあとに何が起こるかが分かる言葉にすることです。
5:44こちら、や、オーケーだけでは、読み上げでも目視でも判断しにくくなります。
5:49第二に、アイコンだけのボタンでは、エーリアラベルで操作の名前を補います。
5:55バツ印だけのボタンなら、メニューを閉じる、という名前を付けます。
6:00第三に、開閉やオンとオフのように状態が変わるボタンでは、エーリアエクスパンデッドなどで現在の状態も伝えます。
6:08見た目の変化だけでなく、情報としても状態が伝わることが、誰にとっても使いやすいボタンの条件です。
6:16ブラウザー互換性を確認します。
6:18記事が紹介するエムディーエヌのデータでは、ボタン要素本体は、クロームが一以降、
6:24エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:31タイプやネーム、バリュー、ディセーブルドといった基本の属性も、ほぼ同じくらい古くから使えます。
6:38一方で、フォーム属性やフォームアクション、フォームメソッドは少し新しく、
6:44クローム九以降、ファイアフォックス四以降、サファリ五点一以降などが目安です。
6:50とはいえ、いずれも現在の主要ブラウザーでは問題なく使える範囲なので、基本のボタンについては安心して使えます。
6:58モバイル環境も含め、対象の実機で一度試す習慣は大切です。
7:03まとめとして、よくある間違いを三つ挙げます。
7:06一つ目は、フォームの中でタイプを書き忘れ、ただの開閉ボタンのつもりが送信ボタンになってしまうことです。
7:14送信しないボタンには、タイプイコールボタンを必ず書いてください。
7:18二つ目は、ページ移動にボタンを使ったり、逆に実行操作にリンクを使ったりする、
7:22役割の取り違えです。
7:26移動はリンク、実行はボタン、と覚えましょう。
7:29三つ目は、ディブやスパンでボタンを代用し、キーボード操作ができなくなることです。
7:35ボタンは、クリックやキーで処理を実行する標準の操作部品です。
7:39これでボタンタグの解説を終わります。
7:42まずはタイプを明記した、小さな開閉ボタンから練習してみてください。

この動画で学べること

buttonタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。クリックやキーで実行する操作。送信しないボタンには type="button" を指定します。

解説記事・サンプルコードを読む：HTMLのbuttonタグとは？属性・使い方・ブラウザー互換性と活用例 →