HTML/CSSのコードレビューをします

より高品質なコーディングをしたい方へ

HTML（1ページ）とCSS（1ファイル、細かく分けている場合は主要ファイル）のコードレビューを行います。 いきなりですが、例えばスマホ用のハンバーガーメニューで次のようなソースコードを書いていたりしないでしょうか？ <div class="menu"> <span></span> <span></span> <span></span> </div> これだとデザインを再現するためだけのソースになっており、これだけでもいくつかの問題があります。 修正するとしたら例えば次のような形です。 <div class="menu"> <button type="button" class="menu__toggle"> <span class="menu__text">メニュー</span> </button> </div> メニューで有ることが分かるように「メニュー」等のテキストが必要ですし、このメニューはタップもしくはクリックが出来ますのでフォーカスが当たらなければなりません。 そのため、button要素（a要素でも可）を使いフォーカスが当たるようにします。 といったように、ハンバーガーメニュー一つ見ても改善すべき点が有ったりします。 とは言え、ソースコードは一般の人がわざわざ見ることは少ないので、デザインさえ再現できていれば問題ないと思われてしまうことも少なく有りません。 しかし、実際にはソースコードの品質は非常に重要です。 品質の悪いソースコードは欠陥住宅と何も変わりません。 SEO対策としても重要ですし、メンテナンス性やアクセシビリティ対応の部分にも関係してきます。 そこで本サービスでは、HTMLの文章構造や文法のチェック、要素（タグ）選びの適切性、HTML・CSSのメンテナンス性などを主にチェックします。 アクセシビリティ対応に関しては、WCAG2.1の項目全てを確認するのは工数的にも難しい部分が有りますので、特に問題になりそうな箇所のみチェックさせて頂きます。 成果物としましては、総評、全体の改善案やアドバイス、具体的に問題がありそうなソースコードの指摘、修正用の参考ソースコードをお伝えします。 また、コードレビューに対して不明点が有れば質問もして頂いて問題有りません。