refactor: Component Element 付与漏れ修正 + c-back-to-top を Component 自己完結化#90
Merged
shunei-web merged 6 commits intov1.2from Apr 20, 2026
Merged
Conversation
…ent 自己完結に統一 - c-skip-link.css: 逸脱コメント追加(position: fixed の正当化) - c-back-to-top.css: 逸脱コメント追加 + p-back-to-top の位置制御・[data-visible] を統合 - project/p-back-to-top.css: 削除 - style.css: @import 削除 - HTML 4 ファイル: p-back-to-top クラス削除 c-overlay と同じ Component 自己完結パターンに統一。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ner を統一付与
- src/index.html の FAQ 4 details に p-faq__item 付与(他セクションの __item と整合)
- 7 箇所の l-inner に p-{section}__inner 付与(Problem/Features/Numbers/Voice/FAQ + contact/privacy)
- 対応 CSS 7 ファイルに空ルールセット追加(Project 拡張点として確保)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- src/index.html の Hero CTA 内 svg.c-icon に p-hero__cta-icon 付与 - p-hero.css に空ルールセット追加(Project 拡張点として確保) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
stylelint --fix による自動修正(visibility の位置を recess-order 準拠に調整)。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Deploying starter with
|
| Latest commit: |
5f7c344
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6e43701a.starter-20t.pages.dev |
| Branch Preview URL: | https://refactor-component-elements.starter-20t.pages.dev |
c-overlay / c-skip-link / c-back-to-top の 3 ファイルで、 書籍 ch7 L118-119 と同一のマーカー形式に冒頭を揃える: /* spec deviation [項目名]: * 理由(複数行可) */ grep "spec deviation" で書籍と starter 両方から逸脱箇所を横断検索可能に。 audit: business/projects/mflocss/book-deviation-judgment-audit-2026-04-20.md L2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Collaborator
Author
|
追加 commit (0e7f8b7): 逸脱コメント書式を書籍マーカー形式に統一(audit L2 対応) c-overlay / c-skip-link / c-back-to-top の 3 ファイルで、書籍 ch7 L118-119 と同一の |
Layout 層の他 l-* 全てに container-name が設定されている中で l-inner のみ未設定だった。ビューポート 1200px 超の大画面で Project 層の @container クエリを「コンテンツ領域幅」基準で 判定できるよう、inner を container として明示する。 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
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.
背景
しゅんえいからの指摘「HTMLのクラス付与を確認し直して。ブロック分割またはコンポーネントのブロックまで、全てにprojectのエレメントを付与」への対応。
また、独立 Component(c-skip-link / c-back-to-top)を c-overlay と同じ「spec 逸脱コメント + Component 自己完結」パターンに統一。
変更
1. 独立 Component の整合
c-skip-link.css: 逸脱コメント追加(position: fixed の正当化)c-back-to-top.css: 逸脱コメント追加 + p-back-to-top の位置制御・[data-visible] を統合project/p-back-to-top.css: 削除style.css: @import 削除p-back-to-topクラス削除→ c-skip-link / c-overlay / c-back-to-top が「サイト横断の自己完結 UI」として統一パターンに
2. c-accordion に p-faq__item / l-inner に p-{section}__inner 付与
src/index.htmlの FAQ 4 details にp-faq__item付与l-innerにp-{section}__inner付与(Problem / Features / Numbers / Voice / FAQ + contact / privacy)→ 既に付与されていた Header / Footer / Hero / CTA / thanks / Drawer と整合
3. Hero CTA 内 svg に p-hero__cta-icon 付与
src/index.htmlの Hero CTA 内 svg.c-icon にp-hero__cta-icon付与p-hero.cssに空ルールセット追加検証
pnpm run lint:css✓pnpm run lint:html✓pnpm run lint:js✓pnpm run format✓pnpm run build✓逸脱判断
c-skip-link/c-back-to-topは spec §6「Component は Project に配置される」を逸脱するが、c-overlayの先例と同じく「サイト横断の自己完結 UI で Project 層の文脈調整余地なし」として逸脱コメントで正当化。Portability Test を満たしている。スコープ外
.c-back-to-top p-back-to-topを参照している場合は別 PR 対応p-skip-link.cssの新規作成: 不要(c-skip-link が自己完結)粒度
3 commits + lint fix 1 commit の統合 PR。しゅんえい判断に委ねるため自動マージしない。