review-css スキル

開いているHTML/CSSファイルを読み込み、以下の観点でレビューする。 指摘は「観点ごと」に整理して出力。修正はしない（提案のみ）。

🔍 レビュー観点

① 不要ルール

• •HTMLから削除されたクラスのCSSが残っていないか
• •display: none 等で永久に見えない要素のスタイルがないか
• •animation-delay: 0s 等デフォルト値の無駄な記述

② 重複の共通化

• •同じプロパティセットが複数セレクタに繰り返し書かれていないか
• •例: opacity: 0; animation: dropDown ... が4箇所など
• •→ 共通クラスに切り出せないか提案

⚠️ 共通化のやりすぎに注意

• •アニメーションの delay や duration 等、要素固有の値は個別に書いた方が追いやすい
• •共通化すると設定が2箇所に分散して読みにくくなる場合がある
• •目安: 5箇所以上の重複 → 共通化OK / 3〜4箇所 → 個別のままでもよい
• •背景画像の共通スタイル（background-size: cover 等）は共通化向き
• •アニメーション設定は個別に書く方が向いている

③ 変数化（マジックナンバー・色）

• •同じ色コード（#fff 等）が複数箇所に出現していないか
• •同じ数値（2rem 1.5s 等）が繰り返されていないか
• •→ :root の CSS変数に切り出せないか提案

④ CSSプロパティ順

推奨順序：

1. •配置（position / top / right / bottom / left / z-index）
2. •サイズ・ボックス（display / width / height / margin / padding）
3. •見た目（background / border / border-radius / color / opacity）
4. •テキスト（font / text-decoration / text-align）
5. •アニメーション（transition / animation）
6. •その他（cursor / pointer-events）

⑤ コメント不整合

• •コメントの内容と実際のコードが一致しているか
• •例: 「フレックスで〜」と書いてあるのに実態はgrid
• •古い実装の説明が残っていないか

⑥ セマンティック（HTML）

• •クリック要素が <div> になっていないか → <button> に
• •ナビゲーションに <nav> が使われているか
• •見出し階層（h1→h2→h3）が正しいか
• •<a> の href="#" が意味のあるアンカーになっているか
• •不要なラッパー <div> が挟まっていないか

⑦ 構造の重複

• •同じ値が親子両方に書かれていないか（例: height: 100svh が2箇所）
• •親で設定すれば子に不要なプロパティがないか

⑧ 仮クラス名

• •aaa test tmp xxx 等の仮名クラスが残っていないか
• •クラス名がセクション名と一致しているか（命名規則: [section]_[element]）

⑩ AIっぽいコメントの検出

以下はAIが書いたと疑われやすいパターン。削除 or 短い人間らしいコメントに書き換え。

変更履歴系（❌ 要削除）

• •/* ← 追加 */ /* ← 変更 */ /* ← relative → absolute */
• •<!-- h2→h1: サイトのメインタイトル --> 等のBefore/After説明

説明文・知識解説系（❌ 要削除）

• •/* delay中は非表示 */ /* アドレスバーが出ててもコンテンツが〜 */
• •/* ※20%は楕円になるので注意 */ 等の「知識を教えるコメント」
• •/* svh = safe viewport height */ 等の用語解説

日付・管理系（❌ 不自然）

• •/* 2026-02-19 レビュー済 */ 等の日付コメント（CSSに日付を書く習慣は普通ない）

人間らしいコメントの基準

• •✅ /* 左上のロゴ */ → 場所・役割だけ
• •✅ /* グローバルナビゲーション */ → 名前だけ
• •✅ /* 角丸 */ → 一言
• •❌ /* 文字を中央に配置するため */ → 理由の説明（borderline）
• •✅ /* overflow: hidden; */ → コメントアウトされたコードは残してOK

⑨ アクセシビリティ

• •<img> に alt 属性があるか
• •<button> に aria-label があるか（テキストがない場合）
• •フォーム要素に <label> が紐付いているか

🎯 実行フロー

1. •対象ファイルを読み込む（HTML + CSS）
2. •観点①〜⑨を順番にチェック
3. •指摘があった観点のみ出力（問題なければスキップ）
4. •各指摘に「現状コード」と「改善案」を添える
5. •最後に優先度まとめを出す

📋 出力フォーマット

## ① 不要ルール
- `.header_nav_list` のCSS → HTMLから削除済みのため不要

## ② 重複の共通化
- `opacity: 0; animation: dropDown...` が4箇所 → 共通クラス化を推奨

（問題なし → その観点はスキップ）

---
優先度高: ① ③
優先度中: ④ ⑤
優先度低: ⑧

注意事項

• •修正はしない（提案・指摘のみ）
• •ユーザーが「直して」と言ったら実施する
• •新しい観点を追加したい場合は、このファイルの「レビュー観点」セクションに追記する
• •観点は番号で管理し、追加時は末尾に番号を続ける