feat: mFLOCSS starter v1.0 リファレンス実装#83
Open
shunei-web wants to merge 300 commits into
Open
Conversation
shunei-web
changed the title
Collaborator
Author
ブラウザ確認結果（v1.2 AR 修正後）2026-03-27 実施。Animation 層の @Keyframes 統一後の動作確認。
スクリーンショット: /tmp/starter-pc-after-scroll.png, starter-sp-full.png, starter-dark-full.png, starter-hover-cta.png, starter-faq-open.png（ローカル） |
Collaborator
Author
しゅんえいチェック指摘対応（ドロワー再設計）変更内容
確認済み
|
- HTML 4ファイル: tokens/color.css → token/color-primitive.css - README: ファイル構成図・色の変え方・ダークモード無効化の手順を新構成に更新 - README: spec バージョン番号の参照を削除 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
token 層以外のハードコード px 値を calc(N * 1px) に統一。 デザイナーの指定値（数値）と単位を分離し、コードベース全体で 一貫したパターンを維持。 - p-hero: 720px → var(--content-width-narrow)、lead font-size をトークン参照に - p-cta, p-contact: max-inline-size を calc 形式に - component: border, translate, サイズ指定を calc 形式に - foundation: outline を calc 形式に - animation: translate オフセットを calc 形式に 残存する直値は CSS 仕様上の制約（@media 閾値、@Property initial-value、 u-visually-hidden の技術的固定値）のみ。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This reverts commit e749e89.
px 値は直書き（48px）、rem 値は calc(N * var(--px)) で統一。 calc(N * 1px) は冗長なため直書きに戻す。 - token/radius, shadow, structure: calc(N * 1px) → Npx - p-hero: 720px → var(--content-width-narrow) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
カスタマイズ頻度の高い直値をトークンに昇格。 - --size-tap-target: 44px（WCAG タップサイズ） - --size-icon-area: 48px（アイコンボタン・アバター共通） - --border-width: 1px（全 border 統一） - --focus-ring-width: 2px / --focus-ring-offset: 2px（a11y 調整用） - 消費側を全てトークン参照に更新（8ファイル） Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
マジックナンバーを --_ プレフィックスのプライベート変数に昇格。 名前で意図が伝わり、コンポーネント内で一括変更可能。 - c-hamburger: --_line-width, --_line-height, --_line-gap, --_line-radius - c-button: --_hover-lift - c-blockquote: --_border-width - c-back-to-top: --_icon-size - p-header: --_blur - p-hero: --_media-max - p-cta: --_title-max - p-contact: --_form-max, --_textarea-min - fade-in-slide-up: --_slide-offset（fallback 付き） - style.css コメント修正（Design → Token） Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- clamp() 内の rem 直値を calc(N * var(--px)) に統一（5箇所） px 数値が見えるため、デザイナーの意図が即座に読み取れる - --duration-fast: 0.2s / --duration-normal: 0.3s をトークン化 transition の全消費箇所（10箇所）をトークン参照に更新 - animation 層の 0.6s / 0.8s は固有値として維持 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
流体タイポグラフィの clamp() 定義を token/typography.css に集約。 消費側は var() のみ。フォントサイズの設計変更が1ファイルで完結。 - --font-size-h1/h2/h3: 見出し（min/max ペアから完全 clamp に変更） - --font-size-lead: リードテキスト（16-18px） - --font-size-button-lg: 大ボタン（16-18px） - --font-size-logo: ロゴ（20-24px） - --font-size-nav-lg: ドロワーリンク（18-20px） - --font-size-display: 数値強調（40-56px） - base.css: h1-h3 の clamp + --_ 中間変数を var() に簡素化 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
README: - --px ヘルパーと余白・文字サイズの変え方セクション追加 - ブレークポイント 768px の検索置換ガイド追加 - property.css の役割説明追記 - Theme → token 層の用語修正 CODING_GUIDE.md: - レイヤー判断フロー: Variable → Token + Reset 追加 - --_ プライベート変数の規約説明を追加 CSS: - p-numbers line-height: 1.2 → --_line-height - p-footer line-height: 2 → --_line-height Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
全トークンファイルが 1 カテゴリ 1 ファイルに統一。 パレット変数（--_）とセマンティック変数を同一ファイル内で管理。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
AR サイクル3: - form.css: select の padding を --_arrow-space に変数化 - typography.css: ウェイトに CUSTOMIZE マーカー追加 - p-privacy: --_body-max を px に統一（コンテンツ幅制約は px） CODING_GUIDE.md: - コミットメッセージに prefix テーブル・具体例・ルールを追加 - プレフィックス例を実在するクラスに修正 - Animation の a- プレフィックスを削除（data-animate 属性方式） - ファイル追加手順を @import layer() 形式に修正 - レイヤー判断フローの説明を現状に合わせて修正 - rem/px 使い分け基準を追加 README: - localhost:5173 → ターミナル表示 URL に修正 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
旧デザイン（葉脈パターン）が不適切な見え方になる問題を修正。 シンプルな円+茎のモチーフに変更し、favicon-touchicon-generator で favicon.ico, favicon.svg, apple-touch-icon.png を再生成。 OGP を ogp.svg → ogp.png に変換（SNS は SVG 非対応）。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ビルドパイプラインでハッシュ付き URL を生成し、 ブラウザキャッシュ問題を回避。 - public/images/ → src/images/ に移動 - HTML の画像パスを絶対（/images/）→ 相対（./images/）に変更 - vite.config: assetsInlineLimit: 0 で SVG のインライン化を抑止 public/ にはルートパス固定が必要なファイルのみ残す （favicon, apple-touch-icon, ogp）。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
リファレンス実装として実運用と同じ PNG 形式で提供。 - hero-main: 1600x800（表示 800x400） - feature-*: 960x640（表示 480x320） - avatar-*: 96x96（表示 48x48） SVG はアイコン（c-icon 内のインライン SVG）と favicon にのみ使用。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1アイコン1ファイルで管理しやすく、HTML の重複を排除。 currentColor による色継承は use href でも有効。 - src/images/icons/ に arrow-right, chevron-down, chevron-up を配置 - 全4ページのインライン SVG を <use href="...#icon"/> に置換 - サブディレクトリの HTML は ../ パスで参照 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ページ（HTML）とアセットの境界を明確化。 - src/css/ → src/assets/css/ - src/scripts/ → src/assets/scripts/ - src/images/ → src/assets/images/ - HTML 4ファイルのパス参照を更新 - README ファイル構成図を更新 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
:has(+ :required) は直後兄弟のみ対象のため、legend と input の間に div が挟まる fieldset 構造では機能しなかった。 :has(~ * :required) で子孫要素の required を検出するセレクタを追加。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
dialog 要素の UA スタイルに width: fit-content が含まれるため、 inset-inline: 0 だけでは幅が広がらなかった。 inline-size: 100% を追加して全幅表示を保証。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Vite 7+ で Rolldown がデフォルトバンドラーになったため、 正式な設定名に更新。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
vite.config.ts の rolldownOptions.input の変更手順を含む。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
README = 使い方ガイド（作業フロー順）: - クイックスタート → カスタマイズ → 構造の変更 → ビルド → リファレンス CODING_GUIDE = コーディングルール: - レイヤー構成（Component 条件、@container vs @media を移動） - 命名規則 - カスタムプロパティ - ファイル追加手順 - コミットメッセージ Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
テンプレートリポジトリのため、ユーザーの npm install 時に 最新バージョンで package-lock.json が生成される。 pnpm-lock.yaml / package-lock.json / yarn.lock を除外。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
手書きの近似値を正確なリニア補間に修正。 公式: preferred = (max - min) / (1440 - 400) * 100vi + intercept Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
## a11y（最優先） - ドロワー Escape キー閉じ実装（show() は自動閉じしないため手動処理） - ドロワー フォーカス管理（開時→ドロワー内、閉時→ハンバーガー復帰） - inert 適用範囲を nav/main/footer + スキップリンク/ロゴに拡大 - ドロワー/ハンバーガー/アコーディオン transition に prefers-reduced-motion ガード - aria-label を「メニュー」に統一（aria-expanded に状態表現を委ねる） - header#top に tabindex="-1" 追加（Back to Top アンカーのフォーカス移動対応） - フォーム HTML 簡素化（role="alert" + aria-describedby 削除、ネイティブバリデーションのみ） - Back to Top href="#" → href="#top" に変更（履歴汚染防止） - select に aria-describedby 追加（一貫性）→ フォーム簡素化で統合 ## CSS 設計 - c-section-heading の margin-block-end を削除、Project 層に移動（Portability 改善） - margin-block-end → margin-block-start 統一（13箇所。後から来る要素が間隔を持つ方針） - p-privacy__body 内の散文要素も margin-block-start に統一 - 空ルールセットのコメントを「スタイルなし（HTML クラスとの対応を維持）」に統一 - CUSTOMIZE マーカーをトークンファイルに統一付与（z-index, ease 追加） - --_ プレフィックスコメントを全使用ファイルに統一配置 ## ドキュメント - CODING_GUIDE: 流体タイポグラフィ計算式、空のルールセット方針を追加 - README: @Property を使用技術リストから削除、text-spacing-trim 未対応注記追加 - style.css: 技術リストを README 参照に変更 - shadow.css: 使用例コメント追加 ## tooling - package.json: npm 統一（pnpm キー削除）、lint:css/lint:js に --fix 追加 - thanks/index.html: canonical 追加 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Animation 層（2ガード）と Component/Project 層（1ガード）の 違いと理由をテーブルで明示。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
書籍ch5で説明している1ガードパターンをリファレンス実装に反映。 機能的トランジションのアクセシビリティ対応。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
#178) (#180) - 公開 API を `--l-section-padding-min/max` に改名 - Block 冒頭に private 変数（`--_padding-min/max`）を分離し fallback 付き代入 - `padding-block` は private 変数のみ参照 - p-numbers.css: `--section-padding-min/max` → `--l-section-padding-min/max` - p-cta.css: 同上 - p-problem.css: 同上 - p-faq.css: プロパティ順序修正（gap → max-inline-size の recess-order 整合） - spec §7 公開 API 命名 `--{対象}-{名前}` から `l-section` を対象とした形式 - 現行 spec §7 例（`--section-padding`）と一時的に乖離するが、 Task #21（mflocss-spec-lead）で spec/agent-reference 側の更新が進行中 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…revert（spec L695 準拠） (#181) PR #180 で `--l-section-padding-min/max` に変更した公開 API 名を `--section-padding-min/max` に戻す。 spec §6 L695 「公開 API は Block 名からプレフィックス除外」原則違反のため。 - l-section.css: コメント + var() 参照を修正 - p-cta.css / p-numbers.css / p-problem.css: override 変数名を修正 - Block 冒頭 --_padding-min/max の private alias 構造は維持 修正前 grep `l-section-padding`: 10件 / 修正後: 0件 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
… 削除 (#182) (#183) * docs(starter): c-prose コメント記法を c-overlay 形式（分離形）に統一 + AGENT_GUIDE URL 削除 (#182) - 公開 API ブロックを冒頭に移動（c-overlay 標準分離形に合わせる） - 説明コメントを分離形の複数行コメントに変更（文末句点、`*` 始まり） - AGENT_GUIDE ドラフトブランチ URL を削除（リンク切れリスク排除） - 代替として「spec §5.4 / agent-reference S2-4 参照」の一般表記に変更 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(starter): c-prose コメント spec 参照を §5.4(Layout) → §5.5(Component) に修正 プロンプト指示の誤り（spec §5.4 は Layout 層の定義であり c-prose とは無関係）を 自律補正。c-prose は Component 層（spec §5.5）の子孫セレクタ CMS 例外。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(starter): c-prose コメントから誤 spec §5.5 参照を削除（AR C1 対応） AR C1 審判で Critical 検出: - spec §5.5 には子孫セレクタ許容の規則が存在しない - c-overlay の DEVIATION コメントが実在する §5.5 SHOULD NOT を参照するのとは異なり、 c-prose の場合は spec 上の禁止規則が存在しないため §5.5 引用は誤情報 - 根拠は agent-reference S2-4 のみ → spec 参照部分を削除 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- src/assets/css/project/p-not-found.css → p-404.css（git mv）
- 内部クラス参照置換: .p-not-found / .p-not-found__{inner,lead,actions,cta} → .p-404 / .p-404__{...}
- src/assets/css/style.css の @import パス更新
- src/404.html の class 属性 6 箇所更新
改名理由（しゅんえい承認 2026-04-30）:
- WP テンプレート階層 404.php との対応で直感的
- HTTP ステータスコード 404 ベースの命名で実装者にとって分かりやすい
- mflocss/wordpress-starter の p-404.css と命名統一（リファレンス実装の一貫性）
検証:
- src/ 内 p-not-found grep 0 件（変更前 12 件 → 変更後 0 件）
- pnpm lint:css / lint:html / vite build 全 pass
- dist/ ビルド成果物に p-404 が正しく出力（p-not-found 残存ゼロ）
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Layout / Component / Project / Animation / Utility の 5 層コメントに 説明とプレフィックス情報を追加し、既存の Token / Reset / Foundation と 同じフォーマットに揃える。CSS 出力への影響なし。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
wp-starter#26（Component 純度回復）の前提として、`c-media-split` に `-stacked` Modifier を追加する。 Block ルール直後・Element 群の前に配置（CSS 定義順ルール準拠）。 `@container` クエリ非依存で常に縦並び固定。投稿カード一覧の小さな カード内（`c-card.c-media-split.-stacked` Block 併記）で使用想定。 既存 Features セクションの `c-media-split`（`-stacked` 未指定）への影響なし。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
l-inner（Layout 層: max-inline-size + padding + 中央配置）と Project 各 Element（flex/grid container / gap / z-index 等）が 1 要素に併記されていた単一責任原則違反（spec §5.4）を解消。 修正内容（9 出現箇所、HTML 構造のみ変更、CSS 変更なし）: - p-header__bar（index.html / 404.html / privacy/index.html） - p-hero__stack（index.html） - p-cta__inner（index.html） - p-footer__stack（index.html / 404.html / privacy/index.html） - p-404__inner（404.html） 根拠: spec §5.4 単一責任原則 / memory feedback_component_purity_resolution.md Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…分離） (#189) - PR #187（一段ネスト化）は memory feedback_component_purity_resolution.md の過剰適用だった。 l-inner と p-XXX__inner を同一要素に併記することで、名前の一致と役割上書きの両立を実現。 HTML（9 箇所）: A. p-header__inner を外側 div に追加（3 ファイル） B. p-hero__inner を外側 div に追加（index.html） C. p-footer__inner を外側 div に追加（3 ファイル） D. p-cta__inner を外側 div に移動、内側 wrapper を削除（inner 役割完結のため） E. p-404__inner を外側 div に移動、内側 div を p-404__stack に変更 CSS: - p-header.css / p-hero.css / p-footer.css: __inner 空ルール追加（対応維持） - p-404.css: __inner に max-inline-size のみ残し、grid 機能を __stack に分離 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
….0.0） - devDependencies.vite を ^8.0.3 → ^8.0.5 に bump（wp-starter と同等） - engines.node: ">=24.0.0" を追加（wp-starter と同等） - pnpm-lock.yaml を更新（解決バージョンは 8.0.10 で変わらず、specifier のみ更新） WP 必然差異（lint:php / phpcbf / fs-extra / @types/fs-extra）は意図的に維持。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CONTRIBUTING.md L36「Node.js LTS 以降を推奨」の記述通り、 starter は OSS 公開リポとして広いユーザー層対応のため engines を意図的に未指定とする方針。 e19a7a8 で engines: { node: ">=24.0.0" } を追加したが、 これは wp-starter（案件用・開発環境固定の意図的判断）との整合を誤って starter に適用した誤判断。engines フィールドのみ削除して方針を復元する。 vite ^8.0.5 は維持（e19a7a8 のバージョン追従は有効）。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
PR #189 で l-inner p-hero__inner 併記構造に変更した結果、.p-hero__inner が .p-hero の grid 直接子になったが grid-area が未設定のまま → auto-placement で .p-hero__media（grid-area: stack）と別 row に配置されヒーロー画像とテキストが 重ならないバグを修正。 feedback_component_usage_unified_principle.md 原則 9（__inner は幅制御のみ）の 明示理由付き例外として、grid-area: stack を追加。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
8+6 ルールに従い、スターターリポの公開コードから書籍・spec 領域のコメントを排除。 削除 (D6 Block 役割説明): - c-skip-link.css: DEVIATION コメントに付記されていた「アクセシビリティ対応のスキップリンク。...」2 行 - c-overlay.css: 「汎用オーバーレイ。ドロワー・モーダル・ライトボックス等で再利用可能。」1 行 - c-back-to-top.css: 「ページ上部へ戻る機能を持つ、...」1 行 短縮 (D5 WCAG 基準番号): - c-form.css L14: 「WCAG 3.3.2 Labels or Instructions」を除去 - c-form.css L59: 「WCAG 2.4.11 AA」を除去 短縮 (内部番号参照 / D6 部分除去): - p-hero.css: 「原則 9 の明示理由付き例外」等の内部 memory 参照を除去、技術的 WHY のみ 1 行に圧縮 - p-problem.css: 「装飾は c-card.-subtle、タイポの縦積みは c-text-block が担当」を除去、他の空ルール placeholder と形式を統一 - main.js JSDoc: 「LCP 要素の FOIC 防止に使用」を「ファーストビュー要素のアニメーション遅延防止に使用」に短縮（D5） スコープ B: - docs/ar-2026-04-30-v12-finishing.md を git rm（cortex/sessions/2026-04-30.md に AR 結果記録済、テンプレートリポでは公開ノイズ） Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- 全 7 フィールドに aria-describedby + role="alert" エラー要素配置 - form に novalidate 追加（JS 完全制御のため、ブラウザ tooltip を抑制） - c-form__error CSS スタイル復活（font-size + color） - main.js に initFormValidation() 関数追加: - HTML5 checkValidity() + validationMessage でブラウザロケール準拠エラー文言 - fieldset（plan）は制約検証対象外のため内部 required input を代替検査 - submit 時: エラー表示 + aria-invalid + 最初エラーフィールドへ focus + scrollIntoView - input/change 時: 復帰でエラー解除 + aria-invalid 削除 - WCAG 2.2 SC 3.3.1（A）/ 3.3.3（AA）完全達成 しゅんえい判断（2026-05-01 セッション 33）: 何度も指摘される観点 = リファレンス実装必須要件。 PR #124（2026-04-23 シンプル志向）の方針を反転。 Closes #195 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
) * feat(v1.2): preview server 404 fallback 追加 + README 明記（Issue #198） - vite.config.ts に configurePreviewServer middleware plugin 追加 - 存在しない URL アクセス時に dist/404.html を 404 ステータスで配信 - README に「404 ページの動作確認」セクション追加（本番自動配信 / ローカル fallback / 直接アクセスの 3 パターン） - CONTRIBUTING.md に 404 動作確認手順追記（学習者向け） しゅんえい判断（2026-05-01 セッション 33）: 動作確認できない実装は教材性低い。 ローカル pnpm preview で本番動作完全再現し、リファレンス実装の教材性向上。 Closes #198 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(v1.2): 404 ドキュメント削除 + vite.config.ts plugin コメント追加（PR #199 修正） - README.md / CONTRIBUTING.md の「404 ページの動作確認」セクション削除 → starter シンプル志向、他機能との記述一貫性、コメント方針 v2 D9 整合 - vite.config.ts plugin に簡潔コメント追加（本番自動配信前提 + ローカル再現用、3 行） → 学習者は plugin コードで意図理解可能 しゅんえい指摘 + データ駆動独立分析（2026-05-01 セッション 33）の結果。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…200) PR #199 の simpler approach（post-hook で未処理のみ届く前提）が誤り。 Vite 8.x の middleware 順序で indexHtmlMiddleware より前に動き、 全リクエストを飲み込むため / と /privacy/ も 404 化していた。 修正: 既存ファイル / ディレクトリ存在チェック追加 - dist/{url}（ファイル直接 or ディレクトリ）が存在 → next() で Vite に委譲 - dist/{url}/index.html が存在 → next() で Vite に委譲 - どちらも存在しない → 404.html を 404 ステータスで返す QC リトライで FAIL 検出 → 全 URL バリエーション（11件）動作確認で網羅性確保。 Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- src/assets/css/layout/l-page.css 新規（display: flex; flex-direction: column; min-block-size: 100dvb;） - .l-page > main に flex: 1（子セレクタで main を stretch） - src/assets/css/style.css に layout/l-page.css import 追加（layout セクション先頭） - 全 3 ページ（404 / index / privacy）の body に class="l-page" 追加 - src/assets/css/reset/reset.css から min-block-size: 100dvb 削除（l-page に責任統一） しゅんえい指摘（2026-05-01 セッション 33）: 404 等の短いコンテンツページでも footer をウィンドウ下部に配置。mFLOCSS spec §5.4 Layout 層責任に整合する設計を採択。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…5-h8pq (#202) - Bump markuplint 4.14.1 -> 4.18.1 - Add pnpm.overrides for uuid >=14.0.0 to resolve transitive moderate vulnerability (path: markuplint > @markuplint/file-resolver > @markuplint/parser-utils > uuid) - pnpm audit: 0 vulnerabilities - Verified: pnpm lint:html (3 files passed), pnpm dev (vite ready), pnpm build (success) Refs: monthly review Issue shunei-web/issues#381 Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
#205) PR #199 / #200 で `vite.config.ts` の preview-404-fallback plugin は実装済 だったが、Issue #198 の完了条件「README または CONTRIBUTING に 404 動作明記」 が未完遂（PR body には記載があったが実 commit に含まれていなかった partial misreport）のため補完。 ## 変更内容 - README.md: 「ビルドと納品」末尾に「404 ページの動作確認」セクション追加。 本番ホスティング（Cloudflare Pages / Netlify / Vercel / GitHub Pages 共通） + ローカル preview + 直接アクセスの 3 確認パターンを記載。 - CONTRIBUTING.md: 「基本フロー」に `pnpm run preview` 動作確認手順を追加し、 README の該当節へリンク。 - CHANGELOG.md: Unreleased Added に preview-404-fallback plugin の動作を 追記（PR #199 / #200 で更新漏れ）。 ## 実機検証 `npm run build && npm run preview` 後の動作確認: | URL | 期待 | 実測 | |-----|------|------| | `/` | 200 | ✅ 200 | | `/privacy/` | 200 | ✅ 200 | | `/nonexistent` | 404 | ✅ 404 | | `/404.html`（直接） | 200 | ✅ 200 | | `/assets/notfound.css` | 404 | ✅ 404 | Closes #198
…ec §5.2 SHOULD 準拠）
- reset.css に * { min-inline-size: 0; min-block-size: 0 } を追加
- CSS-FLEXBOX-1 §4.5 / CSS-GRID-1 §6.2 罠の構造的予防
- 既存 :where(fieldset) は fieldset 固有罠対策として残置
- pseudo は適用対象外（最小化版）
- 副作用: input / replaced element の個別 override 必要時のみ
…ck-size 統合 セッション 48 commit a2adf3a で追加した * 一律 min-* 適用のコメント過剰 + 末尾配置を解消。 - 冒頭 *, ::before, ::after { box-sizing } に min-* 統合（DRY + 既存パターン整合） - 末尾の重複ルール + 4 行コメント削除（starter 他箇所はコメントゼロで一貫性確保） - 仕様根拠は spec §5.2 SHOULD + agent-reference [mFLOCSS 流] で明文化済（重複削除）
ユーザー実体験のシナリオ（インストール → 全体像把握 → カスタマイズ → 構造変更 → ビルド）に 整合するよう章節項を再配置。 - 「ファイル構成」をリファレンス節 → 独立章に昇格 + クイックスタート直後に移動（全体像先） - 「ダークモード」を「色の変え方」直後に移動（ビジュアル系グルーピング統合） リファレンス章は「コマンド一覧 / 対象ブラウザ」のみに整理。
- CODING_GUIDE.md を 289 行 → 100 行（65% 削減） - 削除: Design Decisions / 単位解説 / 流体タイポ理由 / @container vs @media / モーションガード理由 / show() 採用根拠 / showModal() 参考ケース / Modifier 記法選択根拠（業界標準比較）/ 空のルールセット （いずれも書籍領域 or コードで自己解析可能な内容） - 保持: ブレークポイント CSS/JS 同期 / ドロワー HTML 構造 / z-index 設計 / SR 実機検証手順 / data-drawer-inert / コミットメッセージ + 関連リンク （starter 固有運用ルール） - z-index テーブル（14 行）→ ファイル参照 + 設計判断 1 行に圧縮 - URL 修正（4 箇所）: https://mflocss.dev → https://github.com/mflocss/spec - README.md L257（設計判断の詳細セクション） - README.md L264（関連リンクセクション） - CODING_GUIDE.md L4（冒頭） - CODING_GUIDE.md 関連リンク末尾
brand mflocss.md L75/L95/L181 で「mflocss.dev = 認知→理解→書籍購入のファネル中枢」と 明文化されている通り、各リポからの集約導線入口として公式サイトリンクを復活。 Phase E-2 marketer「GitHub Star 獲得の導線設計（README→Star）」の CV 経路を確立。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- README: 「設計判断の詳細」セクション削除（関連リンクと重複） - README: GitHub Actions CI セクション圧縮（9行 → 2行、詳細はworkflowファイル参照） - CODING_GUIDE: 冒頭に想定読者（開発者向け）+ README 委譲を明示 - CODING_GUIDE: 末尾「関連リンク」セクション削除（冒頭 L5 に単一化） - 役割分担: README = 全ユーザー共通の起点・関連リンク単一ソース / CODING_GUIDE = 規約のみ純化 AR: PASS WITH MINOR（採用 1 件反映済み）/ 関連: PR #83 v1.2 ブランチ
書籍 ch5（Token・Reset・Foundation）+ ch12（スターターで動かす）と完全重複する
カスタマイズ・構造の変更セクション（123 行）を書籍誘導 + CUSTOMIZE コメント誘導の
5 行に圧縮。既存維持バイアスを排し、責任に応じた配置（書籍 = 詳細 / README = 起点）を実現。
- 削除: テキスト差し替え / favicon・OGP / 色の変え方 / ダークモード / 余白・文字サイズ
外部フォント / ブレークポイント / フォーム送信先 / セクション追加削除 / ページ追加削除
- 追加: 書籍 ch5+ch12 誘導リンク + CUSTOMIZE コメント検索ヒント（5 行）
- CODING_GUIDE.md は変更なし
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- A: 書籍章番号（ch5/ch12）削除 → 書籍 TOC で発見可能、メンテコスト最小化 - B: 404 動作確認表に dev 行追加（localhost:5173、HMR 有効）、重複の直接アクセス行削除 - C: 関連リンクを「リポ内ドキュメント」「mFLOCSS エコシステム」の 2 グループに整理 - CODING_GUIDE.md / CHANGELOG.md を明示リンク追加（GitHub UI 自動認識なし） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- カスタマイズ・構造の変更 / ビルドと納品 / パッケージマネージャー / GitHub Actions CI を README → CODING_GUIDE へ移管 - README: GitHub 全ユーザー向け起点情報のみに純化 （クイックスタート / ファイル構成 / リファレンス / 関連リンク / ライセンス） - CODING_GUIDE: 開発者向け運用手順を集約 （移管 4 セクション + 既存 ブレークポイント / ドロワー / コミットメッセージ） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- README: 想定ユーザー（実装者 / Web 制作者 / AI agent）明示 + CODING_GUIDE / 書籍へのナビ追加 - CODING_GUIDE: セクションを開発フロー順に整理（セットアップ→カスタマイズ→ビルド→実装規約→開発規約） - CONTRIBUTING: エンドユーザー向けセクション削除（CODING_GUIDE へ一元化）、404 / commit / コード規約のリンク・表記を CODING_GUIDE 誘導に統一 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
mFLOCSS starter v1.0 リファレンス実装。spec v1.0 準拠 + AR 3サイクル + QA + 著者通読を経て完成。
spec v1.0 準拠
コード品質
ブラウザ互換
ドキュメント
デプロイ
Test plan
Generated with Claude Code