ゆるい技術メモ

記事一覧 / Web

静的 HTML を公開前に確認する

手順メモ · 一般的な例 · 実行環境依存

ローカル表示、リンク、狭い画面、HTML の構造を別々に確認するためのチェックリスト。

公開するフォルダを分ける

完成した HTML だけでなく、スタイル、画像、アイコン、リンク先のページがそろっているかを確認します。下書き、秘密鍵、環境変数ファイル、バックアップを公開フォルダへ混ぜないことを、最初の確認項目にします。

ローカル HTTP で開く

Python 3 が利用できる場合の一般例です。public を実際の公開フォルダへ置き換えます。ループバックに限定するため、別の端末から公開する設定にはなりません。

python3 -m http.server 8000 --bind 127.0.0.1 --directory public

ブラウザーで http://127.0.0.1:8000/ を開きます。終了は起動したターミナルで Ctrl+C です。Python の簡易サーバーはローカル確認用として使い、本番公開用の機能や安全性まで提供するものとは扱いません。

画面とリンクを確認する

トップページから各記事を開き、サイト名で戻り、RSS と「このサイトについて」も開きます。ブラウザーの開発者ツールで横幅 320px 程度を試し、本文が左右に切れないか、コードブロックだけを横スクロールできるか確認します。

見出しの順序、文字サイズ、リンクの色だけでなく、キーボードの Tab キーで移動できることも見ます。画像を使う場合は内容に合った代替テキストを付け、装飾画像と区別します。

構造の確認と内容の確認を分ける

WHATWG が案内する HTML チェッカーなどで、意図しない構文の誤りを探せます。ローカル版を使えば非公開ファイルを外部へ送らずに調べられます。チェックの成功は、記事の事実関係や使いやすさを自動で証明するものではありません。

実行していないコマンドを「動作確認済み」と書かないこと、例と実測結果を区別することも内容確認の一部です。日付や数値は根拠がある場合だけ掲載します。

本番の応答は公開後に別確認

ローカルで 404.html が表示できても、存在しない URL の HTTP ステータスが404になるとは限りません。サーバーのエラーページ設定、HTTPS の証明書、圧縮やキャッシュなどは、公開環境で別々に確認します。ローカル表示の成功と公開後の確認を混同しないようにします。

参考にした公式資料