全体像と導入方法¶

「3つの原則」をもとに、実際に構造をつくり、CSSとHTMLに反映します。
先に「大きな流れ」と「詳細フロー図」を示し、続けて各ポイントについて説明します。

このページの内容で基礎の導入が完了します。

導入の大きな流れ¶

導入の流れを分解すると、大きく3つのステップに分かれます。

（1）は、CSS分類を定義するステップです。その定義内容をもとに、ディレクトリとレイヤー構造を構築します（2）。そして、構築した内容をCSSとHTMLに反映（3）します。

このページでは、StrataCSSで標準化した（1）の定義を使い、（3）までの流れを説明します。

導入の詳細フロー図¶

以下は、前述の図の詳細版です。

中央の「概念」のレーンを基点に、左側の「ディレクトリ構造」と、右側の「レイヤー構造」を構築し、最終的にCSSとHTMLに反映する流れです。

CSS分類の概要については流れの中で説明します。
※ 詳細な定義については標準の名称と定義をご確認ください。

以下、スコープ分離の方法から順を追って説明します。

CSS管理ディレクトリの第1階層¶

まずは、GlobalとPagesスコープを、そのままディレクトリ構造に反映します。

CSSの管理ディレクトリ（ここでは styles/）の直下に、GlobalとPagesスコープ用のディレクトリを配置します。

ディレクトリ構成

📁 styles/
├─ 📁 global/     # Globalスコープ（全域用のCSSを管理）
└─ 📁 pages/      # Pagesスコープ（ページ個別のCSSを管理）

それぞれのディレクトリで、該当するCSSを管理します。

これにより、「 global/ のCSSは、必ずサイト全域に影響する」「 pages/ のCSSは、ページ別に影響する」といったように、影響範囲の一次切り分けを可視化します。

以下、GlobalとPagesを対象に、「導入の詳細フロー図」の（2）左レーンと、（3）のHTML読み込み部分について説明します。

GlobalスコープのCSS¶

Globalスコープでは、Webサイト全域に影響するCSS を管理します。
次のようなCSSが該当します。

リセット、ノーマライズ、サニタイズなどのCSS
ヘッダー、フッター、ドロワーメニューなどのCSS
ボタンやカードなどの共通部品のCSS
その他、サイト全域でグローバルに利用するCSS

CSSを次のように分類・定義します。

CSS分類	説明・用途
Base	プロジェクトの基底となるCSS（内訳は次ページで説明）
Layout	ヘッダー、フッターなどのページレイアウト要素
Components	ボタンやカードなどのサイト全域で共通利用する部品
Utilities	ヘルパーなどの単機能のCSS
Print	印刷用に上書きするCSS

Sass や PostCSS（postcss-import）などを利用して、 global.css 1枚に統合します。

ディレクトリ構成

📁 styles/
├─ 📁 global/           # Globalスコープ（全域用のCSSを管理）
└─ 📄 global.css(scss)  # 全ページ共通のCSS(global/のエントリ)

統合した global.css は、全てのHTMLページで読み込みます。

HTMLでの読み込み例

<link rel="stylesheet" href="/assets/css/global.css">

global.css のファイル名は、慣例的な style.css に変更しても問題ありません。

PagesスコープのCSS¶

Pagesスコープでは、特定のページのみに影響するCSS を管理します。
次のようなCSSが該当します。

トップページのメインビジュアル
お問い合わせページのフォーム
製品紹介ページのスタイル

これらはつまり、各ページのコンテンツのブロックです。

PagesスコープのCSSは、次のように分類します。

CSS分類	説明	用途
Pages	ページ個別用のCSS	ページ用
(Parts)	異なるページ間で再利用するCSS	部品用

Pages はスコープ名であり、同時にCSS分類名でもあります。
スコープ（どこに効くか）と分類（何の役割か）は別の軸で、Pages は両方に同じ名前で登場します。これは、意図的に名前を揃えたものです。Global はスコープの可視化だけを担い、分類軸には現れません。

ページごとのCSSファイルを作成して、 global.css の後に読み込みます。

例1）トップページ

<link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/css/pages/home.css">

例2）商品紹介ページ

<link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/css/pages/products.css">

これにより、pages/ 内で管理するCSSは、読み込んだHTMLページのみに影響します。 global.css を先に読み込む順序は、後述する @layer の設定を正しく反映するための前提条件です。

Parts の用途について

(Parts) は、Pagesに読み込んで利用する、パーシャルファイル管理用の概念です。

例えば、大きなものではメールフォームやサービス比較表、小さなものでは特定のページを横断して登場する見出しやボタンなどです。プロジェクトにより必要性や用法は様々です。

命名は Parts としていますが、意味としては Global の Componentsと同義です。
Global と Pages はスコープが異なるため、違和感がなければ Components に変更しても問題ありません。
導入時には、どのカバレッジでいつGlobalに昇格させるか、などの取り決めが必要になるかもしれません。

GlobalとPagesスコープの分離¶

GlobalスコープとPagesスコープは、互いを横断したCSSの取り込みを禁止します。
次のように、Pages ⇔ Global間のファイル取り込みはNGです。

❌️ NG例1 ｜ GlobalからPagesのファイルを取り込んでいる

// global/components/_index.scss
@use 'pages/home/main-visual';  // 禁止

❌️ NG例2 ｜ PagesからGlobalのファイルを取り込んでいる

// pages/home.scss
@use 'global/components/btn';  // 禁止

この規則により、2つのスコープが互いに影響しないことを担保します。

関数・Mixin用のディレクトリ（補助用）¶

Sass (SCSS) を利用する場合、もしくは将来 CSSカスタム関数とミックスインが実用レベルになった場合など、全域で利用する機能や設定は abstracts/ で管理します。

abstracts/ の追加

📁 styles/
├─ 📁 abstracts/        # GlobalとPagesで共通利用する関数やMixinなどの管理
├─ 📁 global/           # Globalスコープ（全域用のCSSを管理）
├─ 📁 pages/            # Pagesスコープ（ページ個別のCSSを管理）
└─ 📄 global.css(scss)  # 全ページ共通のCSS(global/のエントリ)

abstracts/ は、出力を持たない補助的なディレクトリであり、GlobalとPagesのスコープの双方から使うことになります。

レイヤー構造¶

次に、導入の詳細フロー図の（2）の右レーンについて説明します。

GlobalスコープとPagesスコープのCSS分類を統合します。
そして、概念的なレイヤー構造をつくります。

階層順	分類（レイヤー）	説明	スコープ
1	Base	プロジェクトの基底となるCSS	Global
2	Layout	ヘッダー、フッターなどのページレイアウト要素	Global
3	Components	ボタンやカードなどの共通部品	Global
4	Pages	ページ個別のCSS	Pages
5	Utilities	単機能のCSS	Global
6	Print	印刷用に上書きするCSS	Global

番号が小さいものが下位レイヤー、大きいものが上位レイヤーです。
Globalスコープで定義した分類に、PagesスコープのPages（4）が割り込んでいる形です。

上位レイヤーから下位レイヤーのCSSを上書きできます。

概念的なレイヤーには、スコープの概念は影響しません。
上記の表では、由来が分かるようスコープを添えていますが、実際にはそれぞれの名前を「階層を構成する部品」として取り出し、別の軸で組み立てるような感覚です。

`@layer` の設定¶

最後に、前述の概念的なレイヤーを、 @layer を用いて仕様レベルに落とし込みます。

導入の詳細フロー図の（3）の統合部分です。

Globalスコープの `@layer` 設定方法¶

以下を global.css に記述することで、全てのページに @layer のルールを適用します。

@layerの宣言

@layer base , layout , components , pages , utilities , print;

続けて、対応する各ディレクトリのCSSを上記の @layer に所属させます。

以下は記述例です。
各ディレクトリで管理しているファイルを、まとめて目的の @layer にセットしています。
CSS / PostCSS（postcss-import）と、Sass（SCSS）の両方の例を記載します。

CSS・PostCSSSCSS

CSS｜global.css｜※ネイティブCSS共通

@charset "utf-8";

/* レイヤーの宣言
-------------------------------------------------- */
@layer base , layout , components , pages , utilities , print;

/* 各レイヤーの取り込み
-------------------------------------------------- */
@import "./global/base/index.css" layer(base);
@import "./global/layout/index.css" layer(layout);
@import "./global/components/index.css" layer(components);
@import "./global/utilities/index.css" layer(utilities);
@import "./global/print/index.css" layer(print);

※ postcss-import 利用時は、@import した場所に、読み込んだファイルのCSSがインライン展開されることになります。

SCSS｜global.scss

@charset "utf-8";

@use "sass:meta";

/* レイヤーの宣言
-------------------------------------------------- */
@layer base , layout , components , pages , utilities , print;

/* 各レイヤーの `_index.scss` を読み込み
-------------------------------------------------- */
@layer base {
    @include meta.load-css("./global/base/");
}
@layer layout {
    @include meta.load-css("./global/layout/");
}
@layer components {
    @include meta.load-css("./global/components/");
}
@layer utilities {
    @include meta.load-css("./global/utilities/");
}
@layer print {
    @include meta.load-css("./global/print/");
}

SCSSの meta.load-css について

Sassの利用時に、各ディレクトリのSCSSファイルを統合した上でまとめて @layer を適用するには、@include meta.load-css( … ); を利用します。

@use を @layer でラップするとコンパイルエラーになります。

meta.load-css の仕様や制限については、「meta.load-cssの利用」を参照してください。

Pagesスコープの `@layer` 設定方法¶

PagesレイヤーのCSSは、@layer pages { } でラップします。

例）製品紹介 (products)のCSS

@charset "utf-8";

@layer pages {
    .features { ... }
    .lineup { ... }
    .explanation { ... }
}

Globalは一度の記述で @layer を指定できましたが、Pagesはファイルが異なるためそれぞれ個別に @layer を記述する必要があります。

Parts を利用する場合は、次のように、Pagesのファイルから読み込みます。

CSS・PostCSSSCSS

CSS｜Partsの読み込み例｜※ネイティブCSS共通

@charset "utf-8";

/* Parts管理のCSSを取り込む */
@import "./_parts/form.css" layer(pages);

/* そのページのCSSや取り込んだPartsの上書き用CSSを記述 */
@layer pages {
    .features { ... }
    .lineup { ... }
    .explanation { ... }
}

※ postcss-import 利用時は、@import した場所に、読み込んだファイルのCSSがインライン展開されることになります。

SCSS｜Partsの読み込み例

@charset "utf-8";

@use "sass:meta";

// Parts管理のCSSを取り込む
@layer pages {
    @include meta.load-css("./_parts/form");
}

// そのページのCSSや取り込んだPartsの上書き用CSSを記述
@layer pages {
    .features { ... }
    .lineup { ... }
    .explanation { ... }
}

※ @use を利用する場合は、Parts 側のパーシャルファイルに @layer を記述するなど、工夫が必要です。

これにより、 global.css で宣言した通りの @layer の構造が完成します。

仕様の詳細については、レイヤーの順序は「最初の宣言」で確定するを参照してください。

補足説明¶

スコープ分離が解決すること¶

スコープ分離（原則1）による「CSSのファイル分割」と「ページ個別の読み込み」は、命名の衝突を避けるために従来から制作現場で行われてきた手法です。

また、全てのCSSを1枚にまとめると、各ページに、そのページでは使わないCSSまで配信され、Google PageSpeed Insights で未使用CSSの指摘が入りやすくなります。
スコープ分離の原則は、これらも踏まえた上で設けたものです。

手法の背景

デザインが先行するWebサイト制作（StrataCSSの対象プロジェクト）においては、コンテンツを魅力的に見せるために、ページによってデザインパターンや表現を変える（もしくは後で追加される）ことがあります。

一方、CSSの実装では、グローバル空間において「スタイルの共通化も個別化も必要だが、命名の衝突は回避しなければならない」との要件が発生します。

この状況下では、プロジェクトが大きくなればなるほど命名の衝突回避とコード管理が煩雑になります。「スコープ分離」は、この問題を合理的に解決しようとした先人の知恵と言えます。

`@layer` 導入時の課題について¶

@layer の導入は、CSSプロパティの衝突を仕様レベルで防ぎやすくなる反面、使用にはいくつかの注意が必要になります。
これはStrataCSSに限った話ではありませんが、初めての導入時にはご注意ください。

詳細については、「@layer導入時の注意点」をご確認ください。

次のステップ¶

ここまでで、基礎の導入は完了です。
次は、実際のプロジェクトでどのようにスケールさせるかについて、StrataCSSの標準設定を中心に説明します。

標準化とスケーリング

全体像と導入方法¶

導入の大きな流れ¶

導入の詳細フロー図¶

CSS管理ディレクトリの第1階層¶

GlobalスコープのCSS¶

PagesスコープのCSS¶

GlobalとPagesスコープの分離¶

関数・Mixin用のディレクトリ（補助用）¶

レイヤー構造¶

@layer の設定¶

Globalスコープの @layer 設定方法¶

Pagesスコープの @layer 設定方法¶

補足説明¶

スコープ分離が解決すること¶

@layer 導入時の課題について¶

次のステップ¶

`@layer` の設定¶

Globalスコープの `@layer` 設定方法¶

Pagesスコープの `@layer` 設定方法¶

`@layer` 導入時の課題について¶