VIDEO LESSON

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

再生時間 7:15動画を別のタブで開く ↗

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の八十本目は、フィールドセットタグです。
0:08フィールドセットは、関連する入力項目をひとつのグループとしてまとめる要素です。
0:13たとえば、参加する時間帯は午前か午後か、という一つの質問に対して、複数のラジオボタンを並べる場面を思い浮かべてください。
0:21それぞれのボタンをばらばらに置くのではなく、グループとして囲むことで、読み上げでも一つの質問として伝わります。
0:29今回は、基本の書き方から、レジェンドとの組み合わせ、属性、注意点まで順番に確認していきましょう。
0:35フォームが長くなるほど、このグループ分けが読み手の負担を大きく減らしてくれます。
0:41基本の書き方を確認します。
0:43フィールドセットは開始タグと終了タグを両方書き、そのあいだに、グループにしたい入力項目を入れます。
0:51画面の例では、フォームの中にフィールドセットを置き、お届け先というグループの中に名前の入力欄を入れています。
1:00ポイントは、関係のある項目だけを囲むことです。
1:04フォーム全体をなんとなく囲むのではなく、この項目同士はセットだといえる範囲を選んでください。
1:12書き終わったら、開始タグと終了タグの対応が取れているか、開発者ツールのエレメンツでも確認しておくと安心です。
1:21入力欄にはラベルを組み合わせると、項目の意味がさらに伝わりやすくなります。
1:27フィールドセットと必ずセットで覚えたいのが、レジェンドです。
1:31レジェンドは、そのグループ全体の題名を表します。
1:35何を尋ねているのかを、グループの最初に短く書きましょう。
1:39置き場所のルールが大切で、レジェンドはフィールドセットの最初の子要素に置きます。
1:45ブラウザーでは、題名が枠線の上に重なるような形で表示されることが多いです。
1:50読み上げを利用する人にとっても、この題名があることで、今から答える選択肢が何についてのものなのかが先に分かります。
1:58題名のないグループにしないことが、使いやすさの第一歩です。
2:03記事の活用事例を読み解きます。
2:05例では、参加する時間帯というレジェンドの下に、午前と午後の二つのラジオボタンを並べています。
2:14ここで大切なのは、各ラジオのネームをタイムでそろえ、バリューでエーエムとピーエムを区別することです。
2:23ネームがそろうことで、ブラウザーは二つを一組と判断し、どちらか一方だけを選べるようにします。
2:31試すときは練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、
2:36保存後に再読み込みしてください。
2:41選んだ結果が一つの質問への答えとして伝わるかを確認しましょう。
2:47属性を確認します。
2:48一つ目はディスエーブルドです。
2:50フィールドセットに付けると、配下の入力部品をまとめて操作できなくなり、通常は送信の対象にもなりません。
2:57申し込みの受付が終わったグループを丸ごと止める、といった場面で便利です。
3:02ただし例外があり、最初のレジェンドの中にある入力部品は、無効化の影響を受けません。
3:08意図せず操作できる部品を残さないよう、レジェンドの中には入力欄を置かないのが無難です。
3:14一つひとつの入力に繰り返し指定するより、グループ単位で切り替えられるのが、
3:17この属性の良さです。
3:21続いて、ネームとフォームという二つの属性です。
3:24ネームは、そのフィールドセットに付ける名前で、フォーム部品では送信時のキーに関わる情報として扱われます。
3:31一方、フォーム属性は、このフィールドセットをどのフォームに関連付けるかを指定するものです。
3:37指定するのは名前ではなく、対象のフォームのアイディーです。
3:41画面の例のように、マークアップ上はフォームの外にあるフィールドセットでも、
3:44アイディーで結び付けることができます。
3:48ただし、構造が離れると読み手が追いにくくなるため、本当に必要な場面に限って使うのがおすすめです。
3:55共通属性と、真偽属性の注意点も押さえましょう。
3:59フィールドセットでも、アイディー、クラス、ラングといった共通属性が使えます。
4:06アイディーは文書内で一意な識別子、クラスはシーエスエスやスクリプトでまとめて選ぶための名前、
4:14データ属性はアプリ独自の値を保持する場所ですが、秘密情報を置く場所ではありません。
4:22そして、ディスエーブルドのような真偽属性は、付いているかどうかだけで決まります。
4:29ディスエーブルド、イコール、フォルスと書いても無効化を解除する意味にはならず、
4:35解除したいときは属性そのものを取り除きます。
4:41応用として、ほかのグループの作り方も見てみましょう。
4:44画面の例は、興味のある分野を尋ねるチェックボックスのグループです。
4:49ラジオボタンが一つの答えを選ぶのに対して、チェックボックスは複数を選べますが、
4:53グループ化の考え方は同じです。
4:57このほか、郵便番号と都道府県のような住所のまとまりや、連絡先のまとまりにも使えます。
5:03逆に、質問の内容が変わる場所では、グループも分けてください。
5:08一つのフィールドセットに何でも詰め込むと、題名が付けにくくなり、グループの意味がぼやけてしまいます。
5:15見た目との関係を確認します。
5:17フィールドセットは、多くのブラウザーで標準で枠線付きの箱として表示され、
5:21レジェンドがその枠の上に題名として現れます。
5:25枠の色や太さ、角の丸み、内側の余白は、シーエスエスで調整できます。
5:29画面の例では、枠を青くして角を丸め、余白を付けています。
5:33ただし注意したいのは、枠線を消したからといって、グループとしての意味まで消えるわけではないことです。
5:40逆に、ただのディブに枠線を付けても、フィールドセットの意味にはなりません。
5:45意味はタグで、見た目はシーエスエスで、と分けて考えましょう。
5:49ブラウザー互換性を確認します。
5:51記事が参照するエムディーエヌのデータでは、フィールドセット要素は、クロームが一以降、
5:57エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、主要ブラウザーで古くから対応しています。
6:04基本の使い方なら、安心して使える要素です。
6:07一方で、属性ごとに対応が始まった時期は別です。
6:10たとえばディスエーブルドはクローム二十以降、ネームはクローム十九以降など、
6:13要素本体より新しい場合があります。
6:17新しい使い方を組み合わせる際は、属性の対応もあわせて確認し、実機でも試しておきましょう。
6:23スマートフォンなどモバイル環境でも、グループの表示が崩れていないかを合わせて確かめてください。
6:29最後に、よくある間違いとまとめです。
6:32一つ目は、レジェンドを付け忘れること、そして最初以外の場所に置いてしまうことです。
6:38題名は必ず最初に置きましょう。
6:40二つ目は、関係のない項目まで一つのフィールドセットで囲んでしまうことです。
6:46囲む範囲は、意味のまとまりで判断してください。
6:50三つ目は、ディスエーブルド、イコール、フォルスで無効化を解除したつもりになることです。
6:56真偽属性は取り除くのが解除です。
6:59公開前には、タブキーで順に操作できるか、三百二十ピクセル程度の狭い画面でも内容が欠けないかも確認してください。
7:07フィールドセットは、質問のまとまりをそのまま形にする要素だと覚えておきましょう。
7:14お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

fieldsetタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。関連する入力項目をまとめます。ラジオボタンなどのグループに適しています。

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