レアタグフィールドセットと凡例の使用方法の詳細な説明

<fieldset>と<legend>については、ほとんどの人はおそらく馴染みがないはずです。HTML タグの中では、あまり使われていないタグの 1 つです。

私がこの 2 つのタグについて初めて知ったのは、若い頃に reset.css や normalize.css を学んでいたときでした。統合コードのデフォルト スタイルをリセットする CSS でこのタグを見ました。最近、境界線を勉強しているときにこの 2 つのタグに出会い、非常に興味深いと感じたので、いくつかの知識ポイントを皆さんと共有するために記事を書きました。

<fieldset>と<legend>を理解する

一般的に、フォームでは<fieldset>と<legend>がよく使用されます。

• <fieldset> : HTML <fieldset>要素は、フォーム内のコントロール要素をグループ化するために使用されます。
• <legend> : <legend>要素は、フィールドセットのタイトルとして<fieldset>に組み込まれます。

つまり、 fieldset はフォーム要素をグループ化するために単独で使用できますが、 legend fieldsetと組み合わせて使用​​する必要があり、グループのタイトルとしてペアで表示されます。

簡単な例を見てみましょう。簡単な HTML と構造は次のとおりです。

<フィールドセット>
    <legend>フォーム</legend>
    <div>
        <label>名前:</label><input type="text" placeholder="名前を入力" />
    </div>
    <div>
        <label>パスワード:</label><input type="text" placeholder="名前を入力" />
    </div>
</フィールドセット>

フィールドセット {
    境界線: 1px solid#ddd;
    パディング: 12px;
}
 
伝説
    フォントサイズ: 18px;
    パディング: 0 10px;
}

効果は以下のとおりです。

CodePen デモ - フィールドセットと凡例のデモ

興味深い点は、 fieldsetにborderが設定されている場合、 legend要素の内容がグループのタイトルとしてborderに埋め込まれることです。

legendの位置とスタイルを制御する

legendの位置とスタイルを制御できます。

位置については、親要素のmarginとpaddingによって制御できます。親要素のfieldset paddingが設定されておらず、 legend margin が設定されていない場合、デフォルトではlegendは左端に配置されます。

フィールドセット {
    境界線: 1px solid#ddd;
    // パディング: 12px;
}
 
伝説
    フォントサイズ: 18px;
}

効果画像:

legendのmarginまたは親要素のpadding-left変更することで、タイトルの初期位置を制御できます。

フィールドセット {
    境界線: 1px 溝 #ddd;
}
 
伝説
    アニメーション: marginMove 10s 無限交互;
}
 
@keyframes マージン移動 {
    100% {
        左マージン: 100px;
    }
}

効果画像:

legendのpaddingを制御することで、周囲の要素の面積を増やし、より多くの空白を残すことができます。

応用シナリオ - タイトルの両側に水平線

上記の基本的な知識を理解した後、もう少し深く掘り下げて、上記の<fieldset>と<legend>のいくつかの興味深い応用シナリオについて考え始めることができます。

最も適したシナリオは、タイトルの両側に水平線があるレイアウトだと思います。次のようなものです:

もちろん、このレイアウトを解決する方法はたくさんあります。通常は、疑似要素を使用して左右の水平線を生成するか、絶対配置によってローカルにカバーして重ね合わせます。

ここでは、 <fieldset>と<legend>を使用してこれを非常に迅速に実行します。

<div class="g-container">
    <fieldset><legend>ランキング</legend></fieldset>
</div>

フィールドセット {
    幅: 300ピクセル;
    高さ: 24px;
    境界線: 1px 透明の実線;
    上の境界線の色: #000;
}
 
伝説
    マージン: 自動;
    パディング: 0 10px;
}

fieldset上部の境界線のみを設定し、 margin: autoによってタイトルを中央に配置し、 paddingによって両側の空白を制御します。まさに完璧です。

CodePen デモ -- fieldset と legend デモ 2

境界線ネストされたテキスト

この記事「基本的な HTML 要素を使用して境界線内にテキストを追加する方法」では、境界線内にテキストをネストするという非常に興味深い使用シナリオも紹介されています。

<fieldset>要素と<legend>要素を組み合わせると、境界線に埋め込まれたテキストの効果を作成できると想像してください。次に、複数のグループを組み合わせて配置することで、多辺の境界線にネストされたテキストの効果を作成できます。

疑似コードは次のとおりです。

<div class="g-container">
    <fieldset><legend>CSS フィールドセット</legend></fieldset>
    <fieldset><legend>HTML 要素</legend></fieldset>
    <fieldset><legend>JavaScript</legend></fieldset>
    <fieldset><legend>TypeScript</legend></fieldset>
</div>

.g-コンテナ{
    位置: 相対的;
    幅: 300ピクセル;
    高さ: 300px;
}
フィールドセット{
    位置: 絶対;
    幅: 300ピクセル;
    高さ: 300px;
    境界線: 10px 透明の実線;
    上の境界線の色: #000;
}
伝説
    パディング: 0 10px;
}
 
フィールドセット:nth-of-type(2){ 変換: 回転(90度); }
フィールドセット:nth-of-type(3){ 変換: 回転(180度); }
fieldset:nth-of-type(3)>凡例{ transform: rotate(180deg); }
フィールドセット:nth-of-type(4){ 変換: 回転(-90度); }

効果図は以下のとおりです。

複数の<fieldset>と<legend>を組み合わせることで、コンテナの 4 つの側面を作成し、テキストが埋め込まれた非常に美しい境界線を形成できます。

legendにanimationを追加することで、テキストを動かすことができます。

伝説
    アニメーション: 3 秒間の無限線形移動を交互に実行します。
}
@keyframes 移動 {
    100% {
        左マージン: 70px;
    }
} 

CodePen デモ - HTML フィールドセットと凡例を使用した境界線テキストのデザイン

さて、これに基づいて、テキストが埋め込まれたさまざまな N 辺の境界線を生成できます。ここでは、いくつかのポリゴン境界の簡単な試みを示します。

CodePen デモ - フィールドセットと凡例でポリゴンを生成する

珍しいタグであるfieldsetとlegendの詳しい使い方については、これで終わりです。fieldsetとlegendタグの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。