@@ -121,6 +121,75 @@ Map every HTML CSS variable to the project's `globals.css` `@theme` token. Do NO
121121| page-sticky nav の top | ` position: sticky; top: 0; ` | ` top: 60px ` （グローバル Header の高さ分オフセット） |
122122| アニメーションの消失 | ` max-width: 0 ` のまま固定され見えなくなる | ` @media (prefers-reduced-motion: reduce) ` 内で ` max-width: 100% !important; ` を指定 |
123123| 背景クリック妨害 | ` ::before ` に ` z-index ` 指定なし | ` pointer-events: none; ` と ` z-index: 0 ` （または負の値）を指定 |
124+ | ヘッダーオフセット二重カウント | ` .page-layout { margin-top: 60px; } ` | 削除。` layout-content ` が既に ` padding-top: 60px ` を持つため不要。60px の余白が二重になる |
125+ | globals ` section ` 干渉 | ページ固有 section に余分な ` padding-top: 5rem ` (80px) が付く | ` .page-layout section { padding-top: 0; } ` でリセット |
126+ | globals ` .hero ` 干渉 | ` .hero { min-height: 100vh; } ` でヒーローが全画面高さになりコンテンツが押し下がる | ` .page-layout .hero { min-height: 0; display: block; padding-top: 0; } ` でリセット |
127+ | globals ` main ` 干渉 | ` main { max-width: 1100px; margin: 0 auto; } ` で幅が制限・中央寄せになる | ` .page-layout .main { max-width: none; margin: 0; } ` でリセット |
128+ | Mermaid 図の表示圧縮 | ページ固有 Flexbox と ` globals.css ` の ` .mermaid-wrapper ` (max-width) が競合し、図が極端に縮小される | ページ固有 CSS で ` .mermaid-wrapper ` の ` max-width: 100% !important ` 化と背景・ボーダーの透明化リセットを適用 |
129+ | コードブロックCSSの欠落 | ページ固有 CSS に ` .code-block ` や ` .code-line ` 等の定義が抜けている | ページ固有 CSS に ` .code-block ` , ` .code-line ` および ` .code-keyword ` 等のシンタックスハイライト定義を追加してインデント・配色を適用する |
130+ | 機械翻訳調の誤記（of） | Mermaid 等の中に「成果物 of 誤り」「インタフェース of 検証」などの直訳表現が残る | 機械翻訳で発生しやすい「A of B」の直訳を「AのB」といった適切な日本語表現に修正する |
131+
132+ ### Phase 3b: 独自レイアウト（サイドバー付きドキュメントページ）の globals.css 干渉リセット
133+
134+ サイドバーナビ＋メインコンテンツの2カラムレイアウト（` display: flex ` で独自スコープを持つページ）を実装する場合、` globals.css ` の汎用セレクターが干渉し** 大きな余白崩れ** を引き起こす。必ず以下をページ固有 CSS でリセットすること。
135+
136+ #### 干渉の仕組み
137+
138+ | globals.css の定義 | 干渉の症状 |
139+ | --- | --- |
140+ | ` body { padding-top: var(--disclaimer-height) } ` | body 全体が disclaimer 分下にずれる（意図通り） |
141+ | ` .layout-content { padding-top: 60px } ` | layout-content がヘッダー分下にずれる（意図通り） |
142+ | ` section { padding-top: 5rem } ` | 全 ` <section> ` に 80px の上余白が付く → ヒーロー等がずれる |
143+ | ` .hero { min-height: 100vh; display: flex; justify-content: center } ` | ヒーローが全画面高さになりコンテンツが中央に押し下がる |
144+ | ` main { max-width: 1100px; margin: 0 auto } ` | ` <main> ` 要素の幅が 1100px に制限・中央寄せになる |
145+
146+ #### 必須リセット CSS テンプレート
147+
148+ ``` css
149+ /* layout-content が padding-top: 60px を持つため、ページ固有 wrapper に margin-top は不要 */
150+ .my-page-layout {
151+ display flex ;
152+ min-height 100vh ;
153+ width 100% ;
154+ /* margin-top: 60px は書かない */
155+ }
156+
157+ /* globals.css の section { padding-top: 5rem } をリセット */
158+ .my-page-layout section {
159+ padding-top 0 ;
160+ }
161+
162+ /* globals.css の .hero { min-height: 100vh } をリセット */
163+ .my-page-layout .hero {
164+ min-height 0 ;
165+ display block ;
166+ padding-top 0 ;
167+ /* ページ固有の余白はここに追加 */
168+ }
169+
170+ /* globals.css の main { max-width: 1100px; margin: 0 auto } をリセット */
171+ .my-page-layout .main {
172+ flex 1 ;
173+ min-width 0 ;
174+ max-width none ;
175+ margin 0 ;
176+ padding 24px 20px ;
177+ }
178+ ```
179+
180+ #### サイドバーの sticky 計算
181+
182+ ``` css
183+ .my-page-layout .sidebar {
184+ position sticky ;
185+ /* ヘッダー(60px) + DisclaimerBanner(var(--disclaimer-height)) の合算 */
186+ top calc (60px + var (--disclaimer-height , 0px ));
187+ height calc (100vh - 60px - var (--disclaimer-height , 0px ));
188+ z-index 40 ; /* Header の z-50(50) より低く */
189+ }
190+ ```
191+
192+ ** 注意** : ` --disclaimer-height ` は ` DisclaimerBanner ` コンポーネントが JS で動的に計算してセットする。CSS 変数の初期値は ` 38px ` （デスクトップ1行）、モバイルでは ` 76px ` （2行）になる。
124193
125194### Phase 4: Convert HTML to TSX
126195
@@ -154,6 +223,23 @@ Map every HTML CSS variable to the project's `globals.css` `@theme` token. Do NO
154223
155224 ** デシジョンテーブル・行列データ** : テキストのスペース揃えで列を表現している場合はフォント変更に脆弱なため、` <table> ` 要素への変換を優先する。
156225
226+ ** Mermaid 図解の移植** :
227+ - HTML 内に Mermaid 図解（` <div class="mermaid"> ` 等）が含まれる場合は、プロジェクト共通の ` <Mermaid> ` コンポーネントに移植してください。
228+ - 移植の際は、以下の Mermaid 構文規則（ブラウザレンダラーでシンタックスエラーを起こさないための必須ルール）を遵守してください：
229+ 1 . ** カラム0配置 (先頭空白なし)** : Mermaid ブロック内のコンテンツはインデントなし（先頭空白なし）でカラム0に配置します。
230+ 2 . ** 改行で分離** : 各ステートメントは改行で分離し、1行に複数ステートメントを連結しないでください。
231+ 3 . ** ノードラベルの1行化** : ノードラベル ` A["text"] ` の内容は必ず1行に収めてください。
232+ 4 . ** mindmap例外** : ` mindmap ` はインデントを保持して記述します。
233+ 5 . ** block-beta禁止** : ` block-beta ` は全体クラッシュの原因になるため、使用禁止とします（` graph TD ` 等で代替してください）。
234+ 6 . ** 全角・特殊記号の制限** :
235+ - 全角波ダッシュ ` 〜 ` → ` から ` 等の日本語に置換
236+ - 全角丸括弧 ` （） ` → 半角 ` () ` に置換
237+ - 全角ダッシュ ` ― ` → 半角ハイフン ` - ` に置換
238+ - 全角コロン ` ： ` → 半角コロン ` : ` に置換
239+ - ` subgraph ` ラベルや ` participant ` 等に丸括弧 ` () ` や絵文字（` 🌐 ` ` 🖥️ ` ` 👤 ` ` ⚡ ` 等）を含めない（削除・置換する）
240+ - 菱形ノード ` {} ` や ` quadrantChart ` 内テキストはダブルクォーテーションで適切に囲む
241+ - また、共通コンポーネントが出力する ` .mermaid-wrapper ` の表示圧縮や二重枠線を防ぐため、必ずページ固有 CSS にて正準リセットスタイル（` width: 100% ` , ` max-width: 100% !important ` , ` background: transparent !important ` 等）を記述してください。
242+
1572435 . ** Wrap** page content in a React component:
158244
159245``` tsx
@@ -334,3 +420,8 @@ Do NOT redefine these in page-specific CSS. Use them directly in TSX:
334420- ** Never align tabular data with spaces in ` .code-block ` ** — デシジョンテーブルや行列データはフォント変更で列ズレが起きるため ` <table> ` 要素を使うこと
335421- ** Never remove page -specific anchor nav bars ** — ページ固有のスティッキーナビ（` IntersectionObserver ` 付き）はグローバル Header と別物。` 'use client' ` コンポーネントとして移行し ` top: 60px ` を設定すること
336422- ** Never duplicate page scope classes in CSS selectors ** — ` .page-class .alert.page-class .green ` ではなく、` .page-class .alert.green ` のようにページクラスは最上位の1回のみ使用すること
423+ - ** Never add ` margin-top: 60px ` to page -specific layout wrappers ** — ` layout-content ` が既に ` padding-top: 60px ` （ヘッダー分）を持つ。さらに ` margin-top: 60px ` を追加すると 60px の余白が二重になる
424+ - ** Always reset globals .css interference for custom layout pages ** — サイドバー付き独自レイアウトでは ` section { padding-top: 0 } ` , ` .hero { min-height: 0; display: block; padding-top: 0 } ` , ` .main { max-width: none; margin: 0 } ` を必ずリセットすること（Phase 3b 参照）
425+ - ** Always verify and reset Mermaid sizing rules for migrated pages ** — 移行するページ内に Mermaid が含まれる場合は、必ず ` .claude/skills/fix-mermaid/SKILL.md ` の確認を徹底し、かつページ固有 CSS 内で ` .mermaid-wrapper ` の幅を ` 100% ` に広げて背景・枠線を透明化するリセット規則を追加し、表示サイズが極端に圧縮されるのを防ぐこと。
426+ - ** Always ensure code block CSS is defined ** — ページ固有 CSS ファイル内に ` .code-block ` , ` .code-line ` , および必要なシンタックスハイライト（` .code-keyword ` , ` .code-cyan ` 等）のスタイル定義が存在していることを必ず確認する。定義がない場合は、他の移行済みページから定義をコピーして追加すること。
427+ - ** Always review and correct translation errors ** — 特に「A of B 」（例: ` 成果物 of 誤り ` , ` インタフェース of 検証 ` など）のように英語の直訳表現が不自然に日本語テキストや Mermaid 図の中に残っていないかを必ず走査し、「A のB 」などの自然な日本語表現に修正すること。
0 commit comments