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

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

<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 デモ - フィールドセットと凡例のデモ

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

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

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

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

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

効果画像:

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

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

効果画像:

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

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

上記の基本的な知識を理解した後、もう少し深く掘り下げて、上記の<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 つの側面を作成し、テキストが埋め込まれた非常に美しい境界線を形成できます。

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

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

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

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

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

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

<<:  HTMLページをクリックしてダウンロードファイルを実装する2つの方法

>>:  js の toString メソッドの 3 つの機能

推薦する

MySQL 8.0 でリモートアクセス権限を設定する方法

前回の記事では、MySQL パスワードをリセットする方法を説明しました。一部の学生から、データベース...

JSが5つ星の賞賛を獲得

この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...

MySQL エラー番号 1129 の解決方法

SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...

この記事では、VUE の複数の DIV とボタン バインディングの Enter イベントを実装する方法を説明します。

現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

Dreamweaver で Zen コーディングを使用する方法

前回の記事「Zen Coding: HTML/CSS コードを素早く記述する方法」を公開した後、一部...

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

MySQLの高可用性と高パフォーマンスのクラスタを構築する方法

目次MySQL NDB Clusterとはクラスター構築のための準備作業クラスターのデプロイを開始す...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

MySQL における IF()、IFNULL()、NULLIF()、および ISNULL() 関数の使用に関する詳細な説明

MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...

Linux で PHP curl 拡張機能をインストールする方法の詳細な説明

この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...

Linux の一般的なコマンド chmod を使用して、ファイルの権限 777 と 754 を変更します。

よく使用されるコマンドは次のとおりです。 chmod 777 文件或目錄例: chmod 777 /...

5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)

目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...