Master CSS をインストールする

プロジェクトに合う設定方法を選んでください。インテグレーションは Master CSS をフレームワークやビルドツールに接続し、CLI はバンドラーのないプロジェクトにスタイルシートを生成します。CDN は既定のプリセットを使うプレーン HTML の設定を提供します。

#インテグレーション

既存のアプリにはインテグレーションを使います。既定は静的レンダリングで、ビルドがソースから完全なクラス名を見つけ、ブラウザーにスタイルシートを配信します。フレームワークを選んで設定ファイルと手順を確認するか、以下の自動インストーラーを使ってください。

ランタイムやサーバーレンダリングの設定は、インテグレーションごとのレンダリング対応を参照してください。

#始める前に

Node.js 24 を使い、package.json があるアプリのルートディレクトリーを開きます。インストーラーは既存プロジェクトを更新するもので、フレームワークのスターターは作成しません。アプリには動作する開発コマンドがすでに必要です。

#パッケージのバージョン

このドキュメントに示すバージョンを、インストーラー、インテグレーション、その他の Master CSS パッケージに使用してください。手動でインストールまたは更新する場合も、これらのパッケージのバージョンをそろえます。別の npm タグでパッケージが存在しても、この設定との互換性は確認できません。

ローカルでランタイムを評価するには、ビルド済みチェックアウトを使う CDN の例を使ってください。スクリプト、コンパイル済みプログラム、ベーススタイルシートは同じビルドのものをそろえます。

手動設定やフレームワーク固有のファイルは、インテグレーションガイドを参照してください。対応するビルドインテグレーションがない場合は、単独の CLI 設定に従います。

1. #Master CSS を追加する

   プロジェクトのルートでインストーラーを実行します。フレームワークとパッケージマネージャーを検出し、設定ファイルを更新して、インストーラーと同じバージョンの Master CSS パッケージをインストールします。

   npm create @master/css@2.0.0 -- --yes

   設定内容を確認・制限する

   --yes は推奨の既定値を受け入れます。コアのインテグレーション、ESLint 設定、MCP パッケージ、AGENTS.md の Master CSS のガイダンスが含まれます。表示される MCP 登録やスキルインストールのコマンドは、コーディングツール用の任意の次の手順であり、インストーラー自身は実行しません。

   --dry-run を追加すると、プロジェクトのファイルを変更せず、予定する依存関係もインストールせずに計画を確認できます：

   npm create @master/css@2.0.0 -- --yes --dry-run

   フレームワークのコア設定だけが必要なら、インストールコマンドに --minimal を追加します。ESLint、MCP、エージェント向けガイダンスの追加を省きます。依存関係を自分でインストールしたい場合は --no-install を追加してください。

2. #スタイルシートの接続を確認する

   設定の概要を読み、表示されたフレームワーク固有の手順を完了します。追加の設定コマンドや独立した CSS 生成プロセスが必要なインテグレーションもあります。手順はフレームワークのガイドを参照してください。

   インストーラーが作成または更新したスタイルシートを、アプリが読み込んでいるか確認します。そのスタイルシートには次が必要です：

   @import '@master/css';

   たとえばプレーン Vite アプリは、通常 src/main.js から ./style.css をインポートします。CSS のファイル名とインポート位置はフレームワークにより異なります。パッケージをインストールするだけでは、ページにスタイルシートは読み込まれません。

   

   インテグレーションはソースからクラス名、スタイルシートから定義を読み取ります。生成した CSS をページに届けるには、アプリがそのスタイルシートを読み込む必要があります。

   テキストによる説明

   1. ソース. p-md のような完全なクラスが、インテグレーションの走査するソースファイルに現れます。アプリのスタイルシートは @master/css をインポートし、プリセットの定義を供給します。
   2. ビルドインテグレーション. 二つのソースを設定済みインテグレーションに渡し、認識したクラス用の CSS を生成します。インストーラーが接続を設定し、以後の開発とビルドはインテグレーションが担います。
   3. ページ. アプリがスタイルシートを読み込み、生成 CSS をブラウザーに届けます。プリセットでは p-md のルールが 1rem のパディングを適用します。パッケージのインストールだけでは、スタイルシートのインポートは設定されません。

3. #Master CSS を使い始める

   npm run dev など、アプリの既存コマンドで開発サーバーを起動または再起動します。次のマークアップを表示されるページかコンポーネントに置いてください。JSX では class の代わりに className を使います。

   <p class="w-fit mx-auto my(0) p-md r-md b(1) b-solid b-line-divider bg-surface-raised text-sm fg-text-strong">Hello World</p>

   生成された CSS

   @layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-md: 1rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .my\(0\) {    margin-block: calc(0 * 1px)  }  .mx-auto {    margin-inline: auto  }  .p-md {    padding: var(--spacing-md)  }  .w-fit {    width: fit-content  }}

   プリセットでは、p-md がテキストの四辺に 1rem のパディングを加えます。

   境界線のある小さな面の中にテキストが表示されるはずです。p-md を p-lg に変えて保存すると、四辺のパディングが 1rem から 1.5rem に増えます。これにより、インストーラーの完了だけでなく、ソースの変更がページまで届くことを確認できます。

インストールの成功は最初の一歩です。クラスの変更で、検出、生成、スタイルシート配信をまとめて確認できます。

テキストによる説明

ソースの p-md を p-lg に変更すると、コンパイルされたパディングが変わり、ブラウザーのボックスが目に見えて大きくなる。

#CDN

CDN インストールは、ビルドツールなしでブラウザー内で Master CSS を実行します。プレーン HTML の試作に適しますが、生成スタイルは JavaScript に依存します。JavaScript なしでスタイルが必要なページには、インテグレーションか CLI を使ってください。

ランタイムのスクリプト、コンパイル済みプログラム、プリセットのスタイルシートは、同じ Master CSS バージョンのものをそろえます。このテンプレートは、バージョンをそろえた URL を使います。インテグレーションと CLI にも同じパッケージのバージョン要件が適用されます。

このテンプレートを index.html として保存します：

<!DOCTYPE html><html lang="en" hidden><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="preload" as="style" href="https://cdn.master.co/css-preset@2.0.0/src/base.css">  <link rel="preload" as="script" href="https://cdn.master.co/css-runtime@2.0.0">  <link rel="preload" as="fetch" crossorigin href="https://cdn.jsdelivr.net/npm/@master/css-runtime@2.0.0/dist/default-program.bin">  <link rel="stylesheet" href="https://cdn.master.co/css-preset@2.0.0/src/base.css">  <script src="https://cdn.master.co/css-runtime@2.0.0"></script></head><body>  <h1 class="m-2xl italic font-5xl font-heavy fg-text-strong">Hello World</h1></body></html>

見出しには 3rem のマージン、2.5rem の斜体、ウェイト 900、プリセットの強いテキスト色が適用されるはずです。font-5xl を font-6xl に変えると、文字が 3rem になります。ランタイムは JavaScript によるクラス変更も監視します。

スタイルシートがベースルールとレイヤー順序を供給します。クラシックスクリプトは自動で起動して対応するコンパイル済みプログラムを読み込み、ドキュメントの解析完了後に初期クラスを生成します。ルールの準備ができると hidden を削除します。三つのプリロードリンクは、スタイルシート、スクリプト、プログラムのリクエストを早く開始します。ランタイムが取得するのはモジュールではなくデータなので、バイナリーには as="fetch" crossorigin を使います。Master CDN のリダイレクトには CORS ヘッダーがないため、バイナリーのプリロードとランタイムの取得には、jsDelivr の宛先を直接指定します。CDN の設定は既定のプリセットを使うため、独自の @theme や @utility 定義はインテグレーションでコンパイルしてください。

hidden は任意で、スタイルのない初回描画を防ぎます。処理済みのプログラム読み込みエラーや、ランタイムの三秒の起動タイムアウトでは内容を表示します。ただし JavaScript が無効、またはスクリプト自体をダウンロードできない場合、属性を削除できません。その場合にも読める必要があるなら、hidden を省くか静的 CSS を配信してください。

Content Security Policy では、スクリプト、スタイルシートの読み込み、プログラムの取得（connect-src）について CDN とリダイレクト先の jsDelivr を許可し、ランタイムが生成するスタイルシートも許可します。Wasm は取得しません。読み込みとハイドレーションの動作はランタイムレンダリングを参照してください。

#CLI

バンドラーを追加せずに HTML から静的スタイルシートを生成します。CLI が完全なクラス名を走査して CSS を書き出し、通常のスタイルシートリンクで読み込みます。対応するフレームワークのインテグレーションがないプロジェクトでは、この設定を使ってください。

1. #Master CSS をインストールする

   Master CSS の CLI を開発依存関係としてインストールします。

   npm install -D @master/css-cli@2.0.0

2. #CSS エントリーを作成する

   既定の Master CSS エントリーをインポートするスタイルシートを作成します。

   main.css

   @import "@master/css";

3. #ビルドコマンドを実行する

   コマンドを実行してソースを走査し、master.css を書き出します。

   npx @master/css-cli generate "index.html" --output master.css --watch

4. #生成したスタイルシートを読み込む

   以下のドキュメントを index.html として保存します。監視プロセスがクラス名から master.css を生成します。ディレクトリーを配信してページを開くと、スタイル付きの段落を確認できます。

   index.html

   <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="./master.css"> </head><body>  <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello World</p></body></html>

   ニュートラルなサーフェス、細い枠線、小さな角丸、各辺に 1rem の内側余白を持つ例です。

#デプロイ用にビルドする

監視コマンドは動き続け、選択したソースが変わると出力を更新します。本番ビルドでは --watch を省き、出力を書いて終了するようにします：

npx @master/css-cli generate "index.html" --output master.css

index.html、master.css、生成スタイルシートが参照する隣接の CSS アセットをデプロイします。相対パスを保持してください。master.css だけをコピーすると、インポートしたスタイルが欠ける場合があります。新しいビルドの公開時は、生成したアセット一式をまとめて扱います。

デプロイしたページを読み込み、すべてのスタイルシートのリクエストが成功するか確認します。JavaScript を無効にしても、段落の生成されたパディング、境界線、面の色が保たれるはずです。通常のアプリ範囲外のソースを含める方法は、クラス名の走査で説明しています。

#スタイルが表示されない場合

編集したマークアップがページにレンダリングされ、アプリのスタイルシートが読み込まれるか確認します。次に、ビルドインテグレーションが有効で、そのソースファイルを走査するか確認してください。p-lg のような完全なクラス名を記述します。p-${size} のように断片から組み立てると、静的走査では最終的なクラスを認識できません。

インストーラーが未認識のフレームワークや不完全な設定を報告した場合は、対応するインテグレーションガイドか CLI ガイドに従ってください。通常のアプリ範囲外のファイルは、クラス名の走査を参照します。

間隔の変更が動いたら、構文チュートリアルに進み、操作状態とレスポンシブ条件を備えたカードを作ります。