HTMLのlegendタグについて
legendタグの定義と使用方法
<legend>タグは、<fieldset>タグのコンテンツにタイトルやキャプションを提供するために使用されます。 このタグを使うことで、一連のフォーム要素をグループ化し、そのグループに名前を付けることができます。以下に基本的な使用方法を示します。
<fieldset>
<legend>お問い合わせ</legend>
<label for="name">名前:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">メール:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="送信">
</fieldset>ブラウザーのサポート
<legend>タグは、ほとんどすべてのモダンブラウザーでサポートされています。 具体的には、次のブラウザーで完全にサポートされています。
| ブラウザー | サポート状況 |
|---|---|
| Google Chrome | 完全サポート |
| Mozilla Firefox | 完全サポート |
| Microsoft Edge | 完全サポート |
| Safari | 完全サポート |
| Opera | 完全サポート |
対応する属性
<legend>タグはグローバル属性をサポートしています。これらの属性はすべてのHTML要素で使用可能です。以下は代表的なグローバル属性です。
class: CSSクラスを定義します。id: 一意の識別子を指定します。style: インラインスタイルを指定します。title: 要素にツールチップを提供します。
対応するイベント
<legend>タグは、全てのグローバルイベントをサポートしています。以下は代表的なイベントです。
onclick: 要素がクリックされた時に発生します。onmouseover: 要素にマウスが乗った時に発生します。onmouseout: 要素からマウスが外れた時に発生します。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの例</title>
</head>
<body>
<form>
<fieldset>
<legend>ユーザー情報</legend>
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="age">年齢:</label>
<input type="number" id="age" name="age"><br><br>
<input type="submit" value="送信">
</fieldset>
</form>
</body>
</html>FAQ
legendタグはどのように利用しますか？
legendタグはfieldsetタグの内部に配置し、グループのタイトルやラベルを提供します。
legendタグにスタイルを適用できますか？
はい、スタイル属性や外部のCSSファイルを使用して、legendタグにスタイルを適用できます。
legendタグはすべてのブラウザーでサポートされていますか？
はい、legendタグはほとんどのモダンブラウザーで完全にサポートされています。