【HTML5】legendタグとは？使い方についてまとめ

legendに入れられるタグ一覧

タグ早見表

a abbr area audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label link map mark math meta meter noscript object output picture progress q ruby rp s samp script select slot small span strong sub sup svg template textarea time u var video wbr テキストなど

入れられるタグのカテゴリー・モデル

legendに使える属性

属性とは<legend> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

legendの使い方

<fieldset>
    <legend>このなかで野菜はどれ？</legend>

    <input type="radio" id="moyashi" name="radio">
    <label for="moyashi">もやし</label>

    <input type="radio" id="banana" name="radio">
    <label for="banana">バナナ</label>

    <input type="radio" id="apple" name="radio">
    <label for="apple">りんご</label>
    
</fieldset>

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

legendの使い方についてまとめ

legendの概要

legendのカテゴリー

コンテンツカテゴリー

コンテンツモデル