HTMLの表示確認とエラーチェックのやり方
HTMLをWebサイトやブログ、メールに使う前に、表示を確認してミスを見つけておくと安心です。ページ・部分的なコード・メールテンプレートのどれにも使える手順を紹介します。
1. 3つの幅で表示を見る
スマホ・タブレット・ノートPCを切り替えます。はみ出す文字、横に長すぎる表、max-widthのない画像は375ピクセル幅ですぐに分かります。
2. コンソールを読む
赤い行はJavaScriptのエラーで、その後の処理が止まっています。行番号はJavaScriptタブ、またはHTML内のscriptの位置を指します。
3. コードチェックの指摘を直す
まずはエラーから。閉じ忘れたタグや重複したidはレイアウトやスクリプトの不具合の原因になります。次にaltやtitleの抜けなど、アクセシビリティやSEOに関わる警告を直しましょう。
ブログやCMSに貼るコードのコツ
- エディタに入れる部分だけを貼り、htmlやbodyは含めない
- スタイルはインラインかCSSタブに入れて最終的な見た目を確認する
- 貼る前に整形して、後から読みやすくしておく
- 訪問者の多くはスマホなので、スマホ幅で必ず確認する