Skip to content

Commit 680c77b

Browse files
myoshi2891myoshi2891
committed
fix: add layout container and scope CSS variables/styles to resolve full-width issue in CT-GT guide
1 parent ee69038 commit 680c77b

2 files changed

Lines changed: 87 additions & 66 deletions

File tree

‎app/istqb-ct-gt-complete-guide/istqb-ct-gt-complete-guide.css‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
11
/* ===== CSS VARIABLES ===== */
2-
:root {
3-
--bg-deep: #030712;
4-
--bg-surface: #0d1117;
5-
--bg-card: #111827;
6-
--bg-card-hover: #1c2a3a;
7-
--neon-green: #00ff88;
8-
--neon-cyan: #00d4ff;
9-
--neon-amber: #ffb703;
10-
--neon-red: #ff006e;
11-
--neon-purple: #7c3aed;
12-
--neon-pink: #f72585;
13-
--text-primary: #e2e8f0;
14-
--text-secondary: #a8b8cc;
15-
--text-muted: #6b7f96;
16-
--border-dim: #1e293b;
17-
--border-glow: rgba(0, 255, 136, 0.3);
18-
--font-mono: 'Space Mono', monospace;
19-
--font-head: 'Syne', sans-serif;
20-
--font-body: 'IBM Plex Sans JP', sans-serif;
21-
}
2+
.istqb-ct-gt-page {
3+
--bg-deep: #030712;
4+
--bg-surface: #0d1117;
5+
--bg-card: #111827;
6+
--bg-card-hover: #1c2a3a;
7+
--neon-green: #00ff88;
8+
--neon-cyan: #00d4ff;
9+
--neon-amber: #ffb703;
10+
--neon-red: #ff006e;
11+
--neon-purple: #7c3aed;
12+
--neon-pink: #f72585;
13+
--text-primary: #e2e8f0;
14+
--text-secondary: #a8b8cc;
15+
--text-muted: #6b7f96;
16+
--border-dim: #1e293b;
17+
--border-glow: rgba(0, 255, 136, 0.3);
18+
--font-mono: 'Space Mono', monospace;
19+
--font-head: 'Syne', sans-serif;
20+
--font-body: 'IBM Plex Sans JP', sans-serif;
21+
}
2222

23-
/* ===== RESET ===== */
24-
*,
25-
*::before,
26-
*::after {
27-
box-sizing: border-box;
28-
margin: 0;
29-
padding: 0;
30-
}
23+
/* ===== RESET ===== */
24+
.istqb-ct-gt-page,
25+
.istqb-ct-gt-page *,
26+
.istqb-ct-gt-page *::before,
27+
.istqb-ct-gt-page *::after {
28+
box-sizing: border-box;
29+
}
3130

32-
/* ===== SCANLINE OVERLAY ===== */
33-
body::before {
34-
content: '';
35-
position: fixed;
36-
inset: 0;
37-
background: repeating-linear-gradient(
38-
0deg,
39-
rgba(0, 0, 0, 0.03) 0px,
40-
rgba(0, 0, 0, 0.03) 1px,
41-
transparent 1px,
42-
transparent 4px
43-
);
44-
pointer-events: none;
45-
z-index: 9999;
46-
}
31+
/* ===== SCANLINE OVERLAY ===== */
32+
.istqb-ct-gt-page::before {
33+
content: '';
34+
position: fixed;
35+
inset: 0;
36+
background: repeating-linear-gradient(
37+
0deg,
38+
rgba(0, 0, 0, 0.03) 0px,
39+
rgba(0, 0, 0, 0.03) 1px,
40+
transparent 1px,
41+
transparent 4px
42+
);
43+
pointer-events: none;
44+
z-index: 9999;
45+
}
46+
47+
/* ===== GRID TEXTURE ===== */
48+
.istqb-ct-gt-page::after {
49+
content: '';
50+
position: fixed;
51+
inset: 0;
52+
background-image:
53+
linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
54+
linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
55+
background-size: 40px 40px;
56+
pointer-events: none;
57+
z-index: 9998;
58+
}
4759

48-
/* ===== GRID TEXTURE ===== */
49-
body::after {
50-
content: '';
51-
position: fixed;
52-
inset: 0;
53-
background-image:
54-
linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
55-
linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
56-
background-size: 40px 40px;
57-
pointer-events: none;
58-
z-index: 9998;
59-
}
6060

6161
/* ===== ANIMATIONS ===== */
6262
@keyframes fadeInDown {
@@ -112,6 +112,9 @@
112112
}
113113
}
114114

115+
/* ===== SCOPED CONTENT ===== */
116+
.istqb-ct-gt-page {
117+
115118
/* ===== STICKY NAV ===== */
116119
.sticky-nav {
117120
position: sticky;
@@ -1083,3 +1086,4 @@
10831086
width: var(--bar-width, 70%) !important;
10841087
}
10851088
}
1089+
}

‎app/istqb-ct-gt-complete-guide/page.tsx‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import NavBar from './NavBar';
33

44
export default function IstqbCtGtCompleteGuide() {
55
return (
6-
<>
6+
<div className="istqb-ct-gt-page">
77
<NavBar />
88

99
{/* ===== HERO ===== */}
1010
<section id="hero" className="hero">
11-
<div className="hero-eyebrow">ISTQB® SPECIALIST STREAM ● 2025年版</div>
11+
<div className="container">
12+
<div className="hero-eyebrow">ISTQB® SPECIALIST STREAM ● 2025年版</div>
1213
<h1>🎰 CT-GT<br />ギャンブル産業テスター<br />完全ガイド</h1>
1314
<p className="hero-sub">
1415
Gambling Industry Tester — ゼロから試験合格まで<br />全Chapter・全K-Level・全テスト技法を網羅
@@ -19,11 +20,13 @@ export default function IstqbCtGtCompleteGuide() {
1920
<span className="meta-chip cyan">前提: CTFL</span>
2021
<span className="meta-chip purple">シラバス v1.0</span>
2122
</div>
23+
</div>
2224
</section>
2325

2426
{/* ===== TOC ===== */}
2527
<section id="toc" style={{marginBottom: "3rem"}}>
26-
<h2
28+
<div className="container">
29+
<h2
2730
style={{fontFamily: "var(--font-display)", fontSize: "1.5rem", color: "var(--color-accent-green)", marginBottom: "1rem", fontWeight: "700"}}
2831
>
2932
📚 目次
@@ -64,11 +67,13 @@ export default function IstqbCtGtCompleteGuide() {
6467
<span className="toc-card-desc">公式・学習・規制・業界リソース</span>
6568
</a>
6669
</div>
70+
</div>
6771
</section>
6872

6973
{/* ===== CHAPTER 0: OVERVIEW ===== */}
7074
<section id="ch0" className="chapter">
71-
<div className="chapter-header">
75+
<div className="container">
76+
<div className="chapter-header">
7277
<span className="chapter-num">Chapter 0</span>
7378
<span className="k-badge">概要</span>
7479
<h2>資格概要・ロードマップ</h2>
@@ -194,11 +199,13 @@ export default function IstqbCtGtCompleteGuide() {
194199
<div className="mermaid-wrap">
195200
<div id="mermaid-0" className="mermaid"></div>
196201
</div>
202+
</div>
197203
</section>
198204

199205
{/* ===== CHAPTER 1: INTRODUCTION ===== */}
200206
<section id="ch1" className="chapter">
201-
<div className="chapter-header">
207+
<div className="container">
208+
<div className="chapter-header">
202209
<span className="chapter-num">Chapter 1</span>
203210
<span className="k-badge">K1 / K2 / K3</span>
204211
<h2>ギャンブル産業入門</h2>
@@ -504,11 +511,13 @@ export default function IstqbCtGtCompleteGuide() {
504511
<strong>✅ 管轄（Jurisdiction）の重要性</strong>
505512
同じゲームでも管轄によってRTPの最低値・最大ペイアウト・ギャンブル年齢・許可されるゲーム種別が異なります。テスターは常に「どの管轄向けか」を確認してからテストを設計する必要があります。
506513
</div>
514+
</div>
507515
</section>
508516

509517
{/* ===== CHAPTER 2: ECOSYSTEMS ===== */}
510518
<section id="ch2" className="chapter">
511-
<div className="chapter-header">
519+
<div className="container">
520+
<div className="chapter-header">
512521
<span className="chapter-num">Chapter 2</span>
513522
<span className="k-badge">K1 / K2 / K3</span>
514523
<h2>ギャンブル産業エコシステム</h2>
@@ -776,11 +785,13 @@ export default function IstqbCtGtCompleteGuide() {
776785
<span className="ref-url">https://ecogra.org/</span>
777786
</a>
778787
</div>
788+
</div>
779789
</section>
780790

781791
{/* ===== CHAPTER 3: TESTING TECHNIQUES ===== */}
782792
<section id="ch3" className="chapter">
783-
<div className="chapter-header">
793+
<div className="container">
794+
<div className="chapter-header">
784795
<span className="chapter-num">Chapter 3</span>
785796
<span className="k-badge">K1 / K2 / K3</span>
786797
<h2>ギャンブル産業テスト技法</h2>
@@ -1296,11 +1307,13 @@ export default function IstqbCtGtCompleteGuide() {
12961307
<span className="ref-url">https://www.pcisecuritystandards.org/</span>
12971308
</a>
12981309
</div>
1310+
</div>
12991311
</section>
13001312

13011313
{/* ===== EXAM TIPS ===== */}
13021314
<section id="exam" className="chapter">
1303-
<div className="chapter-header">
1315+
<div className="container">
1316+
<div className="chapter-header">
13041317
<span className="chapter-num">付録</span>
13051318
<span className="k-badge amber">試験対策</span>
13061319
<h2>試験対策・サンプル問題</h2>
@@ -1498,11 +1511,13 @@ export default function IstqbCtGtCompleteGuide() {
14981511
□ RTP・ハウスエッジ・ボラティリティ・ヒット率の定義と関係を説明できる<br />
14991512
□ 管轄（Jurisdiction）がテストに与える影響を具体例で説明できる
15001513
</div>
1514+
</div>
15011515
</section>
15021516

15031517
{/* ===== REFERENCES ===== */}
15041518
<section id="references" className="chapter">
1505-
<div className="chapter-header">
1519+
<div className="container">
1520+
<div className="chapter-header">
15061521
<span className="chapter-num">参照</span>
15071522
<span className="k-badge cyan">URL一覧</span>
15081523
<h2>参照 URL 一覧（カテゴリ付き）</h2>
@@ -1717,12 +1732,13 @@ export default function IstqbCtGtCompleteGuide() {
17171732
>
17181733
</a>
17191734
</div>
1735+
</div>
17201736
</section>
17211737

1722-
{/* ===== FOOTER ===== */}
17231738
<footer
17241739
style={{borderTop: "1px solid var(--border-dim)", padding: "2.5rem 0 1.5rem", textAlign: "center"}}
17251740
>
1741+
<div className="container">
17261742
<p style={{fontFamily: "var(--font-mono)", fontSize: "1rem", color: "var(--text-muted)"}}>
17271743
🎰 CT-GT ギャンブル産業テスター完全ガイド 2025 | ISTQB® Specialist Stream<br />
17281744
<span style={{color: "var(--color-accent-orange)"}}
@@ -1735,8 +1751,9 @@ export default function IstqbCtGtCompleteGuide() {
17351751
>
17361752
の公式サイトで行ってください。
17371753
</p>
1754+
</div>
17381755
</footer>
17391756

1740-
</>
1757+
</div>
17411758
);
17421759
}

0 commit comments

Comments
 (0)