このステップの目的
最後に、自分が作ったサイトをあらゆる角度からチェックし、不具合や見落としをすべて潰して「本当に公開できる状態」に仕上げることを目指します。
checklistやることリスト
- ブラウザ検証ツールで確認
F12（開発者ツール）を開き、コンソールエラーやレイアウト崩れをチェック - HTML/CSSの文法チェック
W3C Validator や CSS Validator で文法エラーを検出＆修正 - リンク・画像の動作確認
全リンクが正しいページに飛ぶか、すべての画像が表示されるか - アクセシビリティ確認
alt 属性、title 属性の記述漏れなし。キーボード操作（Tabキー移動）で操作できるか。色のコントラスト比は読みやすいか。 - コードの最終整形
インデントを揃える、不要なコメントを削除。Prettier などで自動整形。 - 実機テスト
スマホ・タブレット実機で表示・操作感をチェック - 最終デプロイ準備
ファイル名・パスに誤りがないか最終確認。GitHub Pages やレンタルサーバへのアップ方法を確認。
tips_and_updatesポイント解説
- 開発者ツール
- ElementsパネルでHTML構造を確認し、ConsoleパネルでJavaScriptのエラーや警告をチェックします。
- バリデーション
- HTML ValidatorやCSS Validatorにコードを貼り付けるだけで、文法を自動で検証してくれます。
- アクセシビリティ
- 代替テキストがないと、画面読み上げツールで内容を伝えられません。文字と背景のコントラスト比は最低でも「4.5:1」を目安にしましょう。
- 実機テスト
- ブラウザのシミュレータではなく、本物のスマホで必ず確認しましょう。ボタンやリンクがタップしやすいか（サイズ／余白）も重要な確認項目です。
warningよくある間違いと対策
- HTMLのタグが閉じられていない
- Validator で「閉じタグ忘れ」を検出し、修正しましょう。
- リンク先を相対パスで間違えている
- ルートからの
/か、一つ上の階層を指す../を再確認しましょう。 - コメントが大量に残っている
- 公開前に不要なコメントは削除しましょう。
- 画像の alt が空欄
- 画像の内容を簡潔に記述してアクセシビリティを向上させましょう。
チェックポイント
✅ 開発者ツールで赤いエラー・黄色い警告がない
✅ W3C Validator で「0 errors」
✅ すべてのリンクが正しく動作
✅ alt／title 属性がすべて記載済み
✅ 実機（スマホ・タブレット）で表示・操作をテスト
✅ コードがきれいに整形されている