私がこの 2 つのタグについて初めて知ったのは、若い頃に reset.css や normalize.css を学んでいたときでした。統合コードのデフォルト スタイルをリセットする CSS でこのタグを見ました。最近、境界線を勉強しているときにこの 2 つのタグに出会い、非常に興味深いと感じたので、いくつかの知識ポイントを皆さんと共有するために記事を書きました。 一般的に、フォームでは
つまり、 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 デモ - フィールドセットと凡例のデモ 興味深い点は、
位置については、親要素の フィールドセット { 境界線: 1px solid#ddd; // パディング: 12px; } 伝説 フォントサイズ: 18px; } 効果画像: フィールドセット { 境界線: 1px 溝 #ddd; } 伝説 アニメーション: marginMove 10s 無限交互; } @keyframes マージン移動 { 100% { 左マージン: 100px; } } 効果画像: 応用シナリオ - タイトルの両側に水平線 上記の基本的な知識を理解した後、もう少し深く掘り下げて、上記の 最も適したシナリオは、タイトルの両側に水平線があるレイアウトだと思います。次のようなものです: もちろん、このレイアウトを解決する方法はたくさんあります。通常は、疑似要素を使用して左右の水平線を生成するか、絶対配置によってローカルにカバーして重ね合わせます。 ここでは、 <div class="g-container"> <fieldset><legend>ランキング</legend></fieldset> </div> フィールドセット { 幅: 300ピクセル; 高さ: 24px; 境界線: 1px 透明の実線; 上の境界線の色: #000; } 伝説 マージン: 自動; パディング: 0 10px; } CodePen デモ -- fieldset と legend デモ 2 境界線ネストされたテキスト この記事「基本的な HTML 要素を使用して境界線内にテキストを追加する方法」では、境界線内にテキストをネストするという非常に興味深い使用シナリオも紹介されています。 疑似コードは次のとおりです。 <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度); } 効果図は以下のとおりです。 複数の 伝説 アニメーション: 3 秒間の無限線形移動を交互に実行します。 } @keyframes 移動 { 100% { 左マージン: 70px; } } CodePen デモ - HTML フィールドセットと凡例を使用した境界線テキストのデザイン さて、これに基づいて、テキストが埋め込まれたさまざまな N 辺の境界線を生成できます。ここでは、いくつかのポリゴン境界の簡単な試みを示します。 CodePen デモ - フィールドセットと凡例でポリゴンを生成する 珍しいタグであるfieldsetとlegendの詳しい使い方については、これで終わりです。fieldsetとlegendタグの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: HTMLページをクリックしてダウンロードファイルを実装する2つの方法
>>: js の toString メソッドの 3 つの機能
前回の記事では、MySQL パスワードをリセットする方法を説明しました。一部の学生から、データベース...
この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...
SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...
現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...
今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...
目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...
前回の記事「Zen Coding: HTML/CSS コードを素早く記述する方法」を公開した後、一部...
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...
目次MySQL NDB Clusterとはクラスター構築のための準備作業クラスターのデプロイを開始す...
開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...
MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...
この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...
よく使用されるコマンドは次のとおりです。 chmod 777 文件或目錄例: chmod 777 /...
目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...