デイトラWeb制作コース中級編DAY22 コーディング後の品質を担保するテスト①

チェック項目一覧

今回デイトラの課題とは別に、STARTOUTの課題もコーディングしました。おかげでブログがお留守になっていましたが更新再開します。1回目はSTARTOUTの課題のレビューです。

チェック項目ははにわまんさんのこの記事とほぼ一緒です。

https://haniwaman.com/coding-test/

1、誤字脱字がないか

difffで各テキストをチェックします。全てクリア。

2、改行位置は適切か

全てクリア。

3、フォントは適切か

WhatFont等で調べます。グローバルナビのフォントがNoto Sans JPではなくLatoになっていました。調べなければ気づかなかったと思います。チェックは大切ですね！他はクリア。

4、色が適切か

ColorPick Eyedropperかデベロッパーツールで確認します。colorやborder-colorは基本的に線が細いので見落としそうですね。パッと見同じ色に見えますが、「記事一覧を見る」のボタンと、フッターのロゴの色がメインカラーとは異なりました。

5、スムーズにレスポンシブ化されるか

横760pxあたりが不味いものの、主なブレイクポイントでは崩れなし。

6、スマホ（320px）、タブレット（768px）、PC（カンプ）の3パターンの表示に崩れはないか

左の飾り文字がどうしても思ったように配置できず…。これについてはレビュー待ちです。

PC、タブレットでは問題がありませんが、スマホ表示がきれいではなかったです。

【重要】7、水平スクロールしないか

PC、タブレットはクリア。スマホで少しスクロールバーが出てしまいました。

8、リンク要素（ボタン等）のホバー時の挙動は設定されているか

特に指定がないためとりあえずカーソルを指マークにして、opacityでホバー時少し薄く。

9、JavaScriptの挙動は正しいか

全てクリア。

【重要】10、altが正しく設定されているか

Alt & Meta viewerでチェックしました。10箇所設定なしでした。設定しておきました。

ただし、アクセシビリティの観点から、装飾的な画像のaltは空にする(『プロの「引き出し」を増やすHTML＋CSSコーディングの強化書』より)というセオリーがあるため、それは例外です。

ケース別にaltの設定例が載っていますので詳しくは上記の書籍を参照してみてください。

【重要】11、見出し構造が不自然ではないか

ブックマークレットを使用します。問題なし。

12、TDK(Title, Description, Keyword)は正しく設定されているか

問題なし。

【重要】13、閉じタグチェック

HTMLエラーチェッカーを使います。ひとつ閉じ忘れがありました！危ない危ない。

【重要】14、W3Cチェック（HTML、CSS）

それぞれ以下のサイトでチェックします。

HTML→Markup Validation Service

いくつか警告とエラーが出ました。

Warning: Section lacks heading. Consider using h2–h6 elements to add identifying headings to all sections.

セクションの中には見出しがないと良くないとのことでした。「見出しがないものはそもそもsectionで囲む必要は無い」というのは知りませんでした。しかしエラーではないのでそのままにしておきました。

articleとsectionの入れ方 – Qiita

Warning: The type attribute is unnecessary for JavaScript resources.

HTML5ではJavaScriptのtype属性は不要なんだそうです。削除しておきました。

CSS→CSS Validation Service

結果：

106 次のプロパティが正しくありません : padding-top -20px に負の値は使えません : -20px

776 次のプロパティが正しくありません : height unit には 0 だけが使えます。数字の後には単位を入れる必要があります : 30

869 次のプロパティが正しくありません : width unit には 0 だけが使えます。数字の後には単位を入れる必要があります : 390

1150 Property paddinh doesn’t exist. The closest matching property name is padding : 25px

1168 Property paddinh doesn’t exist. The closest matching property name is padding : 25px

ほとんどは凡ミスでした。106行目以外は修正しておきました。(推奨はされていないけど他にやりようがなかったので)

15、デザインカンプの効果をCSSで表現できているか（box-shadow、opacityなど）

改めてカンプをチェックしてみると、画像の透過度が低い箇所が2箇所ありました。しかし最初に書き出した時点で画像に反映されているので特に修正するところはありませんでした。

16、デザインカンプとWebサイトを見比べてズレがないか

 PerfectPixelで比較します。若干のズレはありますが許容範囲だと思います。

【重要】17、Chrome、Firefox、Safari、Edgeで表示崩れが起きていないか

問題なし。

18、リンク切れが起きていないか

Frogでチェック。そもそも下層ページがないため今回は省略します。

19、コンソールエラーが出てないか

Chromeのデベロッパーツールでチェック。問題なし。

20、画像が圧縮されているか

念の為全てImage Optimにかけ直しておきました。

21、画像が同じか

全てクリア。

できた！と思っても、改めて調べてみると穴があるものですね。チェックは大切。次はデイトラの課題のテスト結果です。