{"id":47691228,"url":"https://github.com/mflocss/starter","last_synced_at":"2026-04-02T15:40:05.088Z","repository":{"id":341371439,"uuid":"1169873078","full_name":"mflocss/starter","owner":"mflocss","description":"mFLOCSS × Vite × モダン CSS — 崩れない CSS 設計のリファレンス実装","archived":false,"fork":false,"pushed_at":"2026-03-23T06:08:05.000Z","size":134,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-23T07:47:23.252Z","etag":null,"topics":["css","css-architecture","css-layers","flocss","starter-template","vite"],"latest_commit_sha":null,"homepage":"https://mflocss.dev","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mflocss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-01T11:02:51.000Z","updated_at":"2026-03-22T16:42:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mflocss/starter","commit_stats":null,"previous_names":["shunei-web/mflocss-vite-starter","mflocss/starter"],"tags_count":10,"template":true,"template_full_name":null,"purl":"pkg:github/mflocss/starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mflocss%2Fstarter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mflocss%2Fstarter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mflocss%2Fstarter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mflocss%2Fstarter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mflocss","download_url":"https://codeload.github.com/mflocss/starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mflocss%2Fstarter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31309170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-architecture","css-layers","flocss","starter-template","vite"],"created_at":"2026-04-02T15:40:04.053Z","updated_at":"2026-04-02T15:40:05.063Z","avatar_url":"https://github.com/mflocss.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LP Starter\n\nmFLOCSS で設計された LP（ランディングページ）スターターテンプレート。コンテンツを差し替えるだけで、自分の LP として使える出発点です。\n\n## 必要環境\n\n- Node.js 24 以上（Vite 8 の動作確認バージョン）\n\n## 5分で始める\n\n### 1. リポジトリをテンプレートとして使用\n\nGitHub の [Use this template] ボタンから新しいリポジトリを作成してください。\n\n### 2. クローン\n\n```bash\ngit clone https://github.com/あなたのユーザー名/あなたのリポジトリ名.git\ncd あなたのリポジトリ名\n```\n\n### 3. 依存パッケージをインストール\n\n```bash\nnpm install\n```\n\nnpm でも pnpm でも動作します。\n\n### 4. 開発サーバーを起動\n\n```bash\nnpm run dev\n```\n\nターミナルに表示された URL をブラウザで開いてください。ファイルを編集すると自動でリロードされます。\n\n## コマンド一覧\n\n| コマンド | 説明 |\n|---------|------|\n| `npm run dev` | 開発サーバー起動（HMR 有効） |\n| `npm run build` | 本番ビルド（dist/ に出力） |\n| `npm run preview` | ビルド結果のプレビュー |\n| `npm run lint:css` | Stylelint でスタイルを検査 |\n| `npm run lint:js` | ESLint でスクリプトを検査 |\n| `npm run format` | Prettier でコードを整形 |\n\n## デプロイ\n\n`npm run build` を実行し、生成された `dist/` の中身をサーバーにアップロードしてください。\n\nサブディレクトリに配置する場合は `vite.config.ts` の `base` を変更してください:\n\n```ts\nbase: '/lp/campaign/'\n```\n\n## カスタマイズの始め方\n\n1. **リセット CSS を差し替える**: `src/css/foundation/reset.css` の中身をお好みのリセット CSS に差し替え\n2. **ブランドカラーを変える**: `src/css/tokens/color.css` のカスタムプロパティを差し替え。デザインカンプの hex 値をそのまま指定できます（oklch への変換は不要）\n3. **フォントを変える**: `src/css/tokens/typography.css` を変更。Web フォントを使う場合は Tokens 層に追加\n4. **セクションを削除する**: HTML からセクションを削除 → 対応する `p-{セクション名}.css` を削除 → そのセクション専用の Component があれば一緒に削除（grep で確認） → `style.css` の import を削除\n5. **セクションを追加する**: HTML に `\u003csection\u003e` を追加 → `src/css/project/p-{セクション名}.css` を作成 → `src/css/style.css` の Project 層に import を追加\n6. **Component を追加する**: 他のページでも使い回せるパーツなら `src/css/component/c-{名前}.css` を作成 → `style.css` に import を追加\n7. **ページを追加する**: `src/{ページ名}/index.html` を作成 → `vite.config.ts` の input に追加\n8. **Contact フォームの送信先を設定する**: フォームは HTML のみで送信先は含まれていません。バックエンドの実装またはフォーム送信サービスの接続が必要です\n\n`@layer` で層間の優先順位が制御されているため、`style.css` の import 順序はスタイルの適用に影響しません。\n\n## アニメーション\n\nHTML 要素に `data-animate` 属性を付けるだけでスクロールアニメーションが有効になります。\n\n```html\n\u003ch2 data-animate=\"fade-in-slide-up\"\u003e見出し\u003c/h2\u003e\n\u003cdiv data-stagger=\"fade-in-slide-up\"\u003e子要素が順に表示\u003c/div\u003e\n```\n\n| アニメーション名 | 効果 |\n|----------------|------|\n| `fade-in` | フェードイン |\n| `fade-in-slide-up` | フェードイン + 下から上へスライド |\n| `fade-in-slide-right` | フェードイン + 左から右へスライド |\n| `scale-in` | フェードイン + 拡大 |\n\n- `prefers-reduced-motion: reduce` 環境ではアニメーション無効\n- JS 無効環境ではコンテンツが常時表示\n\n## ダークモード\n\n- OS のダークモード設定に自動追従（トグルなし）\n- Theme 層の `light-dark()` で一括管理\n- カスタマイズ: `src/css/theme/color.css` のセマンティック変数を変更\n- ライトモードに固定する場合: `src/css/theme/color.css` の `color-scheme` を `light` に、HTML の `\u003cmeta name=\"color-scheme\"\u003e` を `light` に変更\n\n## mFLOCSS の 8 層アーキテクチャ\n\nFLOCSS の 3 層（Foundation / Layout / Object）を、モダン CSS に対応させた 8 層構成です。\nCSS `@layer` で優先順位をブラウザが明示的に制御するため、層間の詳細度の事故が起きません。\n\n```\nsrc/css/\n├── tokens/       デザイントークン（色・フォント・余白等の設計変数）\n├── theme/        セマンティックカラー・ダークモード\n├── foundation/   リセット・ベーススタイル\n├── layout/       セクション・サイトレイアウト\n├── component/    汎用パーツ（ボタン・見出し等）\n├── project/      ページ固有パーツ\n├── animation/    アニメーション（reduced-motion 対応）\n└── utility/      補助クラス\n```\n\n| 層 | プレフィックス | @layer | 役割 |\n|----|-------------|--------|------|\n| Tokens | — | tokens | デザイントークン（色・フォント・余白等の設計変数） |\n| Theme | — | theme | セマンティックカラー・ダークモード |\n| Foundation | — | foundation | カスタムリセット + ベーススタイル |\n| Layout | `l-` | layout | セクション・サイトレイアウト |\n| Component | `c-` | component | 複数ページで使い回す汎用パーツ |\n| Project | `p-` | project | 特定のページ・機能に使うパーツ |\n| Animation | `data-animate` / `data-stagger` | animation | スクロールアニメーション等 |\n| Utility | `u-` | utility | 補助クラス（常に最優先で適用） |\n\n## 設計ガイド\n\nmFLOCSS の設計原則と詳細な実装ガイドは以下を参照してください。\n\n- **公式サイト**: https://mflocss.dev\n- **仕様**: https://github.com/mflocss/spec\n- **書籍（設計の詳細解説）**: https://zenn.dev/shunei/books/mflocss-design\n\n\n\n## ライセンス\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmflocss%2Fstarter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmflocss%2Fstarter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmflocss%2Fstarter/lists"}