ポートフォリオサイトのスクロール地獄からの脱出
はじめに
ポートフォリオサイトに「教育×AIツール一覧」を載せたかっただけでした。
ただそれだけのはずが、
気づけば
- VSCodeと格闘
- UIが消える
- CSSで全部透明になる
というフロントエンド地獄に突入。
最終的に KimiK2.6にデバッグを丸投げして復旧したので、
その過程と学びをまとめます。
やりたかったこと
教育系GPTツールを一覧表示👇
- 観点別評価コメント生成
- 災害時学校対応マニュアル
- IEP作成支援
- 期末レポート生成 etc…
さらに（最重要）
カード内にスクロールバーをつけた
最初の問題（VSCode）
発生した問題
- カード内スクロールが作れない
- 修正すると別のタブが消える
- script.jsが壊れてタブ切り替え不能
- 本日の課金枠終了……
Claude（Sonnet4.6デスクトップ版）の対応
Claudeの判断
カード式（mini-project）をシンプルなリスト表示に変更
script.jsが参照されているがファイルが存在しないか壊れている可能性
修正内容
-
gpt-mini-gridのカード式を廃止し、<ul class="gpt-simple-list">の箇条書きに変更 - 各項目は [GPT]バッジ + ツール名 — 説明 の1行形式でスクロール不要に
- 壊れた
script.jsへの参照を削除 - タブ切り替えJSを
index.html内の<script>タグに直接埋め込み -
.gpt-simple-list、.gpt-badge、.gpt-noteのスタイルを追加
そして起きた事故
何も表示されない
Kimi投入（k2.6instant）
HTML＋CSSを丸投げして解析させた結果👇
🔴 根本原因
① bodyのスクロールが封じられていた
body {
overflow: hidden;
}
全スクロール死亡事案だった
② glass-cardが透明
.glass-card {
opacity: 0;
}
表示されてるのに見えない๐·°(৹˃ᗝ˂৹)°·๐
③ activeクラスが付与されていない
表示条件を満たしていない( Д ) ﾟ ﾟ
④ CSS構文エラー
/* この部分が壊れています */
font-size: 0.95rem; /* ← セレクタなしにプロパティが書かれている */
color: #555;
line-height: 1.6;
}
.gpt-grid { ... }
修正内容（Kimi）
① スクロール復活
body {
overflow: auto;
}
② 表示強制
.glass-card {
/* opacity削除 */
/* transform削除 */
}
③ CSS構文修正
.gpt-simple-list li セレクタを追加
④ 背景フォールバック
background-color: #fff;
とりま復活(´;ω;｀)←すでにヘロヘロ
そして本来の目的：スクロールバー
kimiが無料枠だったので、修正箇所を出してもらう形にして、修正は手打ちにしました。
.gpt-simple-list {
list-style: none;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 220px; /* ← 追加：スクロール領域の高さ制限 */
overflow-y: auto; /* ← 追加：縦スクロール有効化 */
padding-right: 8px; /* ← 追加：スクロールバー分の余白 */
}
本来の目的達成。
次回以降の予定
スクロールバー装飾（これもkimi提案）
.gpt-simple-list::-webkit-scrollbar {
width: 4px;
}
.gpt-simple-list::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 10px;
}
.gpt-simple-list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}
今回得た学び
① AIは「部分最適」は得意、全体最適は弱い
Claude：
UI構造は綺麗にする
全知全能ではない。
Kimi：
コード関連の原因特定は本当に強い
課金するなら月額39ドルがたぶんいい
学びと結論： AIコーディングの現実
今の構図
- コードを書く → AI
- 壊す → AI
- 直す → 別のAI
- 最後の調整 → 人間（手打ち）
お財布に余裕があるバイブコーダーは「作るAI」と「直すAI」は分けた方がいい
Claude codeで自動化最強だから入れてみそとクライアントに言われ、、vscodeにClaude拡張したいけど、やり方分からないから教えてと言う友人に自分も入れてskillsの使い方をレクチャーしたとかでClaudeはじめて課金したんです。
正直ブログとかも書きやすいし、いいなぁとは思ったのですが、コード関連についてはデスクトップ版だからダメだったのか、Claude codeに投げるべきだったのかとかはあるのかもしれません。
でも以前もGensparkの書いたコードの修正でkimiが一番サクッといったので、やはり個人的にはkimi最強かなと思うのです。
お金に余裕があるなら、本当にkimiに課金したいと痛感したのでした。