本文へスキップ
ナビゲーションメニュー 書籍を読む

導入

はじめかた

新規導入・FLOCSS からの移行・学習目的、それぞれの読者に向けて書く。

Getting Started は 5 分、移行は三段階。

Getting Started 5 分

  1. Step 1: テンプレートから自分のリポジトリを作成

    GitHub の「Use this template」ボタンから、自分のリポジトリを作成する。

  2. Step 2: clone して起動

    作成したリポジトリを clone し、npm install の後、npm run dev。

  3. Step 3: LP の表示を確認

    ターミナルに表示された URL を開き、LP が表示されることを確認する。

  4. Step 4: カスタマイズの起点

    コード全体で CUSTOMIZE コメントを検索し、Token 層の値から段階的に差し替える。

  5. Step 5: ビルド + 公開

    npm run build。dist/ をそのまま静的ホスティングへ。

starter clone 手順

  • 必要環境

    Node.js が必要。詳細は starter の README（新しいタブで開く） を参照。

  • clone コマンド

    「Use this template」で作成した自分のリポジトリを clone する: git clone https://github.com/<your-name>/<your-repo>.git

  • ディレクトリ構造

    src/assets/css/ に各層の CSS、public/ にルートパス固定の静的ファイル、vite.config.ts にビルド設定がある。

FLOCSS からの段階移行

既存のサイトを明日いきなり全部書き換える必要はない。三つの段階に分けると、無理なく進む。

  1. 第一段階: @layer の宣言だけを足す

    既存の CSS には手をつけず、エントリポイントの先頭に @layer の先制宣言を 1 行置く。これから足すスタイルの順序が、先に確定する。

  2. 第二段階: 新しく作るパーツだけを、層に分けて書く

    既存のコードはそのままに、これから追加する機能やページから、判断テストを当てて層に書いていく。

  3. 第三段階: 既存のコードを、触る機会のあるところから層へ移す

    バグを直すついでに、その周りのスタイルを層へ寄せる。改修のたびに、少しずつ。一気に移行しない。

どの段階で止めても、壊れない

第一段階だけで止めても、既存のスタイルはそのまま動く。導入は、全か無かではない。FLOCSS からの対応は、Foundation が Foundation と Reset に分かれ、散らばっていた値が Token 層に、keyframes が Animation 層に集まる。

外部 CSS の統合やチームでの運用を含む完全版は、書籍の第 13 章と付録 C（層対応表）で扱う。

もっと詳しく

トラブルシューティング

  • よくある詰まりポイント

    @layer 宣言の順序を間違えると、意図した優先順位にならない。既存のビルド環境と併用する場合は、既存の設定を壊さない範囲で段階的に導入するのが安全。ビルド設定の変更が必要な場合は starter の vite.config.ts を参照する。

  • 質問・相談先

    X の DM（新しいタブで開く） へ。

関連リソース