https://github.com/mflocss/starter
mFLOCSS × Vite × モダン CSS — 崩れない CSS 設計のリファレンス実装
https://github.com/mflocss/starter
css css-architecture css-layers flocss starter-template vite
Last synced: 2 months ago
JSON representation
mFLOCSS × Vite × モダン CSS — 崩れない CSS 設計のリファレンス実装
- Host: GitHub
- URL: https://github.com/mflocss/starter
- Owner: mflocss
- License: mit
- Created: 2026-03-01T11:02:51.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-23T06:08:05.000Z (3 months ago)
- Last Synced: 2026-03-23T07:47:23.252Z (3 months ago)
- Topics: css, css-architecture, css-layers, flocss, starter-template, vite
- Language: HTML
- Homepage: https://mflocss.dev
- Size: 131 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LP Starter
mFLOCSS で設計された LP（ランディングページ）スターターテンプレート。コンテンツを差し替えるだけで、自分の LP として使える出発点です。
## 必要環境
- Node.js 24 以上（Vite 8 の動作確認バージョン）
## 5分で始める
### 1. リポジトリをテンプレートとして使用
GitHub の [Use this template] ボタンから新しいリポジトリを作成してください。
### 2. クローン
```bash
git clone https://github.com/あなたのユーザー名/あなたのリポジトリ名.git
cd あなたのリポジトリ名
```
### 3. 依存パッケージをインストール
```bash
npm install
```
npm でも pnpm でも動作します。
### 4. 開発サーバーを起動
```bash
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` を変更してください:
```ts
base: '/lp/campaign/'
```
## カスタマイズの始め方
1. **リセット CSS を差し替える**: `src/css/foundation/reset.css` の中身をお好みのリセット CSS に差し替え
2. **ブランドカラーを変える**: `src/css/tokens/color.css` のカスタムプロパティを差し替え。デザインカンプの hex 値をそのまま指定できます（oklch への変換は不要）
3. **フォントを変える**: `src/css/tokens/typography.css` を変更。Web フォントを使う場合は Tokens 層に追加
4. **セクションを削除する**: HTML からセクションを削除 → 対応する `p-{セクション名}.css` を削除 → そのセクション専用の Component があれば一緒に削除（grep で確認） → `style.css` の import を削除
5. **セクションを追加する**: HTML に `` を追加 → `src/css/project/p-{セクション名}.css` を作成 → `src/css/style.css` の Project 層に import を追加
6. **Component を追加する**: 他のページでも使い回せるパーツなら `src/css/component/c-{名前}.css` を作成 → `style.css` に import を追加
7. **ページを追加する**: `src/{ページ名}/index.html` を作成 → `vite.config.ts` の input に追加
8. **Contact フォームの送信先を設定する**: フォームは HTML のみで送信先は含まれていません。バックエンドの実装またはフォーム送信サービスの接続が必要です
`@layer` で層間の優先順位が制御されているため、`style.css` の import 順序はスタイルの適用に影響しません。
## アニメーション
HTML 要素に `data-animate` 属性を付けるだけでスクロールアニメーションが有効になります。
```html
見出し
子要素が順に表示
```
| アニメーション名 | 効果 |
|----------------|------|
| `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 の `` を `light` に変更
## mFLOCSS の 8 層アーキテクチャ
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