Skip to content

refactor: Component Element 付与漏れ修正 + c-back-to-top を Component 自己完結化#90

Merged
shunei-web merged 6 commits intov1.2from
refactor/component-elements-audit-2026-04-19
Apr 20, 2026
Merged

refactor: Component Element 付与漏れ修正 + c-back-to-top を Component 自己完結化#90
shunei-web merged 6 commits intov1.2from
refactor/component-elements-audit-2026-04-19

Conversation

@shunei-web
Copy link
Copy Markdown
Collaborator

背景

しゅんえいからの指摘「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 削除
  • HTML 4 ファイル: 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 付与
  • 7 箇所の l-innerp-{section}__inner 付与(Problem / Features / Numbers / Voice / FAQ + contact / privacy)
  • 対応 CSS 7 ファイルに空ルールセット追加(Project 拡張点として確保)

→ 既に付与されていた 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 を満たしている。

スコープ外

  • 書籍側の更新: ch10 等で .c-back-to-top p-back-to-top を参照している場合は別 PR 対応
  • p-skip-link.css の新規作成: 不要(c-skip-link が自己完結)

粒度

3 commits + lint fix 1 commit の統合 PR。しゅんえい判断に委ねるため自動マージしない。

shunei-web and others added 4 commits April 20, 2026 00:20
…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>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Apr 19, 2026

Deploying starter with  Cloudflare Pages  Cloudflare Pages

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

View logs

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>
@shunei-web
Copy link
Copy Markdown
Collaborator Author

追加 commit (0e7f8b7): 逸脱コメント書式を書籍マーカー形式に統一(audit L2 対応)

c-overlay / c-skip-link / c-back-to-top の 3 ファイルで、書籍 ch7 L118-119 と同一の spec deviation [項目名] マーカー形式に冒頭を揃えました。

Layout 層の他 l-* 全てに container-name が設定されている中で
l-inner のみ未設定だった。ビューポート 1200px 超の大画面で
Project 層の @container クエリを「コンテンツ領域幅」基準で
判定できるよう、inner を container として明示する。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@shunei-web shunei-web merged commit f558ead into v1.2 Apr 20, 2026
1 check passed
@shunei-web shunei-web deleted the refactor/component-elements-audit-2026-04-19 branch April 20, 2026 02:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant