WEBVTT

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

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

3
00:00:03.828 --> 00:00:08.340
エイチティーエムエルタグ編の八十本目は、フィールドセットタグです。

4
00:00:08.340 --> 00:00:13.673
フィールドセットは、関連する入力項目をひとつのグループとしてまとめる要素です。

5
00:00:13.673 --> 00:00:21.876
たとえば、参加する時間帯は午前か午後か、という一つの質問に対して、複数のラジオボタンを並べる場面を思い浮かべてください。

6
00:00:21.876 --> 00:00:29.396
それぞれのボタンをばらばらに置くのではなく、グループとして囲むことで、読み上げでも一つの質問として伝わります。

7
00:00:29.396 --> 00:00:35.959
今回は、基本の書き方から、レジェンドとの組み合わせ、属性、注意点まで順番に確認していきましょう。

8
00:00:35.959 --> 00:00:41.428
フォームが長くなるほど、このグループ分けが読み手の負担を大きく減らしてくれます。

9
00:00:41.428 --> 00:00:43.581
基本の書き方を確認します。

10
00:00:43.581 --> 00:00:51.696
フィールドセットは開始タグと終了タグを両方書き、そのあいだに、グループにしたい入力項目を入れます。

11
00:00:51.696 --> 00:01:00.638
画面の例では、フォームの中にフィールドセットを置き、お届け先というグループの中に名前の入力欄を入れています。

12
00:01:00.638 --> 00:01:04.447
ポイントは、関係のある項目だけを囲むことです。

13
00:01:04.447 --> 00:01:12.065
フォーム全体をなんとなく囲むのではなく、この項目同士はセットだといえる範囲を選んでください。

14
00:01:12.065 --> 00:01:21.008
書き終わったら、開始タグと終了タグの対応が取れているか、開発者ツールのエレメンツでも確認しておくと安心です。

15
00:01:21.008 --> 00:01:27.135
入力欄にはラベルを組み合わせると、項目の意味がさらに伝わりやすくなります。

16
00:01:27.135 --> 00:01:31.534
フィールドセットと必ずセットで覚えたいのが、レジェンドです。

17
00:01:31.534 --> 00:01:35.053
レジェンドは、そのグループ全体の題名を表します。

18
00:01:35.053 --> 00:01:39.159
何を尋ねているのかを、グループの最初に短く書きましょう。

19
00:01:39.159 --> 00:01:45.024
置き場所のルールが大切で、レジェンドはフィールドセットの最初の子要素に置きます。

20
00:01:45.024 --> 00:01:50.449
ブラウザーでは、題名が枠線の上に重なるような形で表示されることが多いです。

21
00:01:50.449 --> 00:01:58.807
読み上げを利用する人にとっても、この題名があることで、今から答える選択肢が何についてのものなのかが先に分かります。

22
00:01:58.807 --> 00:02:03.059
題名のないグループにしないことが、使いやすさの第一歩です。

23
00:02:03.059 --> 00:02:05.807
記事の活用事例を読み解きます。

24
00:02:05.807 --> 00:02:14.235
例では、参加する時間帯というレジェンドの下に、午前と午後の二つのラジオボタンを並べています。

25
00:02:14.235 --> 00:02:23.396
ここで大切なのは、各ラジオのネームをタイムでそろえ、バリューでエーエムとピーエムを区別することです。

26
00:02:23.396 --> 00:02:31.824
ネームがそろうことで、ブラウザーは二つを一組と判断し、どちらか一方だけを選べるようにします。

27
00:02:31.824 --> 00:02:36.588
試すときは練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、

28
00:02:36.588 --> 00:02:41.351
保存後に再読み込みしてください。

29
00:02:41.351 --> 00:02:47.031
選んだ結果が一つの質問への答えとして伝わるかを確認しましょう。

30
00:02:47.031 --> 00:02:48.296
属性を確認します。

31
00:02:48.296 --> 00:02:50.405
一つ目はディスエーブルドです。

32
00:02:50.405 --> 00:02:57.575
フィールドセットに付けると、配下の入力部品をまとめて操作できなくなり、通常は送信の対象にもなりません。

33
00:02:57.575 --> 00:03:02.636
申し込みの受付が終わったグループを丸ごと止める、といった場面で便利です。

34
00:03:02.636 --> 00:03:08.400
ただし例外があり、最初のレジェンドの中にある入力部品は、無効化の影響を受けません。

35
00:03:08.400 --> 00:03:14.445
意図せず操作できる部品を残さないよう、レジェンドの中には入力欄を置かないのが無難です。

36
00:03:14.445 --> 00:03:17.748
一つひとつの入力に繰り返し指定するより、グループ単位で切り替えられるのが、

37
00:03:17.748 --> 00:03:21.052
この属性の良さです。

38
00:03:21.052 --> 00:03:24.142
続いて、ネームとフォームという二つの属性です。

39
00:03:24.142 --> 00:03:31.127
ネームは、そのフィールドセットに付ける名前で、フォーム部品では送信時のキーに関わる情報として扱われます。

40
00:03:31.127 --> 00:03:37.173
一方、フォーム属性は、このフィールドセットをどのフォームに関連付けるかを指定するものです。

41
00:03:37.173 --> 00:03:41.069
指定するのは名前ではなく、対象のフォームのアイディーです。

42
00:03:41.069 --> 00:03:44.830
画面の例のように、マークアップ上はフォームの外にあるフィールドセットでも、

43
00:03:44.830 --> 00:03:48.592
アイディーで結び付けることができます。

44
00:03:48.592 --> 00:03:55.040
ただし、構造が離れると読み手が追いにくくなるため、本当に必要な場面に限って使うのがおすすめです。

45
00:03:55.040 --> 00:03:59.300
共通属性と、真偽属性の注意点も押さえましょう。

46
00:03:59.300 --> 00:04:06.338
フィールドセットでも、アイディー、クラス、ラングといった共通属性が使えます。

47
00:04:06.338 --> 00:04:14.395
アイディーは文書内で一意な識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、

48
00:04:14.395 --> 00:04:22.452
データ属性はアプリ独自の値を保持する場所ですが、秘密情報を置く場所ではありません。

49
00:04:22.452 --> 00:04:29.861
そして、ディスエーブルドのような真偽属性は、付いているかどうかだけで決まります。

50
00:04:29.861 --> 00:04:35.510
ディスエーブルド、イコール、フォルスと書いても無効化を解除する意味にはならず、

51
00:04:35.510 --> 00:04:41.159
解除したいときは属性そのものを取り除きます。

52
00:04:41.159 --> 00:04:44.972
応用として、ほかのグループの作り方も見てみましょう。

53
00:04:44.972 --> 00:04:49.813
画面の例は、興味のある分野を尋ねるチェックボックスのグループです。

54
00:04:49.813 --> 00:04:53.773
ラジオボタンが一つの答えを選ぶのに対して、チェックボックスは複数を選べますが、

55
00:04:53.773 --> 00:04:57.733
グループ化の考え方は同じです。

56
00:04:57.733 --> 00:05:03.893
このほか、郵便番号と都道府県のような住所のまとまりや、連絡先のまとまりにも使えます。

57
00:05:03.893 --> 00:05:08.293
逆に、質問の内容が変わる場所では、グループも分けてください。

58
00:05:08.293 --> 00:05:15.627
一つのフィールドセットに何でも詰め込むと、題名が付けにくくなり、グループの意味がぼやけてしまいます。

59
00:05:15.627 --> 00:05:17.510
見た目との関係を確認します。

60
00:05:17.510 --> 00:05:21.411
フィールドセットは、多くのブラウザーで標準で枠線付きの箱として表示され、

61
00:05:21.411 --> 00:05:25.312
レジェンドがその枠の上に題名として現れます。

62
00:05:25.312 --> 00:05:29.751
枠の色や太さ、角の丸み、内側の余白は、シーエスエスで調整できます。

63
00:05:29.751 --> 00:05:33.517
画面の例では、枠を青くして角を丸め、余白を付けています。

64
00:05:33.517 --> 00:05:40.243
ただし注意したいのは、枠線を消したからといって、グループとしての意味まで消えるわけではないことです。

65
00:05:40.243 --> 00:05:45.220
逆に、ただのディブに枠線を付けても、フィールドセットの意味にはなりません。

66
00:05:45.220 --> 00:05:49.255
意味はタグで、見た目はシーエスエスで、と分けて考えましょう。

67
00:05:49.255 --> 00:05:51.261
ブラウザー互換性を確認します。

68
00:05:51.261 --> 00:05:57.746
記事が参照するエムディーエヌのデータでは、フィールドセット要素は、クロームが一以降、

69
00:05:57.746 --> 00:06:04.232
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで古くから対応しています。

70
00:06:04.232 --> 00:06:07.040
基本の使い方なら、安心して使える要素です。

71
00:06:07.040 --> 00:06:10.116
一方で、属性ごとに対応が始まった時期は別です。

72
00:06:10.116 --> 00:06:13.727
たとえばディスエーブルドはクローム二十以降、ネームはクローム十九以降など、

73
00:06:13.727 --> 00:06:17.337
要素本体より新しい場合があります。

74
00:06:17.337 --> 00:06:23.221
新しい使い方を組み合わせる際は、属性の対応もあわせて確認し、実機でも試しておきましょう。

75
00:06:23.221 --> 00:06:29.506
スマートフォンなどモバイル環境でも、グループの表示が崩れていないかを合わせて確かめてください。

76
00:06:29.506 --> 00:06:32.290
最後に、よくある間違いとまとめです。

77
00:06:32.290 --> 00:06:38.632
一つ目は、レジェンドを付け忘れること、そして最初以外の場所に置いてしまうことです。

78
00:06:38.632 --> 00:06:40.952
題名は必ず最初に置きましょう。

79
00:06:40.952 --> 00:06:46.675
二つ目は、関係のない項目まで一つのフィールドセットで囲んでしまうことです。

80
00:06:46.675 --> 00:06:50.233
囲む範囲は、意味のまとまりで判断してください。

81
00:06:50.233 --> 00:06:56.884
三つ目は、ディスエーブルド、イコール、フォルスで無効化を解除したつもりになることです。

82
00:06:56.884 --> 00:06:59.359
真偽属性は取り除くのが解除です。

83
00:06:59.359 --> 00:07:07.867
公開前には、タブキーで順に操作できるか、三百二十ピクセル程度の狭い画面でも内容が欠けないかも確認してください。

84
00:07:07.867 --> 00:07:14.054
フィールドセットは、質問のまとまりをそのまま形にする要素だと覚えておきましょう。

85
00:07:14.054 --> 00:07:15.446
お疲れさまでした。