feat(v1.2): 新規 .l-page Layout クラスで sticky footer 実装#201
Merged
Conversation
- 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>
Deploying starter with
|
| Latest commit: |
a615062
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6ad146d0.starter-20t.pages.dev |
| Branch Preview URL: | https://feat-v1-2-l-page-sticky-foot.starter-20t.pages.dev |
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.
概要
しゅんえい指摘（2026-05-01 セッション 33）: 404 等の短いコンテンツページでも footer をウィンドウ下部に配置。
mFLOCSS spec §5.4 Layout 層責任に整合する設計で、新規
.l-pageLayout クラスとして実装。変更内容
新規ファイル
src/assets/css/layout/l-page.css: ページ全体の骨格（display: flex; flex-direction: column; min-block-size: 100dvb;）+.l-page > main { flex: 1; }修正ファイル
src/assets/css/style.css:@import './layout/l-page.css' layer(layout);を layout セクション先頭に追加src/assets/css/reset/reset.css::where(body)からmin-block-size: 100dvb削除（Layout 層.l-pageに責任統一）src/index.html/src/404.html/src/privacy/index.html:<body id="top">→<body id="top" class="l-page">設計根拠
min-block-size: 100dvbは「ページ骨格の制御」であり Reset 層の責任域外。Layout 層に集約することで責任統一display: flex; flex-direction: column; min-block-size: 100dvb;+main { flex: 1; }は CSS 標準の sticky footer 実装動作確認
<body class="l-page">付与確認@layer layoutに.l-page/.l-page > mainルール存在確認@layer resetの:where(body)はmargin: unsetのみ（min-block-size削除確認）pnpm build成功テストチェックリスト
🤖 Generated with Claude Code