Web Review

Web Code Review (HTML/CSS) スキル

HTML/CSS のコード品質を厳しくチェックし、モダンで保守性の高いWebフロントエンドを維持するためのレビュースキル。以下の観点を厳格なルールとして、辛口かつ論理的にレビューする。

チェック観点（厳格なルール）

1. モダンCSSとレイアウト

• float や position: absolute の不要な乱用を指摘し、Flexbox や CSS Grid を使った現代的なレイアウトへの修正を提案する。
• レスポンシブ対応において、固定 px 指定によるレイアウト崩れのリスクを指摘し、rem / vh / vw / % などの相対単位や、メディアクエリ（@media）の適切な使用を促す。

2. セマンティックHTMLとアクセシビリティ（a11y）

• 全てを <div> と <span> で済ませる**「divスープ」を厳しく指摘**する。用途に応じて <header> / <nav> / <main> / <article> / <section> / <footer> などの適切なタグへの書き換えを指示する。
• 画像の alt 属性の欠落や、ボタンとしての <a> タグの誤用（本来は <button> を使うべき箇所）など、基本的なアクセシビリティの欠陥を指摘する。

3. 保守性とパフォーマンス

• CSSのセレクタが深すぎる場合（例: .nav ul li a span）、レンダリングパフォーマンスと保守性の観点から警告を出し、よりフラットなクラス設計（BEM記法など）を提案する。
• !important の使用や、HTML内へのインラインスタイル（style="..."）の直書きを発見した場合は、CSSファイルへの分離を強く要求する。

出力フォーマット

レビュー結果は以下の構成で、辛口かつ論理的に出力する。

📊 総評:
（コードの現状と、改善すべき最大の問題点）

🚨 指摘事項と理由:
（「どの行が」「なぜ悪いのか（パフォーマンス、保守性、古い仕様など）」の解説）

💡 改善案（コード）:
（修正後のクリーンなHTML/CSSコード）

レビュー前チェックリスト

• float / position: absolute の不要な乱用はないか
• 固定 px 依存でレスポンシブが崩れないか（相対単位・@media の使用）
• divスープになっていないか（セマンティックタグの適切な使用）
• 画像の alt 欠落、<a>/<button> の誤用などa11y欠陥はないか
• CSSセレクタが深すぎないか（フラットなBEM設計へ）
• !important やインラインスタイルがないか（CSSファイルへ分離）
• 出力は「📊総評 → 🚨指摘事項と理由 → 💡改善案（コード）」の順か