WEBVTT

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

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

3
00:00:04.005 --> 00:00:08.439
エイチティーエムエルタグ編の五十七本目は、レジェンドタグです。

4
00:00:08.439 --> 00:00:13.874
レジェンドは、フィールドセットでまとめた入力グループに題名を付けるタグです。

5
00:00:13.874 --> 00:00:17.879
たとえば連絡方法やお届け先住所のように、複数の入力欄が何を尋ねているのかを、

6
00:00:17.879 --> 00:00:21.884
グループ全体の見出しとして伝えます。

7
00:00:21.884 --> 00:00:27.748
レジェンド単独では使わず、必ずフィールドセットの最初の子として置くのが決まりです。

8
00:00:27.748 --> 00:00:34.470
今回は親であるフィールドセットとの関係、正しい置き場所、よくある間違いまでを順に学びましょう。

9
00:00:34.470 --> 00:00:41.908
フォームを分かりやすくする小さなタグですが、使い方が決まっている分、覚えれば迷わず書けるようになります。

10
00:00:41.908 --> 00:00:45.379
どんな場面で使うか、身近な例で考えてみましょう。

11
00:00:45.379 --> 00:00:50.006
会員登録のフォームで、メールか電話かといった連絡方法を選ぶ場面。

12
00:00:50.006 --> 00:00:53.766
お届け先の郵便番号、都道府県、市区町村を並べる場面。

13
00:00:53.766 --> 00:00:56.658
アンケートで満足度を五段階から選ぶ場面。

14
00:00:56.658 --> 00:01:02.298
これらはいずれも、バラバラの入力欄ではなく、ひとつの質問に対するまとまりです。

15
00:01:02.298 --> 00:01:07.504
このまとまりをフィールドセットで囲み、その質問文をレジェンドに書きます。

16
00:01:07.504 --> 00:01:11.987
利用者は題名を見るだけで、これから何を答えるのかが分かります。

17
00:01:11.987 --> 00:01:19.073
逆に、名前やメールアドレスのような単独の入力欄には、レジェンドではなく各欄ごとのラベルを使います。

18
00:01:19.073 --> 00:01:22.688
グループの質問かどうかが、使い分けの判断基準です。

19
00:01:22.688 --> 00:01:24.444
基本の書き方を確認します。

20
00:01:24.444 --> 00:01:28.159
画面の例では、フィールドセットの中に、まずレジェンドで連絡方法という題名を置き、

21
00:01:28.159 --> 00:01:31.874
その下に入力欄を並べています。

22
00:01:31.874 --> 00:01:33.224
ポイントは配置です。

23
00:01:33.224 --> 00:01:37.547
レジェンドは必ずフィールドセットの最初の子でなければなりません。

24
00:01:37.547 --> 00:01:43.761
入力欄の後ろや、フィールドセットの外側に置いても、グループの題名として正しく認識されません。

25
00:01:43.761 --> 00:01:47.813
また、ひとつのフィールドセットにレジェンドはひとつだけです。

26
00:01:47.813 --> 00:01:53.757
開始タグと終了タグをきちんと書き、題名は短く、質問の内容が一目で伝わる言葉にしましょう。

27
00:01:53.757 --> 00:01:58.620
ブラウザーでは題名が枠線の上に重なって表示されるのが標準的な見た目です。

28
00:01:58.620 --> 00:02:01.014
フィールドセットとの関係を整理します。

29
00:02:01.014 --> 00:02:06.180
フィールドセットは、関連する入力コントロールをひとつのグループとして囲む要素です。

30
00:02:06.180 --> 00:02:09.707
そしてレジェンドは、そのグループに名前を付ける要素です。

31
00:02:09.707 --> 00:02:11.849
ふたつは常にペアで考えてください。

32
00:02:11.849 --> 00:02:14.369
特に大切なのが支援技術への伝わり方です。

33
00:02:14.369 --> 00:02:18.653
キーボードや画面読み上げソフトでフォームを操作すると、入力欄に移動するたびに、

34
00:02:18.653 --> 00:02:22.937
レジェンドの題名と各欄のラベルが合わせて読み上げられます。

35
00:02:22.937 --> 00:02:27.850
つまりレジェンドは、目で見る見出しであると同時に、耳で聞く案内でもあるのです。

36
00:02:27.850 --> 00:02:31.189
題名を省いたり曖昧にしたりすると、どの質問への回答なのか分かりにくくなるため、

37
00:02:31.189 --> 00:02:34.528
具体的に書くことが大切です。

38
00:02:34.528 --> 00:02:38.605
活用例として、選択肢のグループを見てみましょう。

39
00:02:38.605 --> 00:02:46.420
画面の例は、希望の連絡時間という質問に対して、午前中と午後というラジオボタンを並べた形です。

40
00:02:46.420 --> 00:02:51.177
ここでレジェンドとラベルの役割の違いに注目してください。

41
00:02:51.177 --> 00:02:56.783
レジェンドはグループ全体への質問、ラベルは個々の選択肢の説明です。

42
00:02:56.783 --> 00:03:05.277
この二段構えにすることで、読み上げでも、希望の連絡時間、午前中、選択、のように文脈付きで伝わります。

43
00:03:05.277 --> 00:03:09.354
チェックボックスで複数選ぶ場合も構造は同じです。

44
00:03:09.354 --> 00:03:18.188
ひとつの質問に複数の選択肢がぶら下がる形を見たら、フィールドセットとレジェンドの出番だと考えてください。

45
00:03:18.188 --> 00:03:23.437
もうひとつの活用例は、住所のように複数のテキスト欄を束ねる場面です。

46
00:03:23.437 --> 00:03:31.311
画面の例では、お届け先住所というレジェンドの下に、郵便番号、都道府県、市区町村の入力欄を並べています。

47
00:03:31.311 --> 00:03:38.105
住所は項目が多いため、題名がないと、どこからどこまでが住所の入力なのかが曖昧になります。

48
00:03:38.105 --> 00:03:44.898
レジェンドが区切りと見出しを兼ねることで、長いフォームでも現在地を見失いにくくなります。

49
00:03:44.898 --> 00:03:51.228
なお、グループの題名がレジェンドの仕事でも、各入力欄ごとのラベルは省略できません。

50
00:03:51.228 --> 00:03:58.176
郵便番号の欄には郵便番号のラベルを、というように、個別の説明はラベルで必ず添えてください。

51
00:03:58.176 --> 00:04:00.436
レジェンドの属性を確認します。

52
00:04:00.436 --> 00:04:04.805
結論から言うと、レジェンドには専用の必須属性はありません。

53
00:04:04.805 --> 00:04:09.626
記事でも、この要素に必須となる専用属性はないと明記されています。

54
00:04:09.626 --> 00:04:13.393
使えるのは、ほかの要素と共通のグローバル属性です。

55
00:04:13.393 --> 00:04:18.440
アイディーは文書の中でひとつだけの目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、

56
00:04:18.440 --> 00:04:23.487
ラングは内容の言語を示します。

57
00:04:23.487 --> 00:04:31.774
画面の例のように題名へクラスを付けて見た目を整えることはできますが、属性でレジェンドの意味自体は変わりません。

58
00:04:31.774 --> 00:04:37.348
データ属性に個人情報などの秘密を置かない点も、ほかの要素と共通の注意です。

59
00:04:37.348 --> 00:04:39.810
見た目とシーエスエスのポイントです。

60
00:04:39.810 --> 00:04:43.570
レジェンドは標準では、フィールドセットの枠線の上に重なるように表示され、

61
00:04:43.570 --> 00:04:47.331
題名の部分だけ枠線が途切れて見えます。

62
00:04:47.331 --> 00:04:52.391
これはレジェンド特有の昔ながらの表示で、ほかの要素とは少し扱いが違います。

63
00:04:52.391 --> 00:04:57.793
文字の大きさや色、余白はシーエスエスで調整できますが、配置を大きく変えようとするとブラウザーごとに差が出やすいため、

64
00:04:57.793 --> 00:05:03.195
無理なレイアウト変更は避けるのが無難です。

65
00:05:03.195 --> 00:05:08.255
枠線自体が不要なデザインでは、フィールドセット側の枠線を消す指定をします。

66
00:05:08.255 --> 00:05:12.015
大切な原則はこれまでと同じで、グループの意味はエイチティーエムエルで表し、

67
00:05:12.015 --> 00:05:15.776
装飾はシーエスエスに任せることです。

68
00:05:15.776 --> 00:05:17.810
よくある間違いを三つ挙げます。

69
00:05:17.810 --> 00:05:22.826
一つ目は、フィールドセットなしでレジェンドを単独で使ってしまう間違いです。

70
00:05:22.826 --> 00:05:26.622
見出しのように見えても、親がいなければ意味を持ちません。

71
00:05:26.622 --> 00:05:32.587
二つ目は、フィールドセットの中でも、入力欄より後ろにレジェンドを置いてしまう間違いです。

72
00:05:32.587 --> 00:05:37.197
題名として扱われるのは最初の子だけなので、必ず先頭に置いてください。

73
00:05:37.197 --> 00:05:41.806
三つ目は、記事の見出しの代わりにレジェンドを使ってしまう間違いです。

74
00:05:41.806 --> 00:05:47.501
本文の見出しにはエイチタグを使い、レジェンドはフォームのグループ専用と覚えましょう。

75
00:05:47.501 --> 00:05:52.788
また題名を空にしたり、こちら、のような曖昧な言葉にしたりしないことも大切です。

76
00:05:52.788 --> 00:05:54.999
ブラウザー互換性を確認します。

77
00:05:54.999 --> 00:05:59.765
記事が参照するエムディーエヌの記録では、レジェンド要素はクロームが一以降、

78
00:05:59.765 --> 00:06:04.531
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降で対応しており、

79
00:06:04.531 --> 00:06:09.298
現在の主要ブラウザーでは安心して使えます。

80
00:06:09.298 --> 00:06:14.457
歴史の長い基本要素なので、対応自体を心配する必要はほとんどありません。

81
00:06:14.457 --> 00:06:22.859
実装後の確認では、開発者ツールのエレメンツで、レジェンドがフィールドセットの最初の子になっているかを見てください。

82
00:06:22.859 --> 00:06:29.050
ソースと実際の構造が違う場合は、不正な入れ子をブラウザーが補正した可能性があります。

83
00:06:29.050 --> 00:06:36.568
あわせて三百二十ピクセル程度の細い画面や文字拡大でも、題名と入力欄が欠けずに読めるかを確認しましょう。

84
00:06:36.568 --> 00:06:38.021
最後にまとめです。

85
00:06:38.021 --> 00:06:44.638
レジェンドタグは、フィールドセットでまとめた入力グループに題名を付ける要素でした。

86
00:06:44.638 --> 00:06:46.253
ポイントは三つです。

87
00:06:46.253 --> 00:06:53.677
一つ目、レジェンドは単独では使わず、必ずフィールドセットの最初の子としてひとつだけ置くこと。

88
00:06:53.677 --> 00:07:01.264
二つ目、レジェンドがグループ全体の質問を表し、各入力欄の説明はラベルが担当するという役割分担。

89
00:07:01.264 --> 00:07:06.590
三つ目、専用の必須属性はなく、必要に応じて共通属性を使うことです。

90
00:07:06.590 --> 00:07:14.983
練習として、連絡方法の選択グループをフィールドセットで囲み、レジェンドで題名を付けて書いてみてください。

91
00:07:14.983 --> 00:07:16.436
お疲れさまでした。