コードレビューを受ける前のチェックリスト
メンタのコードレビューを受ける方がコードレビューを受ける前にご自身で行なっていただくチェックリストです。
以下9つのチェック項目が全てYESになるか確認お願いします。
画像の名前に日本語を使っていない
リセットcssを読み込んでいる
そもそもリセットCSSが何かわからない、読み込んでないという人は調べて読み込んでください。ちなみにメンタが使っているリセットCSSは以下のものです。
https://menta.work/post/detail/27656/01C3hld8kzY4jsYbKwTv
横揺れしていない
320pxから2000pxまで全ての画面幅で横揺れが起きていないことを確認してください。
サーバーアップしてスマホで見たときに横にスクロールできたり画面下部にバーがあったら要注意です。検証ツールで画面幅を超えてしまっている要素がないか確認してください。
原因がわからなければメンタに相談してください。
ツールを使ってデザインがズレてないか確認している
デザインカンプからのコーティングをしている方のみ確認してください。
以下の手順で確認
https://junpei-sugiyama.com/perfectpixel/
altタグを指定しているかつ画像のイメージがつく文言になっている。
以下の動画を参考
【SEO対策をしよう | 納品前にからなずチェック】
altタグに書くべき内容↓
https://www.youtube.com/watch?v=FEVM5k_aBDM&t=1008s
スタイリングをIDやタグにしていない
h1 h2などのタグに直接スタイリングすると、HTMLのタグを変えただけで見た目が変わってしまいます。するとデザインの変更や修正があったときに修正が大変になります。
またidに指定すると詳細度が変わってしまうので管理がしにくくなります。
line-heightをpxで指定していない
line-heightは基本的にはフォントサイズとの倍率で決めます。文字を真ん中にするためにline-heightをフォントサイズと同じpxで指定することがあるのですが、そのような特殊な使い方以外の時には倍率で指定しましょう。
フォントサイズが16pxでline-heightが28.8pxになっている場合はline-height: 1.8;を指定します。（16x1.8が28.8）
もしフォントサイズが16pxでline-heightが24pxだったらline-height 1.5を指定します。
使っていないCSSがない
よくあるのが同じクラスに対してCSSファイル内の2箇所でスタイリングしていることがあります。CSSファイルに不要が記述がないか確認してください。
画像をwebpに変換している
pngやjpgの画像ではなくwebpを使用してください。簡単にできるので詳しくは以下の記事をみてください。
https://menta.work/post/detail/27656/ksX1lbCslRhfnxsg1OaO
