全国公立学校事務長会の資料管理を紹介するページを作ったとき、本文は新しい説明に変わっているのに、ブラウザーでは説明図の配置が崩れる症状が出ました。制作時の確認で、新しいHTMLに対して古いCSSが使われていることを切り分け、参照するURLをファイルの内容に応じて変える方式に直しました。同じ状況に出会ったときの調べ方を、WordPressと静的な確認版の両方を作った実例で説明します。
見た目を直す前に、どの版を読んでいるかを聞く
CSSは、HTMLの文字や画像をどう配置し、どんな色や余白で見せるかを指定するファイルです。HTML側で「この部分は工程表」と印を付けても、その印に対応するルールが古いCSSに存在しなければ、予定した見た目になりません。新しい本文が出ていることは、見た目を決めるファイルまで新しい証拠にはならない。ここが今回の切り分けで大事でした。
もし本文も古いなら、まず更新したページを見ているかを調べます。本文は新しいが新しいクラスの指定だけ効かないなら、実際に読み込んだCSSのURLと中身を確認します。新しいCSSにルールがあっても、その要素に別のルールが勝っている場合は、キャッシュと別の問題です。開発者ツールで対象要素を選び、適用されたルールと読み込んだファイルを対応させます。
調査を頼むときの指示を四つに分ける
次は、この作業を踏まえて整理した依頼文の例です。
WordPressの固定ページを更新した。見出しは新しいが説明図の配置が崩れる。まずHTMLの対象要素、CSSの取得URL、CSSの中に対応ルールがあるか、最終的に適用された値の四点を確認して。観測した結果を並べてから原因候補を絞り、修正範囲を示して。確認版とWordPress版で別々に検証すること。
「デザインが崩れたから整えて」と伝えると、余白や見出しサイズの調整へ進むことがあります。再現の条件と先に見る証拠を指定すると、元の設計を変えずに読み込みの問題だけを直せる場合があります。
同じURLの中身を差し替えると、古い版が残り得る
ブラウザーや途中のキャッシュは、一度取得したファイルを再利用できます。便利な仕組みですが、同じURLのまま内容を差し替えると、保存していた古い版を使う場合があります。自分の端末で強制再読み込みして直っても、別の利用者が同じ操作をするとは限りません。強制再読み込みは原因候補を調べる道具として扱い、配布方法の修正と分けて考えます。
今回の制作版では、CSSとJavaScriptの内容から短い識別子を計算し、参照URLに付けました。内容が変わると識別子も変わり、HTMLは新しいURLのファイルを指します。変わらなければ同じURLを再利用できます。識別子は中身の目印です。公開時に毎回手で番号を増やす必要がなく、反映し忘れる箇所を減らせます。
WordPress版だけ直して、配布版を忘れない
このサイトには静的な確認版、WordPressで動く確認版、CSSをページ内に含める持ち運び用の版がありました。静的な版とWordPress版は参照URLを更新しました。持ち運び用の版を作る処理は、元のCSSとJavaScriptの参照を拾って中身を埋め込みます。URLに目印を付けると参照の形も変わるので、持ち運び用の処理もそれを認識するよう調整しました。
ここでの教訓は、変更を入れる場所だけでなく、その出力を読み取る処理を探すことです。WordPressと静的HTMLを並行して使う場合は、実際に配る入口を列挙してから直すと、片方だけ正常な状態を見つけやすくなります。
修正後に残した確認の順番
同じブラウザーで新しいHTMLを開き、CSSの参照URLが更新され、説明図のスタイルが適用されることを確認します。その後、WordPress版でも図の三工程と公開画像の読み込みを確認しました。持ち運び用の版は外部のCSS参照に頼らず表示できる構成かを検査しました。
自分のサイトで再現するなら、新しく足した見出し一つと、その要素に効く新しいCSSルール一つを目印にすると追いやすくなります。HTMLとCSSの版が揃っているかを確認してから、色や余白を調整します。
技術資料：MDNのHTTPキャッシュ解説
コメント