mFLOCSS で設計された LP（ランディングページ）スターターテンプレート。コンテンツを差し替えるだけで、自分の LP として使える出発点です。
- Node.js 24 以上（Vite 8 の動作確認バージョン）
GitHub の [Use this template] ボタンから新しいリポジトリを作成してください。
git clone https://github.com/あなたのユーザー名/あなたのリポジトリ名.git
cd あなたのリポジトリ名npm installnpm でも pnpm でも動作します。
npm run devターミナルに表示された URL をブラウザで開いてください。ファイルを編集すると自動でリロードされます。
| コマンド | 説明 |
|---|---|
npm run dev |
開発サーバー起動（HMR 有効） |
npm run build |
本番ビルド（dist/ に出力） |
npm run preview |
ビルド結果のプレビュー |
npm run lint:css |
Stylelint でスタイルを検査 |
npm run lint:js |
ESLint でスクリプトを検査 |
npm run format |
Prettier でコードを整形 |
npm run build を実行し、生成された dist/ の中身をサーバーにアップロードしてください。
サブディレクトリに配置する場合は vite.config.ts の base を変更してください:
base: '/lp/campaign/'- リセット CSS を差し替える:
src/css/foundation/reset.cssの中身をお好みのリセット CSS に差し替え - ブランドカラーを変える:
src/css/tokens/color.cssのカスタムプロパティを差し替え。デザインカンプの hex 値をそのまま指定できます（oklch への変換は不要） - フォントを変える:
src/css/tokens/typography.cssを変更。Web フォントを使う場合は Tokens 層に追加 - セクションを削除する: HTML からセクションを削除 → 対応する
p-{セクション名}.cssを削除 → そのセクション専用の Component があれば一緒に削除（grep で確認） →style.cssの import を削除 - セクションを追加する: HTML に
<section>を追加 →src/css/project/p-{セクション名}.cssを作成 →src/css/style.cssの Project 層に import を追加 - Component を追加する: 他のページでも使い回せるパーツなら
src/css/component/c-{名前}.cssを作成 →style.cssに import を追加 - ページを追加する:
src/{ページ名}/index.htmlを作成 →vite.config.tsの input に追加 - Contact フォームの送信先を設定する: フォームは HTML のみで送信先は含まれていません。バックエンドの実装またはフォーム送信サービスの接続が必要です
@layer で層間の優先順位が制御されているため、style.css の import 順序はスタイルの適用に影響しません。
HTML 要素に data-animate 属性を付けるだけでスクロールアニメーションが有効になります。
<h2 data-animate="fade-in-slide-up">見出し</h2>
<div data-stagger="fade-in-slide-up">子要素が順に表示</div>| アニメーション名 | 効果 |
|---|---|
fade-in |
フェードイン |
fade-in-slide-up |
フェードイン + 下から上へスライド |
fade-in-slide-right |
フェードイン + 左から右へスライド |
scale-in |
フェードイン + 拡大 |
prefers-reduced-motion: reduce環境ではアニメーション無効- JS 無効環境ではコンテンツが常時表示
- OS のダークモード設定に自動追従（トグルなし）
- Theme 層の
light-dark()で一括管理 - カスタマイズ:
src/css/theme/color.cssのセマンティック変数を変更 - ライトモードに固定する場合:
src/css/theme/color.cssのcolor-schemeをlightに、HTML の<meta name="color-scheme">をlightに変更
FLOCSS の 3 層（Foundation / Layout / Object）を、モダン CSS に対応させた 8 層構成です。
CSS @layer で優先順位をブラウザが明示的に制御するため、層間の詳細度の事故が起きません。
src/css/
├── tokens/ デザイントークン（色・フォント・余白等の設計変数）
├── theme/ セマンティックカラー・ダークモード
├── foundation/ リセット・ベーススタイル
├── layout/ セクション・サイトレイアウト
├── component/ 汎用パーツ（ボタン・見出し等）
├── project/ ページ固有パーツ
├── animation/ アニメーション（reduced-motion 対応）
└── utility/ 補助クラス
| 層 | プレフィックス | @layer | 役割 |
|---|---|---|---|
| Tokens | — | tokens | デザイントークン（色・フォント・余白等の設計変数） |
| Theme | — | theme | セマンティックカラー・ダークモード |
| Foundation | — | foundation | カスタムリセット + ベーススタイル |
| Layout | l- |
layout | セクション・サイトレイアウト |
| Component | c- |
component | 複数ページで使い回す汎用パーツ |
| Project | p- |
project | 特定のページ・機能に使うパーツ |
| Animation | data-animate / data-stagger |
animation | スクロールアニメーション等 |
| Utility | u- |
utility | 補助クラス（常に最優先で適用） |
mFLOCSS の設計原則と詳細な実装ガイドは以下を参照してください。
- 公式サイト: https://mflocss.dev
- 仕様: https://github.com/mflocss/spec
- 書籍（設計の詳細解説）: https://zenn.dev/shunei/books/mflocss-design
MIT