Emmet: プロジェクト2 — レスポンシブランディングページ + CSS省略記法（第1〜13回の組み合わせ）

Q: CSS省略記法で、 m10-20 と m10 20 に違いはありますか？

はい。 m10-20 はEmmet省略記法構文（ - が複数値を区切る）で、 margin: 10px 20px; に展開されます。 m10 20 （スペースあり） — Emmet解析は最初のスペースで停止し（スペースは停止記号）、 m10 のみが margin: 10px; に展開され、 20 はそのまま残ります。CSS省略記法では複数値を区切るために - または # などの値バインディングを使用する必要があります。

Q: CSS省略記法 box-shadow:0 2px 8px #0001 はどのように解析されますか？

Emmet CSS省略記法は : を値バインディングとしてサポートします。 box-shadow:0 2px 8px #0001 は次のように解析されます：プロパティ box-shadow （完全な綴り）+ 値 0 2px 8px #0001 （ : で区切り）。値内のスペースはそのまま保持されます（Emmetは値内の省略記法を展開しません）。Emmetのファジーマッチングに慣れている場合は、 bxsh:0 2px 8px #0001 （ bxsh は box-shadow のファジー省略記法、第12回）とも書けます。

Q: レスポンシブグリッドにおける auto-fit と auto-fill の違いは何ですか？

auto-fit は既存の列を拡張して残りのスペースを埋めます（コンテナを埋めるべきカードに適する）。 auto-fill は空のトラックスペースを保持します（固定列数に適する）。このレッスンの例では auto-fit + minmax(240px, 1fr) を使用しています：コンテナが十分に広い場合は4列表示、狭い場合は列が自動削減（小画面で1列、中画面で2列、大画面で3〜4列）。これはCSS Gridの最も簡潔なレスポンシブソリューションであり、メディアクエリ不要です。

Q: スティッキーナビゲーションにおける position:sticky と position:fixed の違いは何ですか？

fixed はビューポートに相対（ドキュメントフローから除去、手動でのスペース確保が必要）。 sticky はハイブリッド配置 — コンテナに相対してスクロールし、コンテナがビューポート上部に達すると「固定」されます。このレッスンの例では position:sticky; top:0 を使用して、スクロール時に <header> をビューポート上部に固定します — ただし <header> の親コンテナがスクロールアウトすると、stickyも一緒にスクロールアウトします。 fixed には親コンテナ制約がありません（常に固定）が、下のコンテンツを覆います（スペース確保にpadding-topが必要）。このレッスンではstickyを使用 — ヘッダーがbodyの直接の子であり、ネストされたスクロールコンテナがないためです。

第1〜16回を通じて、あなたはHTML省略記法（8演算子）+ CSS省略記法（3レッスン：基本、ファジーマッチング、グラデーション）+ アクション（5つの編集アクセラレーター）を学びました。このレッスンはEmmetチュートリアル全体の集大成です：すべてのCSS省略記法知識を組み合わせて、110行のレスポンシブSaaSランディングページを書きます。アリスはHTML省略記法 + CSS省略記法を使って、空のファイルから完全なページまで30分で仕上げます。

1. 学習内容

HTMLセクション分解：ランディングページを5セクション（ヘッダー / ヒーロー / 機能 / 価格 / フッター）に分解し、各々をEmmet省略記法断片にマッピングする
CSS省略記法実践：m10-20 p10-0 bgc#fff bdrs8 fz16 fw700などの省略記法でCSSプロパティを1行で書く
レスポンシブグリッド：grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))で自動レスポンシブ��ードグリッド
スティッキーナビゲーション：position:sticky + top:0でスクロール時にナビゲーションバーを固定
CSSグラデーション背景：linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)をヒーローセクション背景に使用

2. あるフルスタック開発者の実話

(1) 課題：5セクション + レスポンシブ + 3ブレークポイント — 手打ちで200行HTML + 100行CSS

アリスはSaaS企業のフルスタック開発者です。2026年8月、彼女は新機能のランディングページが必要で、ローンチ日に100人の無料トライアルユーザーを獲得することを目標としています。デザインには5セクションがあります：

セクション	要素チェックリスト
1. ヘッダー（ナビゲーション）	ロゴ + 3メニューリンク + 2 CTA（サインイン、無料トライアル）
2. ヒーロー	バッジ + h1 + リード説明 + 2 CTAボタン + 3信頼バッジ
3. 機能（4カード）	タイトル + 4機能カード（アイコン + h3 + 説明）
4. 価格（3プラン）	タイトル + 3価格カード（Basic / Pro強調 / Enterprise）
5. フッター	4列リンク + 著作権表示

合計：1ヘッダー + 1ヒーロー + 4カード + 3プラン + 1フッター = 10セクション要素。アリスは手打ちHTMLを200行（ネスト詳細を含む）+ CSS 100行（レスポンシブ + 3ブレークポイント）と見積もりました。合計300行、4〜5時間。

さらに悪いことに、手打ちではCSSの詳細を見逃しやすい（border-radius: 8px抜け = 角丸でないカード、box-shadow方向間違い）。アリ��は考えました：HTML部分はEmmet第1〜13回のすべてで加速できる。しかしCSS部分は？100行のCSSを手打ちするのは単純作業 — それも加速する方法はないのか？

(2) Emmet HTML + CSS デュアル省略記法による解決策

アリスはVSCodeを開き、!を押してHTMLスケルトンを展開し、Emmet HTML省略記法でbodyを書きます：

HTML

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Features})+(li>a{Pricing})+(li>a{Contact})+a.btn.btn-sm{Free Trial}
section.hero>(span.badge{v3.0 Released})+h1{Automate Your Workflow}+p.lead{Connect 200+ apps, zero-code visual builder}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo})+ul.badges>(li{No credit card})+(li{5-minute setup})+(li{10000+ teams})
section.features>h2{Core Features}+p.section-lead{Powerful capabilities}+.grid>.card*4>(h3{Feature})+p{Description})
section.pricing>h2{Pricing}+p.section-lead{Choose the right plan for your team}+.grid>.card.plan*3>(h3{Plan}+p.price{¥99}+ul>li*3{Feature}+a.btn{Select})
footer.footer>p{© 2026 CloudFlow}

次に<style>ブロックでEmmet CSS省略記法を使用します：

CSS

* { m0 p0 }
body { ff:system-ui lh1.6 }
.nav { d:f jc:sb ai:c p16-24 }
.btn { p12-24 bdrs6 fw600 td:n }
.card { bgc#fff bdrs12 p32 box-shadow:0 2px 8px #0001 }
.btn-primary { bgc#3498db c#fff }
.btn-outline { bgc:transparent c#3498db bd2s #3498db }
.hero { p80-24 bg:lg(135deg, #f5f7fa, #c3cfe2) }

アリスは110行のHTML + 40行のCSSを30分で書きます — 手��ちより8〜10倍高速です。CSS部分はEmmet省略記法で100行の手打ちを40行に圧縮（CSSも1.5倍加速）。

(3) メリット

アリスは「プロジェクト2」をランディングページ30分で完了しました — 手打ちより8〜10倍高速で、HTMLの属性欠落ゼロ、CSSのタイプミスゼロ。最大の利点はCSS省略記法です — 100行のCSSを手打ちすると1.5時間（手打ち + コピペ）かかっていましたが、今は30分（Emmet CSS省略記法 + Tab）。このレッスンはEmmetチュートリアル全体の集大成です — HTML + CSSデュアル省略記法を習得すれば、日常のフロントエンドコーディング効率が3〜5倍向上します。

3. ランディングページ構造：5セクションをEmmet演算子にマッピング

以下の表は5つのセクションすべてをEmmet演算子にマッピングします �� これは重要な「要件分解」ステップです。

セクション	要素	Emmet省略記法断片	対象構文（レッスン）
1. ヘッダー	`<header>` + `<nav>` + `<a class="logo">` + 複数`<li><a>`を含む`<ul class="menu">`	`header>nav>a.logo+ul.menu>(li>a)*3`	第4回子 + 第5回乗算 + 第7回クラス
2. ヒーロー	`<section>` + `<span class="badge">` + `<h1>` + `<p class="lead">` + 2ボタンを含む`<div class="cta-row">`	`section.hero>span.badge+h1{...}+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline)`	第4回兄弟 + 第6回グループ化 + 第7回クラス + 第9回テキスト
3. 機能	タイトル + 4カード（`.card*4`）	`h2+.grid>.card*4>(h3{...}+p{...})`	第5回乗算 + 第9回テキスト
4. 価格	3価格カード（`.card.plan*3`）、中央を強調`.highlight`	`h2+.grid>.card.plan*3>(h3{...}+p.price+a.btn)`	第5回乗算 + 第6回グループ化
5. フッター	`<footer>` + `<p>` 著作権	`footer>p{© ...}`	第9回テキスト

📌 ポイント：この表はEmmetの「セクション分解」思考法を示しています — 各セクションは1つの省略記法断片、5断片をつなげて完全なページ��。第1〜13回の8つのHTML演算子 + CSS省略記法（m10-20 / bgc#fff / box-shadow:0 2px 8px #0001など）と組み合わせることで、110行のHTML + 40行のCSS全体をEmmet加速できます。

4. HTML部分 Emmet省略記法

以下の3つの例が最小単位から��全な構成まで構築します — ランディングページの「一発」思考法を示します。

▶ サンプル: ナビゲーションバー `header>nav>a.logo{CF}+ul.menu>(li>a)*3`（難易度：★）

最も一般的なセクション：headerがnavをラップし、navがロゴ + メニューリスト + CTAを含みます。

省略記法：

HTML

header>nav>a.logo{CF}+ul.menu>(li>a)*3

展開結果：

HTML

<header>
  <nav>
    <a class="logo" href="">CF</a>
    <ul class="menu">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

出力：1ロゴ + 3空メニューアイテムを持つ標準的なheader + nav構造としてレンダリングされます。<a>のデフォルトはhref=""（Emmetデフォルトプレースホルダー）。
TEXT 📖 参照専用
分解：3つのコア構文ポイント ���
- `header>nav`：第4回 子
- `a.logo{CF}`：第7回 クラス + 第9回 テキスト
- `(li>a)*3`：第6回 グループ化 + 第5回 乗算（li>aブロック全体を3回繰り返し）
6行のHTML、省略記法28文字 — 圧縮率1:4.7。

▶ サンプル: ヒーローセクション `section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline))`（難易度：★★）

ランディングページのコアビジュアル：バッジ + タイトル + 説明 + デュアルCTAボタン。

省略記法：

HTML

section.hero>(span.badge{New Release}+h1{Automate Your Workflow}+p.lead{Connect 200+ Apps}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo}))

展開結果：

HTML

<section class="hero">
  <span class="badge">New Release</span>
  <h1>Automate Your Workflow</h1>
  <p class="lead">Connect 200+ Apps</p>
  <div class="cta-row">
    <a class="btn-primary" href="">Get Started Free</a>
    <a class="btn-outline" href="">Watch Demo</a>
  </div>
</section>

出力：ランディングページのヒーローセクションとしてレンダリングされます：バージョンバッジ + 大タイトル + 説明 + デュアルCTAボタン。
TEXT 📖 参照専用
分解：ヒーローセグメントはグループ化 + 多段ネストのクラシックなケースです —
- `(span.badge+h1+p.lead+.cta-row>...)`：第6回 グループ化 + 第4回 兄弟 + 子
- `.cta-row>(a.btn-primary)+(a.btn-outline)`：グループ化の中にグループ化（第6回 上級使用法）
- 暗黙的タグ `.cta-row` は `<div class="cta-row">` に展開（第3回 暗黙的タグ）
8行のHTML、省略記法85文字 — 圧縮率1:10.6。

▶ サンプル: 完全なランディングページ（5省略記法断片 → 110行HTML）（難易度：★★★）

5つのセクション省略��法（ヘッダー / ヒーロー / 機能 / 価格 / フッター）をつなげて完全なランディングページスケルトンを得ます：

省略記法：

HTML

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Features})+(li>a{Pricing})+(li>a{Contact})+a.btn{Free Trial}+section.hero>(span.badge{v3.0 Released})+h1{Automate Your Workflow}+p.lead{Connect 200+ Apps}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo})+section.features>h2{Core Features}+p.section-lead{Powerful Capabilities}+.grid>(.card*4>(h3{Feature})+p{Description}))+section.pricing>h2{Pricing}+p.section-lead{Choose the right plan}+.grid>(.card.plan*3>(h3{Plan}+p.price{¥99}+ul>li*3{Feature}+a.btn{Select}))+footer.footer>p{© 2026 CloudFlow}

Tabを押して110行のHTMLに展開します（完全な出力は§6. 完全な例を参照）。

出力：完全なSaaSランディングページとしてレンダリングされます — ロゴ + 3メニューアイテム + CTA付きのヘッダー。バッジ + h1 + リード + デュアルボタン付きのヒーロー。4カード付きの機能。3プラン付きの価格。著作権付きのフッター。
TEXT 📖 参照専用
分解：このレッスンのコア例 — 5つのEmmet省略記法断片が110行のHTMLに連結されます。
- 5つの`+`演算子：4つの兄弟接続（第4回）
- 複数の`>`：子ネスト
- `*3` / `*4`：第5回 乗算
- `()`：第6回 グループ化
- `.card.plan` / `.btn-primary`：第7回 複数クラス
- `{text}`：第9回 テキスト埋め込み
第1〜16回のすべてのHTML省略記法構文を組み合わせています。**重要な洞察**：ランディングページHTMLの95%がEmmet化可能。手打ちは5%のみ（記号や著作権などの実際のコンテンツへの微調整）。

5. CSS部分 Emmet省略記法

CSS省略記法はこのレッスンで新しく登場します — HTML省略記法（第1〜10回）+ CSS省略記法（第11〜13回）+ アクション（第14〜16回）：3つすべてが完全なEmmetツールチェーンを形成します。

▶ サンプル: レスポンシブナビゲーション `nav{display:flex}`（難易度：★）

CSS省略記法でdisplay:flexを18文字から2文字に。

省略記法：

CSS

nav{display:flex}

展開結果：

CSS

nav { display: flex; }

出力：CSSセレクタnavにdisplay: flex; — navの子が水平に配置されます。

TEXT 📖 参照専用

分解：Emmet CSS省略記法の解析ルール —
- `nav`はCSSセレクタ
- `{display:flex}`はCSSルールブロック
- `display:flex`は値を`:`でバインド（Emmetがサポート）
- Emmetのパーサーは`display`省略記法`d`を見つける → `display: |;`、値`flex`を`|`に挿入
- 省略形式でも書けます：`nav{d:f}`（`d` → display、`:` 値バインディング、`f` → flex値）

▶ サンプル: 機能カード `bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001`（難易度：★★）

5つのCSSプロパティを1行で — コアCSS省略記法の組み合わせ。

省略記法：

CSS

.card{bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001}

展開結果：

CSS

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 10px 0;
  box-shadow: 0 2px 8px #0001;
}

出力：.cardクラスに5つのスタイル：白背景、8pxボーダー半径、上下20px + 左右30pxパディング、上下10px + 左右0マージン、微妙なシャドウ（半透明黒0.4%）。

TEXT 📖 参照専用

分解：5つのCSS省略記法の組み合わせ —
- `bgc#fff` → `background-color: #fff;`（`#`は値バインディング、第11回 CSS基本）
- `bdrs8` → `border-radius: 8px;`（数値8が値バインディング）
- `p20-30` → `padding: 20px 30px;`（`-`は複数値区切り文字）
- `m10-0` → `margin: 10px 0;`
- `box-shadow:0 2px 8px #0001` → `box-shadow: 0 2px 8px #0001;`（完全なプロパティ名 + `:`値バインディング + 複数スペース区切り値）
5行のCSS、省略記法56文字 — 圧縮率1:11.2。

▶ サンプル: CTAボタン `bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700`（難易度：★★）

一般的なボタンスタイルの組み合わせ — 6つのCSSプロパティを1行で。

省略記法：

CSS

.btn{bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700}

展開結果：

CSS

.btn {
  background-color: #2c3e50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

出力：.btnクラスに6つのスタイル：濃い青灰色背景、白テキスト、上下10px + 左右20pxパディング、4pxボーダー半径、16pxフォントサイズ、700フォントウェイト（太字）。
TEXT 📖 参照専用
分解：6つのCSS省略記法 —
- `bgc#2c3e50`：16進カラー（スペースなし、`#`以降の引用符省略可能）
- `c#fff`：`color`省略記法 + カラー値
- `p10-20`：`padding`省略記法 + デュアル値
- `bdrs4`：`border-radius`省略記法（第12回 ファジーマッチング：`bdr`は不十分、`bdrs`が`border-radius`にマッチ）
- `fz16`：`font-size`省略記法（第11回）
- `fw700`：`font-weight`省略記法（単位なし、第11回 単位なし値）
6行のCSS、省略記法47文字 — 圧縮率1:7.8。

6. 完全な例：レスポンシブランディングページ — 110行HTML + 40行CSS

5つのHTML省略記法断片 + 12のCSS省略記法断片を展開して、完全な110行のレスポンシブランディングページを得ます。この例がこのレッスンの集大成です — 「試す」ボタンはありません（仕様v2.5ゲート#26により、総合例はエディタでプレビューされません）。

HTML部分（Emmet第1〜13回の組み合わせ）：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - ワークフロー自動化プラットフォーム</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a class="logo" href="/">CF</a>
      <ul class="menu">
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <a class="btn btn-sm" href="/signup">Free Trial</a>
    </nav>
  </header>
  <section class="hero">
    <span class="badge">v3.0 Released</span>
    <h1>Automate Your Workflow</h1>
    <p class="lead">Connect 200+ apps, zero-code visual workflow builder</p>
    <div class="cta-row">
      <a class="btn-primary" href="/signup">Get Started Free</a>
      <a class="btn-outline" href="#demo">Watch Demo</a>
    </div>
    <ul class="badges">
      <li>No credit card required</li>
      <li>5-minute setup</li>
      <li>Trusted by 10000+ teams</li>
    </ul>
  </section>
  <section id="features" class="features">
    <h2>Core Features</h2>
    <p class="section-lead">Powerful capabilities to make your workflows more efficient</p>
    <div class="grid">
      <div class="card">
        <h3>Visual Builder</h3>
        <p>Drag-and-drop interface — build complex workflows without writing code</p>
      </div>
      <div class="card">
        <h3>200+ Integrations</h3>
        <p>Connect with Slack, GitHub, Salesforce, and 200+ popular apps</p>
      </div>
      <div class="card">
        <h3>Team Collaboration</h3>
        <p>Real-time collaborative editing, permission management — teams maintain workflows together</p>
      </div>
      <div class="card">
        <h3>Enterprise Security</h3>
        <p>SOC 2 certified, end-to-end encryption — meets enterprise compliance requirements</p>
      </div>
    </div>
  </section>
  <section id="pricing" class="pricing">
    <h2>Simple, Transparent Pricing</h2>
    <p class="section-lead">Choose the plan that fits your team</p>
    <div class="grid grid-pricing">
      <div class="card plan">
        <h3>Free</h3>
        <p class="price">$0<span>/month</span></p>
        <ul>
          <li>5 workflows</li>
          <li>1,000 executions/month</li>
          <li>Community support</li>
        </ul>
        <a class="btn btn-outline" href="/signup">Get Started</a>
      </div>
      <div class="card plan highlight">
        <h3>Pro</h3>
        <p class="price">$12<span>/month</span></p>
        <ul>
          <li>Unlimited workflows</li>
          <li>50,000 executions/month</li>
          <li>Priority email support</li>
        </ul>
        <a class="btn btn-primary" href="/signup">Upgrade Now</a>
      </div>
      <div class="card plan">
        <h3>Enterprise</h3>
        <p class="price">$35<span>/month</span></p>
        <ul>
          <li>Everything in Pro</li>
          <li>Unlimited executions</li>
          <li>Dedicated account manager</li>
        </ul>
        <a class="btn btn-outline" href="/contact">Contact Sales</a>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer-grid">
      <div>
        <h4>Product</h4>
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#pricing">Pricing</a></li>
        </ul>
      </div>
      <div>
        <h4>Resources</h4>
        <ul>
          <li><a href="#">Docs</a></li>
          <li><a href="#">API</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy; 2026 CloudFlow. All rights reserved.</p>
  </footer>
</body>
</html>

CSS部分（Emmet第11〜13回の組み合わせ）：

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; color: #2c3e50; line-height: 1.6; }
.header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.menu { display: flex; gap: 24px; list-style: none; }
.menu a { color: #34495e; text-decoration: none; font-weight: 500; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.btn-primary { background: #3498db; color: #fff; }
.btn-outline { background: transparent; color: #3498db; border: 2px solid #3498db; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.hero { padding: 80px 24px; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero h1 .accent { color: #3498db; }
.lead { font-size: 20px; color: #7f8c8d; max-width: 720px; margin: 0 auto 32px; }
.cta-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 32px; }
.badges { display: flex; gap: 24px; justify-content: center; list-style: none; color: #7f8c8d; }
.features { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section-lead { text-align: center; color: #7f8c8d; max-width: 600px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.card { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.pricing { padding: 80px 24px; background: #f8f9fa; }
.grid-pricing { max-width: 1100px; margin: 32px auto 0; }
.plan { text-align: center; }
.plan.highlight { border: 2px solid #3498db; transform: scale(1.05); }
.price { font-size: 36px; font-weight: 700; color: #2c3e50; margin: 16px 0; }
.price span { font-size: 16px; color: #7f8c8d; font-weight: 400; }
.footer { background: #2c3e50; color: #ecf0f1; padding: 40px 24px; text-align: center; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 800px; margin: 0 auto 24px; }
.copyright { color: #95a5a6; font-size: 14px; }
@media (max-width: 640px) { .nav { flex-direction: column; gap: 12px; } .grid { grid-template-columns: 1fr; } }

出力：ブラウザは完全なSaaSランディングページをレンダリングします：スティッキーヘッダー（スクロール時に上部に固定）+ ヒーローセクション（グラデーション背景 + 大タイトル + デュアルCTA）+ 機能（4レスポンシブカード、モバイルで自動スタック）+ 価格（3プラン、中央を強調）+ フッター（ダーク3列リンク + 著作権）。レスポンシブ：モバイル（< 640px）単列カード、デスクトップ（> 640px）4列グリッド。
TEXT 📖 参照専用
分解：このレッスンの総合例は第1〜13回のすべてのEmmet知識を連結しています —
- **HTML部分**：95%がEmmet省略記法で生成（§4の5断片）：ヘッダー + ヒーロー + 機能 + 価格 + フッター — 5セクション
- **CSS部分**：コアスタイルをカバーする12のEmmet省略記法ブロック：`nav{display:flex}`、`card{bgc#fff bdrs12 box-shadow:0 2px 8px #0001}`、`hero{bg:lg(135deg, #f5f7fa, #c3cfe2)}`など
- **レスポンシブ**：`grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))`で実現 — メディアクエリ不要
- **スティッキーナビゲーション**：`position:sticky + top:0`を使用
行数比較：手打ち200行HTML + 100行CSSで4〜5時間。Emmet 110行HTML + 40行CSSで30分。**合計時間80%削減**。

❓ よくある質問

Q CSS省略記法で、m10-20とm10 20に違いはありますか？

A はい。m10-20はEmmet省略記法構文（-が複数値を区切る）で、margin: 10px 20px;に展開されます。m10 20（スペースあり） — Emmet解析は最初のスペースで停止し（スペースは停止記号）、m10のみがmargin: 10px;に展開され、20はそのまま残ります。CSS省略記法では複数値を区切るために-または#などの値バインディングを使用する必要があります。

Q CSS省略記法box-shadow:0 2px 8px #0001はどのように解析されますか？

A Emmet CSS省略記法は:を値バインディングとしてサポートします。box-shadow:0 2px 8px #0001は次のように解析されます：プロパティbox-shadow（完全な綴り）+ 値0 2px 8px #0001（:で区切り）。値内のスペースはそのまま保持されます（Emmetは値内の省略記法を展開しません）。Emmetのファジーマッチングに慣れている場合は、bxsh:0 2px 8px #0001（bxshはbox-shadowのファジー省略記法、第12回）とも書けます。

Q レスポンシブグリッドにおけるauto-fitとauto-fillの違いは何ですか？

A auto-fitは既存の列を拡張して残りのスペースを埋めます（コンテナを埋めるべきカードに適する）。auto-fillは空のトラックスペースを保持します（固定列数に適する）。このレッスンの例ではauto-fit + minmax(240px, 1fr)を使用しています：コンテナが十分に広い場合は4列表示、狭い場合は列が自動削減（小画面で1列、中画面で2列、大画面で3〜4列）。これはCSS Gridの最も簡潔なレスポンシブソリューションであり、メディアクエリ不要です。

Q スティッキーナビゲーションにおけるposition:stickyとposition:fixedの違いは何ですか？

A fixedはビューポートに相対（ドキュメントフローから除去、手動でのスペース確保が必要）。stickyはハイブリッド配置 — コンテナに相対してスクロールし、コンテナがビューポート上部に達すると「固定」されます。このレッスンの例ではposition:sticky; top:0を使用して、スクロール時に<header>をビューポート上部に固定します — ただし<header>の親コンテナがスクロールアウトすると、stickyも一緒にスクロールアウトします。fixedには親コンテナ制約がありません（常に固定）が、下のコンテンツを覆います（スペース確保にpadding-topが必要）。このレッスンではstickyを使用 — ヘッダーがbodyの直接の子であり、ネストされたスクロールコンテナがないためです。

📖 まとめ

5セクション思考チェーン：ヘッダー + ヒーロー + 機能 + 価格 + フッター — 5つのEmmet省略記法断片に分解し、110行のHTMLに連結
12の一般的なCSS省略記法：* { m0 p0 } body { ff:system-ui lh1.6 } .nav { d:f jc:sb ai:c } .card { bgc#fff bdrs12 box-shadow:0 2px 8px #0001 }など
レスポンシブグリッドの公式：grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))（メディアクエリ不要）
スティッキーナビゲーション：position:sticky; top:0; z-index:100（スクロール時にヘッダーを上部に固定）
CSSグラデーション背景：bgc:lg(135deg, #f5f7fa, #c3cfe2)（一般的なヒーローセクション効果）
このレッスンは集大成：第1〜13回 HTML + CSSデュアル省略記法の組み合わせ — 日常のフロントエンドコーディング効率を3〜5倍向上

📝 練習問題

基本（難易度：★）：Emmet HTML省略記法 + CSS省略記法を使ってシンプルなランディングページを書いてください — 5セクション（ヘッダー + ヒーロー + 機能 + 価格 + フッター）、少なくとも30行のHTML + 20行のCSS。要件：(a) HTML部分は> + * () — 少なくとも3つの演算子を使用、(b) CSS部分はm10-20 bgc#fff bdrs8 — 少なくとも3つの省略記法を使用、(c) ヒーローセクションはlinear-gradient背景を使用。
中級（難易度：★★）：このレッスンの110行の完全なランディングページをあなた自身のSaaS製品ランディングページに適応させてください — 製品名「CloudFlow」をあなたの製品に置き換え、4つの機能をコア機能に置き換え、3つの価格プラン名と価格を置き換えてください。要件：(a) 5セクションHTML構造は変更しない、(b) レスポンシブグリッド + スティッキーナビ + グラデーション背景CSSスタイルを保持、(c) 最終的なHTML + CSS行数と、同じページを手打ちした場合の行数を集計してください（通常HTMLで5倍、CSSで3倍の圧縮）。
応用（難易度：★★★）：このレッスンのランディングページを完全なSaaSマーケティングページに拡張してください — 機能の後に推薦文セクション（3件のカスタマーレビュー、各々アバター + 5つ星 + テキスト + 著者付き）を追加し、価格の後にFAQセクション（5 Q/A折りたたみパネル）を追加してください。要件：(a) 完全なページHTMLを一発で（body部分を1行のEmmet省略記法で）、(b) CSS省略記法がプロパティの90%をカバー（手打ちCSSは10行以下）、(c) レスポンシブ：モバイル — 機能単列、推薦文単列。デスクトップ — 機能4列、推薦文3列、(d) FAQはネイティブ折りたたみパネルに<details> + <summary>を使用（JS不要）。最後に「Emmet集大成レポート」を書いてください：18レッスンで得たすべてのEmmet知識 + 最も価値のあるトップ3の省略記法 + 仕事でEmmetをどのように使う予定か。

Web-Tutorial 技術チーム

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

私たちについて

Emmet: プロジェクト2 — レスポンシブランディングページ + CSS省略記法（第1〜13回の組み合わせ）

1. 学習内容

2. あるフルスタック開発者の実話

(1) 課題：5セクション + レスポンシブ + 3ブレークポイント — 手打ちで200行HTML + 100行CSS

(2) Emmet HTML + CSS デュアル省略記法による解決策

(3) メリット

3. ランディングページ構造：5セクションをEmmet演算子にマッピング

4. HTML部分 Emmet省略記法

▶ サンプル: ナビゲーションバー header>nav>a.logo{CF}+ul.menu>(li>a)*3（難易度：★）

▶ サンプル: ヒーローセクション section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline))（難易度：★★）

▶ サンプル: 完全なランディングページ（5省略記法断片 → 110行HTML）（難易度：★★★）

5. CSS部分 Emmet省略記法

▶ サンプル: レスポンシブナビゲーション nav{display:flex}（難易度：★）

▶ サンプル: 機能カード bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001（難易度：★★）

▶ サンプル: CTAボタン bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700（難易度：★★）

6. 完全な例：レスポンシブランディングページ — 110行HTML + 40行CSS

❓ よくある質問

📖 まとめ

📝 練習問題

▶ サンプル: ナビゲーションバー `header>nav>a.logo{CF}+ul.menu>(li>a)*3`（難易度：★）

▶ サンプル: ヒーローセクション `section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline))`（難易度：★★）

▶ サンプル: レスポンシブナビゲーション `nav{display:flex}`（難易度：★）

▶ サンプル: 機能カード `bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001`（難易度：★★）

▶ サンプル: CTAボタン `bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700`（難易度：★★）