English العربية Português 日本語

Emmet: 「（ ）」と暗黙のタグのグループ化：ワンクリックのフルページ生成とコンテキストルール

最後のレッスンの[YIJIAN 0 PH]では、[YIJIAN 1 PH]と[YIJIAN 2 PH]は[YIJIAN 3 PH]内でのみ動作するように制限され、外部の兄弟はグループレベルに戻ります。このレッスンでは、[YIJIAN 4 PH]を体系的に取り上げ、レッスン3の「暗黙のタグ名」と組み合わせて、「単一の略語行からHTMLページ全体を生成する」ことを実現します。

1.学習内容

2.フロントエンド開発者の実話

###( 1)悩みの種：複雑な構造が「ネストカオス」につながる

Aliceさんは、[YIJIAN 0 PH]ヘッダーと以下の5つのデータ行を含む5行3列のテーブルを必要とする管理ダッシュボードリストページを構築しています。彼女はレッスン5の[YIJIAN 1 PH]を使って[YIJIAN 2 PH]を書いていますが、すぐに2つの新しい問題に直面します。

まず、[YIJIAN 0 PH]は5行x 3列を生成しますが、ページネーションバーは外側 [YIJIAN 1 PH]に配置する必要があります。彼女は[YIJIAN 2 PH]を兄弟としてブロック全体として使用したいと考えています。彼女は最後に[YIJIAN 3 PH]を追加しようとします。

TEXT 📖 参照専用 
table>(tr>td*3)*5+nav.pagination

展開後、[YIJIAN 1 PH]はtrを5回繰り返し、コンテキスト全体がテーブル内にあるため、[YIJIAN 0 PH ]テーブル内に終わることがわかりました。[YIJIAN 2 PH]は実際には5番目のtrの後にnavを追加しており、構造を台無しにしています。

第二に、５つのデータ行のそれぞれは、クラス［ ＹＩＪＩＡＮ ０ ＰＨ ］を有する。彼女は[YIJIAN 1 PH]と書いていますが、それは冗長です。すべての細胞に[YIJIAN 2 PH]がある場合、[YIJIAN 3 PH]が必要になります。彼女は「[ YIJIAN 4 PH]は書けるのか？」と不思議に思っています。trコンテキスト内の[YIJIAN 5 PH]は自動的に[YIJIAN 6 PH]になりますか？テーブルコンテキスト内の[YIJIAN 7 PH]は自動的に[YIJIAN 8 PH]になりますか？

(2) [YIJIAN 0 PH]グループ化と暗黙のタグがそれを解決する方法

エメットは、アリスの問題を解決するための2つの補完的なメカニズムを提供します。

括弧[YIJIAN 0 PH ]：外部の[YIJIAN 1 PH]がグループに漏れないように、「グループ化されたサブツリー」を独立した兄弟単位にします。アリスのページネーションの問題は、[YIJIAN 2 PH]を単一の「仮想グループ」として扱い、[YIJIAN 3 PH]を外側に追加するか、レッスン5の[YIJIAN 4 PH]を使用して抜け出す必要があります。

暗黙のタグ名： Emmetは、「親要素コンテキスト」に基づいて暗黙のタグを自動的に切り替えます— [YIJIAN 1 PH]内の[YIJIAN 0 PH]は[YIJIAN 2 PH]に、[YIJIAN 3 PH]は[YIJIAN 4 PH]内の[YIJIAN 5 PH]に、[YIJIAN 6 PH]は[YIJIAN 7 PH]内の[YIJIAN 8 PH]に、[YIJIAN 9 PH]は[YIJIAN 10 PH]内の[YIJIAN 11 PH]に自動になります。アリスの5 x 3テーブルは次のようになります。

TEXT 📖 参照専用 
table>(.row>.cell*3)*5

[YIJIAN 0 PH]は暗黙のうちに[YIJIAN 1 PH]になり、[YIJIAN 2 PH]は暗黙のうちに[YIJIAN 3 PH]になります。

###( 3)メリット

[YIJIAN 0 PH]と暗黙のタグは、エメットの高度なコンボです。括弧は、正確な「スコープ」コントロールを提供します。暗黙のタグを使用すると、最も一般的なタグ名を省略できます。このレッスンの後、アリスは[YIJIAN 1 PH]グループ化を使用して明確に構造化されたフルページの略語を書き、暗黙のタグを使用してタグ名の入力の30 ％をスキップします。管理者リストページ全体のHTML構造は、手書きでコード化された80行から2つの略語行になり、5分間の作業が8秒に短縮されます。

3.グループ化[YIJIAN 0 PH ]：スコープの分離

[YIJIAN 0 PH]は、内部の略語を独立したサブツリーとして扱います。内部で使用される[YIJIAN 1 PH ]、[YIJIAN 2 PH ]、[YIJIAN 3 PH]は外部に漏れません。[YIJIAN 4 PH]要素をグループ外に追加すると、追加位置は最も深いレベルではなく、グループ内の最初の要素を参照します。

###( 1)視覚的比較：グループ化とグループ化されていない

100% 
graph TB
    subgraph "Without Grouping: div>header>p"
        A1[div] --> B1[header]
        B1 --> C1[p]
    end
    subgraph "With Grouping: div>(header>p)+footer"
        A2[div] --> B2[header]
        A2 --> D2[footer]
        B2 --> C2[p]
    end
略語 pの位置 フッターの位置
[YIJIAN 0 PH] ヘッダーの子 ヘッダーの子（ pの兄弟）
[YIJIAN 0 PH] ヘッダーの子 divの子 (ヘッダーの兄弟)

キーポイント：[ YIJIAN 0 PH]の重要な機能は、下降チェーンを断ち切ることです。[YIJIAN 1 PH]は、括弧内の降順をカプセル化します。[YIJIAN 2 PH]の外側は、pレベルからではなく、括弧（ここでは、divの内側）の前のコンテキストレベルから再開します。これが、グループ化でヘッダーとフッターが兄弟になる理由です。

4.暗黙のタグ名：コンテキスト認識自動切り替え

暗黙のタグ名は、もう1つの主要なEmmet生産性メカニズムです。親要素のコンテキストでは、タグ名を省略すると、デフォルトは[YIJIAN 0 PH]になりません。代わりに、親に基づいて「合理的な子要素」が推測されます。

親要素 略語 暗黙のタグ 展開
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
[ YIJIAN 0 PH ] [ YIJIAN 1 PH ] [ YIJIAN 2 PH ] [ YIJIAN 3 PH ]
その他 [YIJIAN 0 PH] [YIJIAN 1 PH] [YIJIAN 2 PH ]（レッスン3ルール）

ヒント：暗黙的なタグ名は、タグ名が指定されていない場合にのみ適用されます。タグ名（[ YIJIAN 0 PH]など）を明示的に記述すると、暗黙のルールはバイパスされ、[YIJIAN 1 PH]のままになります。

(1)一般的な暗黙の比較と明示的な比較

構文 展開
[YIJIAN 0 PH ]（親なし） [YIJIAN 1 PH ]
[YIJIAN 0 PH] [YIJIAN 1 PH]
[YIJIAN 0 PH] [YIJIAN 1 PH]
[YIJIAN 0 PH] [YIJIAN 1 PH]

5.実践的な例

次の4つの例は、[YIJIAN 0 PH]と暗黙のタグのコアな組み合わせの使用をカバーしています。公式文書のショーケースの例から、実際の高頻度リスト/テーブルパターンまで。

###▶ 例：基本的なグループ化[YIJIAN 0 PH ]（難易度： ★★）

これはEmmetのドキュメントの主な例であり、[YIJIAN 0 PH]がフッターをヘッダーの兄弟にする方法を示しています。

Abbreviation

HTML 
div>(header>ul>li*2>a)+footer>p

展開先:

HTML 
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

出力

テキスト

括弧を解析：外部（ヘッダー> ul > li * 2 > a ）は、ヘッダーサブツリーを独立したユニットとしてカプセル化します。括弧外の+フッターは、もはや* 2の影響を受けず、ヘッダーの兄弟になります。両方ともdiv. li * 2の子であり、それぞれが暗黙的に1 aを含むヘッダー内に2 liを生成します。括弧なしでは、div > header > ul > li * 2 > a + footer > pは、フッターをヘッダーの兄弟ではなく（ ulの内側）の兄弟にします。

###▶ 例：明示的なタグの付いたテーブル[YIJIAN 0 PH ]（難易度： ★★）

繰り返し構造におけるグループ化の役割を示す、明示的なtr/td 2 x 3テーブル。

Abbreviation

HTML 
table>(tr>td*3)*2

展開先:

HTML 
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

出力

テキスト

tr > td * 3は「3つのセルの1行」テンプレートであり、（ tr > td * 3 ）* 2はこのテンプレートを2回繰り返します。括弧* 2はtd関係から分離されており、それらがなければtr > td * 3 * 2は「td繰り返し3回」と「tr繰り返し2回」として解析され、偶然にも2 x 3を生成するが、意味は不明である。括弧は、構造的な意図を明らかにします。注：この例の短縮版では、暗黙的なタグを使用できます—表> (.row > .cell * 3 )* 2は、入力を少なくして同じ構造に展開されます。

###▶ 例：暗黙のタグ付きリスト[YIJIAN 0 PH ]（難易度： ★）

ulコンテキスト内の[YIJIAN 0 PH]は暗黙的に[YIJIAN 1 PH]になり、それぞれ1 aを含む。

Abbreviation

HTML 
ul>.item*3>a

展開先:

HTML 
<ul>
  <li class="item"><a href=""></a></li>
  <li class="item"><a href=""></a></li>
  <li class="item"><a href=""></a></li>
</ul>

出力

テキスト

ULコンテキスト内では、[YIJIAN 0 PH]はEmmetによって自動的にliとして推測されます。【ＹＩＪＩＡＮ １ ＰＨ】３ ｌｉを繰り返し、それぞれが１ ａビア＞を含有する。これは、Emmetの「3項目ナビゲーションメニュー」の最も一般的な略語の1つです。「a要素を繰り返すには、ul >.item * 3 > a * 3 （ liあたり3 a ）またはul >(.item > a )* 3 （ユニット全体を3回繰り返す）のいずれかを記述します。かっこなしでは、a * 3は右端のaのみに作用します（ liあたり1 aのみ、aは繰り返されません）。

###▶ 例：コンバインドグループ[YIJIAN 0 PH ]（難易度： ★★）

ナビゲーション、メインエリア、フッターの1つの省略形のページ全体のスケルトン。すべて同じレベルにあります。

Abbreviation

HTML 
(nav>ul>li*3)+main+footer

展開先:

HTML 
<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>
<main></main>
<footer></footer>

出力

テキスト

構文解析：最外側（ nav > ul > li * 3 ）は、navサブツリーを独立したユニットにします。かっこの外側の+ mainと+ footerは、nav （グループの最初の要素）にアンカーし、navの兄弟になります。しかし、navには明示的な親がないため、mainとfooterはルートレベルで終了します。これは、ブラウザが[YIJIAN 0 PH]で自動ラップする場合とまったく同じです。ナビゲーションをボディ内に強制するには、略語を[YIJIAN 1 PH]にする必要があります。

6.完全な例：暗黙のバージョンを持つ5 x 3データテーブル

暗黙的なタグ+グループ化+乗算を組み合わせて、5行3列の表を1つの省略形で構築し、「明示的な」構文と「暗黙的な」構文を比較します。

###▶ 例： 5 x 3データテーブル（難易度： ★★）

略語（暗黙のバージョン） ：

HTML 
table>(.row>.cell*3)*5

展開先:

HTML 
<table>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>

出力

テキスト QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

FAQ

Q ：括弧[YIJIAN 0 PH]と括弧[YIJIAN 1 PH]はどのように異なりますか？ブラケットはどこで使用されていますか？ A: [YIJIAN 2 PH]はグループ化されています。[YIJIAN 3 PH]は属性です。[YIJIAN 4 PH]は、常に略語構造を区切ります。[YIJIAN 5 PH]は、タグ名（例えば、[YIJIAN 6 PH ]）に続き、カスタム属性を追加します。二人は構文的に対立することはありません。一般的な組み合わせは[YIJIAN 7 PH]で、それぞれcolspan属性を持つ5つのtd要素を意味します。

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

Q ： ul/table/selectの他に、暗黙のルールを持つ要素はどれですか？ A ： HTML 5では、暗黙のルールはリスト、テーブル、フォームの3つのカテゴリを中心としています。リスト関連： ul/ol内のli、dl内のdt/dd、内部nav。テーブル関連： thead/tbody/tfoot inside table, tr inside thead/tbody/tfoot, td/th inside tr, omission inside caption.フォーム関連： select内のオプション、datalist内のオプション、fieldset内の凡例。他のすべての親要素コンテキストはデフォルトでdiv.

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

概要

エクササイズ

  1. Basic （難易度： ）： （ a ★） 3項目のナビゲーション[YIJIAN 0 PH ];（ b ）暗黙のタグ[YIJIAN 1 PH]を使用した同じナビゲーション;（ c ）明示的な[YIJIAN 2 PH]と暗黙の[YIJIAN 3 PH]の両方の形式の2 x 3テーブル—結果を比較する。
  2. Intermediate (Difficulty :): Design ★★a "tab" structure: HTML containing a ul (3 tab li) and a main containing 3 sections (each section is one content panel). （括弧と暗黙のルールを使用して）単一のEmmet略語を書き、括弧が必要な理由を説明します。
  3. 課題（難易度： ）：括弧グループ★★★化+暗黙のタグ+乗算を組み合わせて、1行を記述して、各製品行に「画像[YIJIAN 0 PH ]、タイトル[YIJIAN 1 PH ]、価格[YIJIAN 2 PH ]、およびカートに追加ボタン[YIJIAN 3 PH]が含まれる「5行x 4列」の製品テーブルを作成します。"2つの等価な略語（ 1つは明示的、1つは暗黙的）を書き、どちらが読みやすく、エラーが発生しにくいかを比較します。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%