Skip to content

Commit 58a3440

Browse files
shunei-webclaude
shunei-web
and
claude
authored
feat: mFLOCSS 仕様 v1.1 完全準拠リファレンス実装 (#50)
* feat: モダン CSS 機能を統合 — light-dark() / Container Queries / @scope / Scroll-driven Animations - Theme 層: light-dark() でライト・ダークカラーを1ファイルに統合（dark.css は拡張ポイントとして空で残存） - Component 層: c-card に container-type: inline-size と @container クエリを追加、@scope で境界を定義 - Animation 層: 全5ファイルに @supports (animation-timeline: view()) ブロックを追加し、Scroll-driven Animations をプログレッシブエンハンスメントで導入 - JS: IntersectionObserver / stagger delay を animation-timeline 対応ブラウザではスキップ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: l-container 追加・dark.css 削除・Container Queries モダン構文化 - l-container.css 新規作成（container-type: inline-size） - c-card から container-type を削除し l-container に委譲 - @container 構文を (min-width: 480px) → (width >= 480px) に更新 - dark.css 削除（light-dark() で color.css に統合済み） - style.css の import 整理（l-container 追加、dark.css 削除） - index.html の各 c-card を l-container で包む - layers/index.html の Theme コード例を light-dark() パターンに更新 Closes #27 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: Scroll-driven Animations を削除し IntersectionObserver に統一 - 全アニメーション CSS から @supports (animation-timeline: view()) ブロックを削除 - main.js から SDA 早期リターンを削除 - 全ブラウザで IntersectionObserver + CSS transition による時間ベースのフェードインに統一 - SDA はスクロール位置連動のため体験が不自然と判断（将来の方向性として記録済み） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションをコンポーネント単位に変更 - index.html: a-stagger をグリッドから削除、各 l-container に a-fade-in-slide-up を付与 - layers/index.html: p-layer-showcase 全体から各 __item に a-fade-in-slide-up を移動 - 画面に入った順に個別フェードインする自然な体験に改善 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フォームフィールド個別アニメーション・初期表示フェード修正 - contact/index.html: フォーム全体→各フィールド+ボタンに a-fade-in-slide-up を付与 - main.js: rAF 2回ネストで初回ペイント後に IO 開始（初期表示要素のフェードが見えるように） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 初期表示要素をフェードのみに変更 - ヒーロー lead/actions を a-fade-in-activate（フェードのみ）に変更 - 各ページ冒頭の段落も a-fade-in-activate に統一 - スクロールで入る要素は a-fade-in-slide-up を維持 - setTimeout 遅延を削除し即時 IO 開始に戻す Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: philosophy ページのアニメーションをセクション単位に分割 l-stack 全体の一括アニメーションから、4つのセクションそれぞれに a-fade-in-slide-up を付与する方式に変更。スクロールに応じて 各セクションが個別にフェードイン＋スライドアップする。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: CSS読み込み時の逆方向トランジションを防止 transition を .is-active 側に移動。CSS が読み込まれた瞬間に 初期状態（opacity: 0, translate等）への変化にトランジションが 掛かり、定位置→開始位置→定位置と動く問題を修正。 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: @layerセクションのアニメーションをコンポーネント単位に分割 l-stack 全体の一括アニメーションから、blockquote・code-block・p それぞれに a-fade-in-slide-up を付与。大きなブロック単位での translate によるレイアウトシフトを防止。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッターナビゲーションの中央寄せ display: contents を削除し、grid-template-columns を auto に変更、 justify-content: center で中央配置に修正。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションを @Keyframes + @media パターンに刷新 transition（双方向）から animation（一方向）に変更し、 CSS読み込み時の逆方向再生を原理的に排除。 - @Keyframes で一方向アニメーションを定義 - @media (prefers-reduced-motion: no-preference) and (scripting: enabled) で全体をラップ → reduce-motion / JS無効時のリセットコード不要 - 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 全5種アニメーションの適材適所な配置 - hero: a-scale-in（ズーム登場） - h2見出し: a-fade-in-slide-up（下からスライド） - blockquote: a-fade-in-slide-right（左からスライド） - フッターnav: a-stagger（順次表示） - h1/説明文: a-fade-in-activate / a-fade-in-slide-up - Layers Animation層のコード例を@Keyframes+@mediaパターンに更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッター水平線を全幅に・不要なラッパー削除 - l-inner / p-footer__inner ラッパーを削除しHTML構造をフラット化 - p-footer__nav と p-footer__bottom に個別 padding-inline を適用 - border-block-start がビューポート全幅に表示されるように Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: レビュー指摘対応（stagger依存解消・コード例修正） - a-stagger.css に専用 @Keyframes stagger-slide-up を定義 （a-fade-in-slide-up.css への暗黙依存を解消） - layers/index.html の Animation コード例を実装と一致させる （ease-out → var(--ease-out-cubic)） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: インラインスタイル撲滅・層設計の改善 (#38) - 32箇所のインラインスタイルを全て CSS に移行（0箇所達成） - l-stack / l-grid を完全除去し Project Element に置換 - reset.css の :where() 疑似要素バグ修正 - focus-visible を reset.css（汎用）と base.css（テーマ固有）に分離 - base.css の img 重複を解消 - Foundation に container-type、Layout に -flush Modifier 追加 - 新規 Project CSS: p-home / p-philosophy / p-layers / p-contact Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: layers ページのモバイル横スクロールを修正 グリッド項目の min-inline-size: auto により pre 要素がグリッドカラムを 押し広げていた。__description に min-inline-size: 0 を追加して解消。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: インラインスタイル撲滅・層設計の改善 (#39) * feat: モダン CSS 機能を統合 — light-dark() / Container Queries / @scope / Scroll-driven Animations - Theme 層: light-dark() でライト・ダークカラーを1ファイルに統合（dark.css は拡張ポイントとして空で残存） - Component 層: c-card に container-type: inline-size と @container クエリを追加、@scope で境界を定義 - Animation 層: 全5ファイルに @supports (animation-timeline: view()) ブロックを追加し、Scroll-driven Animations をプログレッシブエンハンスメントで導入 - JS: IntersectionObserver / stagger delay を animation-timeline 対応ブラウザではスキップ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: l-container 追加・dark.css 削除・Container Queries モダン構文化 - l-container.css 新規作成（container-type: inline-size） - c-card から container-type を削除し l-container に委譲 - @container 構文を (min-width: 480px) → (width >= 480px) に更新 - dark.css 削除（light-dark() で color.css に統合済み） - style.css の import 整理（l-container 追加、dark.css 削除） - index.html の各 c-card を l-container で包む - layers/index.html の Theme コード例を light-dark() パターンに更新 Closes #27 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: Scroll-driven Animations を削除し IntersectionObserver に統一 - 全アニメーション CSS から @supports (animation-timeline: view()) ブロックを削除 - main.js から SDA 早期リターンを削除 - 全ブラウザで IntersectionObserver + CSS transition による時間ベースのフェードインに統一 - SDA はスクロール位置連動のため体験が不自然と判断（将来の方向性として記録済み） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションをコンポーネント単位に変更 - index.html: a-stagger をグリッドから削除、各 l-container に a-fade-in-slide-up を付与 - layers/index.html: p-layer-showcase 全体から各 __item に a-fade-in-slide-up を移動 - 画面に入った順に個別フェードインする自然な体験に改善 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フォームフィールド個別アニメーション・初期表示フェード修正 - contact/index.html: フォーム全体→各フィールド+ボタンに a-fade-in-slide-up を付与 - main.js: rAF 2回ネストで初回ペイント後に IO 開始（初期表示要素のフェードが見えるように） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 初期表示要素をフェードのみに変更 - ヒーロー lead/actions を a-fade-in-activate（フェードのみ）に変更 - 各ページ冒頭の段落も a-fade-in-activate に統一 - スクロールで入る要素は a-fade-in-slide-up を維持 - setTimeout 遅延を削除し即時 IO 開始に戻す Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: philosophy ページのアニメーションをセクション単位に分割 l-stack 全体の一括アニメーションから、4つのセクションそれぞれに a-fade-in-slide-up を付与する方式に変更。スクロールに応じて 各セクションが個別にフェードイン＋スライドアップする。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: CSS読み込み時の逆方向トランジションを防止 transition を .is-active 側に移動。CSS が読み込まれた瞬間に 初期状態（opacity: 0, translate等）への変化にトランジションが 掛かり、定位置→開始位置→定位置と動く問題を修正。 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: @layerセクションのアニメーションをコンポーネント単位に分割 l-stack 全体の一括アニメーションから、blockquote・code-block・p それぞれに a-fade-in-slide-up を付与。大きなブロック単位での translate によるレイアウトシフトを防止。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッターナビゲーションの中央寄せ display: contents を削除し、grid-template-columns を auto に変更、 justify-content: center で中央配置に修正。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: アニメーションを @Keyframes + @media パターンに刷新 transition（双方向）から animation（一方向）に変更し、 CSS読み込み時の逆方向再生を原理的に排除。 - @Keyframes で一方向アニメーションを定義 - @media (prefers-reduced-motion: no-preference) and (scripting: enabled) で全体をラップ → reduce-motion / JS無効時のリセットコード不要 - 対象: a-fade-in-activate, a-fade-in-slide-up, a-fade-in-slide-right, a-scale-in, a-stagger の全5ファイル Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 全5種アニメーションの適材適所な配置 - hero: a-scale-in（ズーム登場） - h2見出し: a-fade-in-slide-up（下からスライド） - blockquote: a-fade-in-slide-right（左からスライド） - フッターnav: a-stagger（順次表示） - h1/説明文: a-fade-in-activate / a-fade-in-slide-up - Layers Animation層のコード例を@Keyframes+@mediaパターンに更新 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: フッター水平線を全幅に・不要なラッパー削除 - l-inner / p-footer__inner ラッパーを削除しHTML構造をフラット化 - p-footer__nav と p-footer__bottom に個別 padding-inline を適用 - border-block-start がビューポート全幅に表示されるように Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: レビュー指摘対応（stagger依存解消・コード例修正） - a-stagger.css に専用 @Keyframes stagger-slide-up を定義 （a-fade-in-slide-up.css への暗黙依存を解消） - layers/index.html の Animation コード例を実装と一致させる （ease-out → var(--ease-out-cubic)） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: インラインスタイル撲滅・層設計の改善 (#38) - 32箇所のインラインスタイルを全て CSS に移行（0箇所達成） - l-stack / l-grid を完全除去し Project Element に置換 - reset.css の :where() 疑似要素バグ修正 - focus-visible を reset.css（汎用）と base.css（テーマ固有）に分離 - base.css の img 重複を解消 - Foundation に container-type、Layout に -flush Modifier 追加 - 新規 Project CSS: p-home / p-philosophy / p-layers / p-contact Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: layers ページのモバイル横スクロールを修正 グリッド項目の min-inline-size: auto により pre 要素がグリッドカラムを 押し広げていた。__description に min-inline-size: 0 を追加して解消。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * refactor: Layer Identity トークンをプリミティブ名に変更 (#40) (#41) Tokens 層のセマンティック名（--layer-tokens 等）を hue ベースの プリミティブ名（--violet-500 等）に変更。 セマンティックマッピングは Theme 層に移動。 Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * refactor: mFLOCSS v1.1 仕様準拠の全面リファクタリング - @import layer() 一元管理方式に移行（§8 推奨） - @Property 宣言を tokens/property.css に分離（§4） - 全 CSS ファイルから @layer ラッパーを除去 - c-badge のサイト固有 Modifier を除去し、プライベートカスタムプロパティ注入パターンに移行（§5.5, §7） - c-skip-link の position: fixed を p-skip-link.css に分離（§5.5 Responsibility Test） - c-card から @scope を除去（§1 将来の展望） - 機能的トランジションの prefers-reduced-motion ガードを除去（§5.7） - HTML: バッジの Modifier を親の Project 要素に移動、p-home__card エレメント追加 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: HTML/JS を仕様 v1.1 と完全整合・アクセシビリティ改善 - 全ページの層名・役割記述を仕様の公式用語に統一 - 詳細度コードサンプルの合理的なエスカレーション例に修正 - CSS進化の説明に :has(), Container Queries, @scope を追加 - バッジをプライベートカスタムプロパティ注入パターンに移行（Philosophy） - 外部リンクに target="_blank" rel="noopener noreferrer" 追加 - @import layer() 方式との違いを注記（Layers） - JS: フォーカストラップ・フォーカス移動・prefers-reduced-motion チェック追加 - JS: IntersectionObserver 存在チェック追加 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: フォーム充実（select・radio・checkbox・エラー状態） - Foundation: select/radio/checkbox/label のリセット追加 - Theme: --color-error / --color-error-bg セマンティックカラー追加 - Project: select・radio・checkbox・エラー状態のスタイルパターン追加 - HTML: select(種別)・radio(優先度)・checkbox(同意)・fieldset/legend 追加 - バリデーションはブラウザネイティブに委任（CSS設計リファレンスの範囲） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: radio/checkbox/select の基本スタイルを Foundation 層に移動 base.css と同じ設計方針（要素セレクタ + :where() の基本スタイル）に統一。 Project 層にはレイアウト・エラー状態のみ残す。 HTML から不要な p-contact-form__radio / __checkbox クラスを除去。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: Tokens→Theme 参照チェーンの MUST 違反修正 + container query 統一 - tokens/color.css: error 状態カラートークン追加（--error-light/dark/bg-light/bg-dark） - theme/color.css: ハードコード oklch → var() でトークン参照に修正 - c-card.css: @container (width) → (inline-size) に統一 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 仕様 v1.1 準拠のマークアップ全面再構築 - 全4ページの HTML を仕様 + CSS 実装から1から再構築 - aria-current="page" をナビゲーションに動的付与（a11y 改善） - ラジオボタングループに required 属性を追加 - ヘッダー/フッター構造を4ページ間で完全統一 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: FOUC 解消 — CSS を HTML link タグで直接読み込み - CSS 読み込みを JS import から HTML <link rel="stylesheet"> に移行 - <meta name="color-scheme" content="light dark"> を全ページに追加 - ページ遷移時のダークモードフラッシュとスタイル崩れを解消 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent ea21cb8 commit 58a3440

48 files changed

Lines changed: 1567 additions & 1392 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/contact/index.html‎

Lines changed: 105 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="color-scheme" content="light dark" />
67
<title>Contact | mFLOCSS</title>
78
<meta name="description" content="mFLOCSS へのお問い合わせ。Foundation 層のフォームリセットと Project 層のスタイル設計を実装例として確認できます。" />
89
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
10+
<link rel="stylesheet" href="/css/style.css" />
911
<script type="module" src="/scripts/main.js"></script>
1012
</head>
1113
<body>
@@ -25,15 +27,9 @@
2527
<nav id="global-nav" class="p-header__nav" aria-label="メインナビゲーション">
2628
<ul class="p-header__nav-list">
2729
<li><a href="/" class="p-header__nav-link">Top</a></li>
28-
<li>
29-
<a href="/philosophy/" class="p-header__nav-link">Philosophy</a>
30-
</li>
31-
<li>
32-
<a href="/layers/" class="p-header__nav-link">Layers</a>
33-
</li>
34-
<li>
35-
<a href="/contact/" class="p-header__nav-link">Contact</a>
36-
</li>
30+
<li><a href="/philosophy/" class="p-header__nav-link">Philosophy</a></li>
31+
<li><a href="/layers/" class="p-header__nav-link">Layers</a></li>
32+
<li><a href="/contact/" class="p-header__nav-link">Contact</a></li>
3733
</ul>
3834
</nav>
3935
</div>
@@ -43,58 +39,127 @@
4339
<section class="l-section">
4440
<div class="l-inner">
4541
<h1 class="c-section-heading a-fade-in-activate">Contact</h1>
46-
<p class="a-fade-in-slide-up" style="text-align: center; margin-block-start: 1rem">
42+
<p class="p-contact__lead a-fade-in-slide-up">
4743
お問い合わせフォームのサンプルです。<br />
4844
Foundation 層のフォームリセットと Project 層の <code>p-contact-form</code> の組み合わせを確認できます。
4945
</p>
5046

51-
<form class="p-contact-form a-fade-in-slide-up" style="margin-block-start: 2.5rem">
52-
<div class="p-contact-form__field">
53-
<label class="p-contact-form__label" for="name">お名前</label>
47+
<form class="p-contact-form p-contact__form">
48+
<div class="p-contact-form__field a-fade-in-slide-up">
49+
<label class="p-contact-form__label" for="name">
50+
お名前<span class="p-contact-form__required" aria-hidden="true">*</span>
51+
</label>
5452
<input
5553
class="p-contact-form__input"
5654
type="text"
5755
id="name"
56+
name="name"
57+
autocomplete="name"
5858
placeholder="山田 太郎"
5959
required
6060
/>
6161
</div>
62-
<div class="p-contact-form__field">
63-
<label class="p-contact-form__label" for="email"
64-
>メールアドレス</label
65-
>
62+
<div class="p-contact-form__field a-fade-in-slide-up">
63+
<label class="p-contact-form__label" for="email">
64+
メールアドレス<span class="p-contact-form__required" aria-hidden="true">*</span>
65+
</label>
6666
<input
6767
class="p-contact-form__input"
6868
type="email"
6969
id="email"
70+
name="email"
71+
autocomplete="email"
7072
placeholder="example@example.com"
7173
required
7274
/>
7375
</div>
74-
<div class="p-contact-form__field">
76+
<div class="p-contact-form__field a-fade-in-slide-up">
77+
<label class="p-contact-form__label" for="category">
78+
お問い合わせ種別<span class="p-contact-form__required" aria-hidden="true">*</span>
79+
</label>
80+
<select
81+
class="p-contact-form__select"
82+
id="category"
83+
name="category"
84+
required
85+
>
86+
<option value="">選択してください</option>
87+
<option value="general">一般的なお問い合わせ</option>
88+
<option value="support">技術サポート</option>
89+
<option value="feedback">フィードバック</option>
90+
<option value="other">その他</option>
91+
</select>
92+
</div>
93+
<div class="p-contact-form__field a-fade-in-slide-up">
7594
<label class="p-contact-form__label" for="subject">件名</label>
7695
<input
7796
class="p-contact-form__input"
7897
type="text"
7998
id="subject"
99+
name="subject"
80100
placeholder="お問い合わせの件名"
81101
/>
82102
</div>
83-
<div class="p-contact-form__field">
84-
<label class="p-contact-form__label" for="message"
85-
>メッセージ</label
86-
>
103+
<fieldset class="p-contact-form__field a-fade-in-slide-up">
104+
<legend class="p-contact-form__label">
105+
優先度<span class="p-contact-form__required" aria-hidden="true">*</span>
106+
</legend>
107+
<div class="p-contact-form__option-group">
108+
<label class="p-contact-form__option-label">
109+
<input
110+
type="radio"
111+
name="priority"
112+
value="low"
113+
/>
114+
低
115+
</label>
116+
<label class="p-contact-form__option-label">
117+
<input
118+
type="radio"
119+
name="priority"
120+
value="normal"
121+
checked
122+
required
123+
/>
124+
通常
125+
</label>
126+
<label class="p-contact-form__option-label">
127+
<input
128+
type="radio"
129+
name="priority"
130+
value="high"
131+
/>
132+
高
133+
</label>
134+
</div>
135+
</fieldset>
136+
<div class="p-contact-form__field a-fade-in-slide-up">
137+
<label class="p-contact-form__label" for="message">
138+
メッセージ<span class="p-contact-form__required" aria-hidden="true">*</span>
139+
</label>
87140
<textarea
88141
class="p-contact-form__input"
89142
id="message"
143+
name="message"
90144
rows="6"
91145
placeholder="お問い合わせ内容をご記入ください"
92146
required
93147
></textarea>
94148
</div>
149+
<div class="p-contact-form__field a-fade-in-slide-up">
150+
<label class="p-contact-form__option-label">
151+
<input
152+
type="checkbox"
153+
name="agree"
154+
id="agree"
155+
required
156+
/>
157+
プライバシーポリシーに同意する
158+
</label>
159+
</div>
95160
<button
96161
type="submit"
97-
class="c-button-cta -large p-contact-form__submit"
162+
class="c-button-cta -large p-contact-form__submit a-fade-in-slide-up"
98163
>
99164
送信する
100165
</button>
@@ -104,26 +169,24 @@ <h1 class="c-section-heading a-fade-in-activate">Contact</h1>
104169
</main>
105170

106171
<footer class="p-footer">
107-
<div class="l-inner p-footer__inner">
108-
<nav class="p-footer__nav" aria-label="フッターナビゲーション">
109-
<div class="p-footer__nav-group">
110-
<p class="p-footer__nav-heading">Learn</p>
111-
<ul class="p-footer__nav-list">
112-
<li><a href="/philosophy/" class="p-footer__nav-link">Philosophy</a></li>
113-
<li><a href="/layers/" class="p-footer__nav-link">Layers</a></li>
114-
</ul>
115-
</div>
116-
<div class="p-footer__nav-group">
117-
<p class="p-footer__nav-heading">Resource</p>
118-
<ul class="p-footer__nav-list">
119-
<li><a href="https://github.com/mflocss/starter" class="p-footer__nav-link">GitHub</a></li>
120-
<li><a href="/contact/" class="p-footer__nav-link">Contact</a></li>
121-
</ul>
122-
</div>
123-
</nav>
124-
<div class="p-footer__bottom">
125-
<p class="p-footer__copyright">&copy; 2026 mFLOCSS. MIT License.</p>
172+
<nav class="p-footer__nav a-stagger" aria-label="フッターナビゲーション">
173+
<div class="p-footer__nav-group">
174+
<p class="p-footer__nav-heading">Learn</p>
175+
<ul class="p-footer__nav-list">
176+
<li><a href="/philosophy/" class="p-footer__nav-link">Philosophy</a></li>
177+
<li><a href="/layers/" class="p-footer__nav-link">Layers</a></li>
178+
</ul>
179+
</div>
180+
<div class="p-footer__nav-group">
181+
<p class="p-footer__nav-heading">Resource</p>
182+
<ul class="p-footer__nav-list">
183+
<li><a href="https://github.com/mflocss/starter" class="p-footer__nav-link" target="_blank" rel="noopener noreferrer">GitHub</a></li>
184+
<li><a href="/contact/" class="p-footer__nav-link">Contact</a></li>
185+
</ul>
126186
</div>
187+
</nav>
188+
<div class="p-footer__bottom">
189+
<p class="p-footer__copyright">&copy; 2026 mFLOCSS. MIT License.</p>
127190
</div>
128191
</footer>
129192
</body>

‎src/css/animation/a-fade-in-activate.css‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
1-
@layer animation {
1+
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
22
.a-fade-in-activate {
33
opacity: 0;
4-
transition: opacity 0.6s var(--ease-out-cubic);
54

65
&.is-active {
76
opacity: 1;
7+
animation: fade-in-activate 0.6s var(--ease-out-cubic);
88
}
99
}
1010

11-
@media (prefers-reduced-motion: reduce) {
12-
.a-fade-in-activate {
13-
opacity: 1;
14-
transition: none;
15-
}
16-
}
17-
18-
@media (scripting: none) {
19-
.a-fade-in-activate {
20-
opacity: 1;
11+
@keyframes fade-in-activate {
12+
from {
13+
opacity: 0;
2114
}
2215
}
2316
}

‎src/css/animation/a-fade-in-slide-right.css‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
1-
@layer animation {
1+
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
22
.a-fade-in-slide-right {
33
opacity: 0;
44
translate: -20px 0;
5-
transition:
6-
opacity 0.6s var(--ease-out-cubic),
7-
translate 0.6s var(--ease-out-cubic);
85

96
&.is-active {
107
opacity: 1;
118
translate: 0 0;
9+
animation: fade-in-slide-right 0.6s var(--ease-out-cubic);
1210
}
1311
}
1412

15-
@media (prefers-reduced-motion: reduce) {
16-
.a-fade-in-slide-right {
17-
opacity: 1;
18-
translate: 0 0;
19-
transition: none;
20-
}
21-
}
22-
23-
@media (scripting: none) {
24-
.a-fade-in-slide-right {
25-
opacity: 1;
26-
translate: 0 0;
13+
@keyframes fade-in-slide-right {
14+
from {
15+
opacity: 0;
16+
translate: -20px 0;
2717
}
2818
}
2919
}

‎src/css/animation/a-fade-in-slide-up.css‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
1-
@layer animation {
1+
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
22
.a-fade-in-slide-up {
33
opacity: 0;
44
translate: 0 20px;
5-
transition:
6-
opacity 0.6s var(--ease-out-cubic),
7-
translate 0.6s var(--ease-out-cubic);
85

96
&.is-active {
107
opacity: 1;
118
translate: 0 0;
9+
animation: fade-in-slide-up 0.6s var(--ease-out-cubic);
1210
}
1311
}
1412

15-
@media (prefers-reduced-motion: reduce) {
16-
.a-fade-in-slide-up {
17-
opacity: 1;
18-
translate: 0 0;
19-
transition: none;
20-
}
21-
}
22-
23-
@media (scripting: none) {
24-
.a-fade-in-slide-up {
25-
opacity: 1;
26-
translate: 0 0;
13+
@keyframes fade-in-slide-up {
14+
from {
15+
opacity: 0;
16+
translate: 0 20px;
2717
}
2818
}
2919
}

‎src/css/animation/a-scale-in.css‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
1-
@layer animation {
1+
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
22
.a-scale-in {
33
opacity: 0;
44
scale: 0.95;
5-
transition:
6-
opacity 0.6s var(--ease-out-cubic),
7-
scale 0.6s var(--ease-out-cubic);
85

96
&.is-active {
107
opacity: 1;
118
scale: 1;
9+
animation: scale-in 0.6s var(--ease-out-cubic);
1210
}
1311
}
1412

15-
@media (prefers-reduced-motion: reduce) {
16-
.a-scale-in {
17-
opacity: 1;
18-
scale: 1;
19-
transition: none;
20-
}
21-
}
22-
23-
@media (scripting: none) {
24-
.a-scale-in {
25-
opacity: 1;
26-
scale: 1;
13+
@keyframes scale-in {
14+
from {
15+
opacity: 0;
16+
scale: 0.95;
2717
}
2818
}
2919
}

‎src/css/animation/a-stagger.css‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,21 @@
1-
@layer animation {
1+
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
22
.a-stagger > * {
33
opacity: 0;
44
translate: 0 20px;
5-
transition:
6-
opacity 0.6s var(--ease-out-cubic),
7-
translate 0.6s var(--ease-out-cubic);
8-
transition-delay: var(--_delay, 0s);
95
}
106

117
.a-stagger.is-active > * {
128
opacity: 1;
139
translate: 0 0;
10+
animation: stagger-slide-up 0.6s var(--ease-out-cubic);
11+
animation-delay: var(--_delay, 0s);
12+
animation-fill-mode: backwards;
1413
}
1514

16-
@media (prefers-reduced-motion: reduce) {
17-
.a-stagger > * {
18-
opacity: 1;
19-
translate: 0 0;
20-
transition: none;
21-
}
22-
}
23-
24-
@media (scripting: none) {
25-
.a-stagger > * {
26-
opacity: 1;
27-
translate: 0 0;
28-
transition: none;
15+
@keyframes stagger-slide-up {
16+
from {
17+
opacity: 0;
18+
translate: 0 20px;
2919
}
3020
}
3121
}

0 commit comments

Comments
 (0)