WEBVTT

1
00:00:00.000 --> 00:00:00.881
こんにちは。

2
00:00:00.881 --> 00:00:03.965
エイチティーエムエルリファレンス解説です。

3
00:00:03.965 --> 00:00:08.224
エイチティーエムエルタグ編の九十九本目は、ボタンタグです。

4
00:00:08.224 --> 00:00:13.805
ボタンは、クリックやキーボードの操作で、何かの処理を実行するための要素です。

5
00:00:13.805 --> 00:00:20.561
フォームを送信する、入力をリセットする、説明を開いたり閉じたりする、といった場面で使います。

6
00:00:20.561 --> 00:00:26.069
今回は、ボタンの意味、タイプ属性の三つの種類、基本の使い方、インプットとの違い、

7
00:00:26.069 --> 00:00:31.576
コード例、ブラウザー互換性、そしてよくある間違いまで順番に確認します。

8
00:00:31.576 --> 00:00:38.332
特に、タイプを書き忘れると送信ボタンになってしまう落とし穴は、しっかり押さえておきましょう。

9
00:00:38.332 --> 00:00:40.705
まず、ボタンの役割を整理します。

10
00:00:40.705 --> 00:00:46.043
判断の目安はシンプルで、別のページや場所へ移動するのが目的ならリンク、つまりエータグを選び、

11
00:00:46.043 --> 00:00:51.382
その場で何かを実行するのが目的ならボタンを選びます。

12
00:00:51.382 --> 00:00:58.648
たとえば、メニューを開く、ダイアログを閉じる、並び順を切り替える、といった操作はボタンの担当です。

13
00:00:58.648 --> 00:01:03.245
ディブ要素にクリック処理を付けても似た見た目は作れますが、タブキーで移動できなかったり、

14
00:01:03.245 --> 00:01:07.842
エンターキーで押せなかったりします。

15
00:01:07.842 --> 00:01:12.291
標準のボタンなら、キーボード操作や読み上げへの対応が最初から備わっているため、

16
00:01:12.291 --> 00:01:16.740
誰にとっても使いやすい操作部品になります。

17
00:01:16.740 --> 00:01:18.802
基本の書き方を見ていきます。

18
00:01:18.802 --> 00:01:26.315
ボタンは空要素ではないので、開始タグと終了タグをセットで書き、その間にボタンに表示する文字を入れます。

19
00:01:26.315 --> 00:01:32.649
この文字が、そのまま操作の名前になるため、何が起こるか分かる言葉にすることが大切です。

20
00:01:32.649 --> 00:01:37.363
インプット要素と違い、タグの間に文字だけでなく、画像やスパンなどの要素も入れられるので、

21
00:01:37.363 --> 00:01:42.077
アイコンと文字を並べたボタンも作れます。

22
00:01:42.077 --> 00:01:47.527
配置する場所は、本文を表示するボディの中で、その操作が必要になる位置です。

23
00:01:47.527 --> 00:01:53.272
フォームと一緒に使う場合は、フォーム要素の中か、外から関連付ける形になります。

24
00:01:53.272 --> 00:01:56.279
ボタンの中心となる属性が、タイプです。

25
00:01:56.279 --> 00:01:59.920
値によってボタンの振る舞いが大きく変わります。

26
00:01:59.920 --> 00:02:04.035
サブミットは、所属するフォームを送信するボタンです。

27
00:02:04.035 --> 00:02:07.992
リセットは、フォームの入力内容を初期値に戻します。

28
00:02:07.992 --> 00:02:17.963
そしてボタンという値は、送信もリセットもしない汎用ボタンで、ジャバスクリプトで開閉や切り替えなどの処理を付けるときに使います。

29
00:02:17.963 --> 00:02:26.036
ここで一番の注意点は、フォームの中でタイプを省略すると、既定でサブミットとして扱われてしまうことです。

30
00:02:26.036 --> 00:02:32.050
送信するつもりがないボタンには、必ずタイプイコールボタンと明記してください。

31
00:02:32.050 --> 00:02:35.849
これが今回、最も覚えて帰ってほしいポイントです。

32
00:02:35.849 --> 00:02:38.083
タイプ以外の主な属性も確認します。

33
00:02:38.083 --> 00:02:44.389
ネームとバリューは、送信ボタンの場合に、そのボタンが押されたことを伝える名前と値の組になります。

34
00:02:44.389 --> 00:02:47.411
複数の送信ボタンを使い分ける場面で役立ちます。

35
00:02:47.411 --> 00:02:53.981
ディセーブルドは、ボタンを押せない状態にする真偽属性で、処理中や条件を満たしていないときに使います。

36
00:02:53.981 --> 00:03:00.945
なお、ディセーブルドイコールフォルスと書いても無効化は解除されず、解除したいときは属性自体を取り除きます。

37
00:03:00.945 --> 00:03:07.777
また、フォーム要素の外にあるボタンでも、フォーム属性にフォームのアイディーを指定すれば関連付けられます。

38
00:03:07.777 --> 00:03:13.821
送信先や方式をボタンごとに変えるフォームアクションやフォームメソッドといった属性もあります。

39
00:03:13.821 --> 00:03:17.218
記事の活用事例をもとに、コード例を確認します。

40
00:03:17.218 --> 00:03:22.240
場面は、クリックとキーボードで説明文を開いたり閉じたりすることです。

41
00:03:22.240 --> 00:03:26.302
ボタンにはヘルプトグルというアイディーと、タイプイコールボタンを指定し、

42
00:03:26.302 --> 00:03:30.365
送信ボタンにならないようにしています。

43
00:03:30.365 --> 00:03:34.574
エーリアエクスパンデッドは、今開いているかどうかを支援技術へ伝える属性で、

44
00:03:34.574 --> 00:03:38.784
初期値はフォルス、つまり閉じた状態です。

45
00:03:38.784 --> 00:03:43.954
エーリアコントロールズで、対象となる説明文のアイディーを結び付けます。

46
00:03:43.954 --> 00:03:47.794
説明文側にはヒドゥンを付けて、最初は隠しておきます。

47
00:03:47.794 --> 00:03:55.475
ジャバスクリプトでは、クリックのたびにヒドゥンを反転させ、エーリアエクスパンデッドも合わせて更新します。

48
00:03:55.475 --> 00:04:02.713
保存して再読み込みし、マウスだけでなくタブキーとエンターキーでも開閉できることを確認してください。

49
00:04:02.713 --> 00:04:08.554
似た見た目になる、インプットタイプイコールボタンとの違いも整理します。

50
00:04:08.554 --> 00:04:15.896
インプットは空要素なので終了タグがなく、ボタンに表示する文字はバリュー属性で指定します。

51
00:04:15.896 --> 00:04:20.402
そのため、中に画像や別の要素を入れることはできません。

52
00:04:20.402 --> 00:04:25.408
一方、ボタン要素は開始タグと終了タグの間に内容を書けるので、アイコンと文字を組み合わせたり、

53
00:04:25.408 --> 00:04:30.414
一部だけ装飾したりできます。

54
00:04:30.414 --> 00:04:38.508
送信ボタンについても、インプットタイプイコールサブミットと、ボタンタイプイコールサブミットは似た役割ですが、

55
00:04:38.508 --> 00:04:46.601
表現力と分かりやすさの面で、現在の制作ではボタン要素が選ばれることが多くなっています。

56
00:04:46.601 --> 00:04:51.941
特別な理由がなければ、ボタン要素で統一すると迷いにくくなります。

57
00:04:51.941 --> 00:04:54.192
見た目の整え方も見ておきます。

58
00:04:54.192 --> 00:05:01.846
ボタンはほかの要素と同じように、シーエスエスで背景色、文字色、余白、角の丸みなどを自由に指定できます。

59
00:05:01.846 --> 00:05:08.900
ブラウザー標準の見た目は地味なことが多いので、サイトのデザインに合わせて整えるのが一般的です。

60
00:05:08.900 --> 00:05:16.404
その際に大切なのが、キーボードで選択中であることを示すフォーカスの見た目を消してしまわないことです。

61
00:05:16.404 --> 00:05:21.356
アウトラインをなしにして終わりにするのではなく、フォーカスビジブルなどの擬似クラスを使って、

62
00:05:21.356 --> 00:05:26.309
目立つ輪郭や色の変化を用意してください。

63
00:05:26.309 --> 00:05:34.113
マウスでは気付かなくても、キーボード利用者にとっては今どこを選んでいるかを知る唯一の手がかりになります。

64
00:05:34.113 --> 00:05:38.154
使いやすさを左右するポイントをもう少し深掘りします。

65
00:05:38.154 --> 00:05:44.061
第一に、ボタンの文字は、押したあとに何が起こるかが分かる言葉にすることです。

66
00:05:44.061 --> 00:05:49.657
こちら、や、オーケーだけでは、読み上げでも目視でも判断しにくくなります。

67
00:05:49.657 --> 00:05:55.253
第二に、アイコンだけのボタンでは、エーリアラベルで操作の名前を補います。

68
00:05:55.253 --> 00:06:00.227
バツ印だけのボタンなら、メニューを閉じる、という名前を付けます。

69
00:06:00.227 --> 00:06:08.621
第三に、開閉やオンとオフのように状態が変わるボタンでは、エーリアエクスパンデッドなどで現在の状態も伝えます。

70
00:06:08.621 --> 00:06:16.082
見た目の変化だけでなく、情報としても状態が伝わることが、誰にとっても使いやすいボタンの条件です。

71
00:06:16.082 --> 00:06:18.471
ブラウザー互換性を確認します。

72
00:06:18.471 --> 00:06:24.763
記事が紹介するエムディーエヌのデータでは、ボタン要素本体は、クロームが一以降、

73
00:06:24.763 --> 00:06:31.055
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

74
00:06:31.055 --> 00:06:38.541
タイプやネーム、バリュー、ディセーブルドといった基本の属性も、ほぼ同じくらい古くから使えます。

75
00:06:38.541 --> 00:06:44.435
一方で、フォーム属性やフォームアクション、フォームメソッドは少し新しく、

76
00:06:44.435 --> 00:06:50.329
クローム九以降、ファイアフォックス四以降、サファリ五点一以降などが目安です。

77
00:06:50.329 --> 00:06:58.930
とはいえ、いずれも現在の主要ブラウザーでは問題なく使える範囲なので、基本のボタンについては安心して使えます。

78
00:06:58.930 --> 00:07:03.390
モバイル環境も含め、対象の実機で一度試す習慣は大切です。

79
00:07:03.390 --> 00:07:06.657
まとめとして、よくある間違いを三つ挙げます。

80
00:07:06.657 --> 00:07:14.230
一つ目は、フォームの中でタイプを書き忘れ、ただの開閉ボタンのつもりが送信ボタンになってしまうことです。

81
00:07:14.230 --> 00:07:18.981
送信しないボタンには、タイプイコールボタンを必ず書いてください。

82
00:07:18.981 --> 00:07:22.545
二つ目は、ページ移動にボタンを使ったり、逆に実行操作にリンクを使ったりする、

83
00:07:22.545 --> 00:07:26.109
役割の取り違えです。

84
00:07:26.109 --> 00:07:29.376
移動はリンク、実行はボタン、と覚えましょう。

85
00:07:29.376 --> 00:07:35.315
三つ目は、ディブやスパンでボタンを代用し、キーボード操作ができなくなることです。

86
00:07:35.315 --> 00:07:39.770
ボタンは、クリックやキーで処理を実行する標準の操作部品です。

87
00:07:39.770 --> 00:07:42.443
これでボタンタグの解説を終わります。

88
00:07:42.443 --> 00:07:47.343
まずはタイプを明記した、小さな開閉ボタンから練習してみてください。