ポートフォリオサイトのスクロール地獄からの脱出

はじめに

ポートフォリオサイトに「教育×AIツール一覧」を載せたかっただけでした。

ただそれだけのはずが、
気づけば

VSCodeと格闘
UIが消える
CSSで全部透明になる

というフロントエンド地獄に突入。

最終的に KimiK2.6にデバッグを丸投げして復旧したので、
その過程と学びをまとめます。

やりたかったこと

教育系GPTツールを一覧表示👇

観点別評価コメント生成
災害時学校対応マニュアル
IEP作成支援
期末レポート生成　etc…

さらに（最重要）

カード内にスクロールバーをつけた

最初の問題（VSCode）

発生した問題

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に課金したいと痛感したのでした。