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

チェック項目一覧

2つ目はデイトラの課題です。

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

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

1、誤字脱字がないか

difffで各テキストをチェックします。特に文章という文章がないですが一応確認。クリア。

2、改行位置は適切か

全てクリア。

3、フォントは適切か

WhatFont等で調べます。DAY21でフォントの指定をWebフォントにしましたのでデフォルトに戻します。問題なし。

4、色が適切か

ColorPick Eyedropperかデベロッパーツールで確認します。Cardのテキストカラーと、Newsのテキストカラーが違う点に注意です。問題なし。

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

スムーズにレスポンシブ化されました。

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

全てクリア。

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

全てクリア。

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

いくつか警告とエラーが出ました。全て、sectionのidが空という件でした。全ての「id=””」を消しました。

CSS→CSS Validation Service

結果：おめでとうございます！ エラーはありません。

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

全てクリア。

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

 PerfectPixelで比較します。DAY12のヒーローイメージで使ったメインビジュアルのコードが残っておりかなりズレていました。取り除いたらほぼぴったりに重なりました。

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

問題なし。

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

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

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

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

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

全てクリア。

21、画像が同じか

全てクリア。

次は「DAY23 スライダー(カルーセル)を作る」です。