古いウェブページのソースコードを読むための基礎知識
古いウェブページを開くと、画像が表示されなかったり、日本語が文字化けしていたり、画面の一部だけが別の枠で読み込まれたりすることがあります。見た目だけでは内容や構造を判断しにくい場合でも、HTMLソースや関連ファイルを確認すると、ページがどのように作られたのかを読み取れます。
たとえば、古いフレーム構成を使った日本語サイトでは、最初に短い案内文だけを表示し、別のトップページへ移動させる作りが見られます。タイトル、ロゴ、画像が壊れている場合も、ソースコードには元のファイル名、リンク先、文字コード、レイアウト方法などの手がかりが残っています。
ソースコードを読む作業は、プログラム全体を理解することから始める必要はありません。HTMLの役割、URLの指定、文字コードの宣言、古いタグの意味を順番に確認すれば、ページの構成と問題点を整理できます。ここでは、レガシーなウェブページを調査するための基本的な見方を解説します。
HTMLソースを表示する方法
ウェブページのソースコードは、ブラウザーのメニューから表示できます。一般的には、ページ上で右クリックして「ページのソースを表示」を選ぶか、キーボードショートカットを使います。開発者ツールの「要素」画面でもHTMLを確認できますが、表示後にJavaScriptで変更された状態が含まれるため、元の記述を調べたいときはソース表示が適しています。
ソースの冒頭には、文書型宣言、html要素、head要素、body要素が置かれます。現代のページでは<!doctype html>から始まることが多い一方、古いサイトではHTML 4.01やXHTMLの宣言が使われています。宣言が古いこと自体はエラーではなく、ページが作成された時代や想定ブラウザーを推測する材料になります。
画面に表示される文章を探すときは、ソース内検索が便利です。案内文の一部、日本語の単語、画像の拡張子、ドメイン名を検索すると、該当するタグへ移動できます。見た目が崩れていても、href、src、title、altなどの属性には元の構成情報が残っていることがあります。
HTMLの基本構造をつかむ
head要素には、ページタイトル、文字コード、スタイルシート、検索エンジン向けの情報などが記述されます。<title>の内容はブラウザーのタブや検索結果の候補に使われるため、画面上にタイトルが表示されなくても重要です。タイトルが空欄だったり、意味のない文字列だったりする場合は、サイト名を外部情報だけで断定せず、複数の手がかりを照合します。
body要素には、利用者に見える本文、画像、リンク、表、フレームなどが入ります。見出しに見える文字が必ずしもh1やh2で囲まれているとは限りません。古いページでは、表のセル、フォント指定、画像ボタンを使って見出しやメニューを表現している例も多くあります。
リンクを読むときは、表示文字とリンク先を分けて確認します。次のような記述では、画面に見える「日本語版はこちら」と、実際に開かれるURLは別の情報です。
<a href="jp/index.html">日本語版はこちら</a>
相対URLのjp/index.htmlは、現在のページが置かれている場所を基準に解釈されます。末尾のスラッシュの有無や、ファイル名の大文字・小文字によっても結果が変わるため、リンク切れを調べるときはURLをそのまま記録します。
フレーム構成を読み解く
古いウェブサイトでは、framesetとframeを使って画面を複数の領域に分割していました。メニュー用の枠、本文用の枠、上部のロゴ用の枠などを別々のHTMLファイルから読み込む方式です。現在のHTML仕様ではフレームは廃止されていますが、過去のサイトを調べるときには頻繁に登場します。
典型的な記述は次のような形です。
<frameset rows="80,*">
<frame src="header.html" name="header">
<frame src="main.html" name="main">
</frameset>
この場合、最初の枠にheader.html、残りの大きな枠にmain.htmlが読み込まれます。最初に表示されるファイルがサイト本体ではなく、フレームの配置だけを定義する親ページであることに注意が必要です。画面に短い案内しか出ていないときは、src属性の参照先をたどることで、実際の本文ページを探せる可能性があります。
target属性も重要です。メニューのリンクにtarget="main"と書かれていれば、クリック後の内容は名前がmainのフレーム内に表示されます。フレーム名とリンク先を対応させると、サイト内のナビゲーション構造を図として整理できます。フレームが表示されない環境では、noframes要素内の案内文が代替表示されることもあります。
文字コードと日本語の文字化け
日本語の古いページで最初に確認したいのが文字コードです。HTML内に次のような宣言があれば、ページがどの符号化方式を想定しているかを判断できます。
<meta http-equiv="Content-Type"
content="text/html; charset=Shift_JIS">
現在はUTF-8が広く使われていますが、古い国内サイトではShift_JIS、EUC-JP、ISO-2022-JPが使われていることがあります。サーバーが返すHTTPヘッダーとHTML内のmeta宣言が一致しないと、ブラウザーが誤った文字コードで解釈し、文章が「縺薙ｓ縺ｫ縺｡縺ｯ」のように崩れることがあります。
文字化けを直すには、まずソースコードそのものがどの文字コードで保存されているかを調べます。ブラウザーの表示設定だけを変えて解決する場合もありますが、元ファイルが別の符号化方式で保存されていると、単純な切り替えでは不十分です。テキストエディターで文字コードを指定して開き、複数の候補を比較すると判別しやすくなります。
日本語がすべて壊れているとは限りません。英数字やURLは正しく見える一方、全角文字だけが崩れるケースもあります。また、画像内に埋め込まれた文字はHTMLの文字コードとは別に扱われます。画像が欠落しているときは、alt属性やファイル名から元の意味を推測します。
画像と外部ファイルを調べる
画像はimg要素のsrc属性で指定されています。たとえばimages/logo.gifという記述があれば、現在のHTMLファイルから見た相対位置に画像が存在するはずです。画像が表示されない場合は、ファイルの場所、拡張子、名前の大文字・小文字、サーバー上の公開状態を順番に確認します。
alt属性には、画像が利用できないときに表示する代替テキストが入ります。古いサイトでは、ロゴやメニューを画像で作り、altに短い説明だけを記述していることがあります。altが空の場合でも、ファイル名にtitle、banner、menu、homeなどの語が含まれていれば、画像の用途を推測するヒントになります。
スタイルシートはlink要素、JavaScriptはscript要素から探します。外部CSSが失われると、文字の色、背景、余白、表の幅などが一気に崩れます。HTMLだけを読むと単純な文章に見えても、CSSファイルによって画面の配置が決められていた可能性があります。
| 確認対象 | ソース内で探す記述 | 分かること | よくある問題 |
|---|---|---|---|
| ページタイトル | <title> |
ページ名や識別名 | 空欄、文字化け |
| 文字コード | charset |
日本語の符号化方式 | 宣言と実体の不一致 |
| 本文リンク | href |
移動先や階層構造 | 相対URLの誤解 |
| 画像 | src、alt |
ロゴやメニューの用途 | ファイル欠落 |
| フレーム | frameset、frame |
画面分割と読込先 | 現代ブラウザーで非対応 |
| 外部装飾 | stylesheet |
CSSファイルの場所 | CSSのリンク切れ |
| 代替表示 | noframes |
フレーム非対応時の案内 | 本文が省略されている |
URLとリンク先を追跡する
古いページを調査するときは、リンクをクリックするだけでなく、ソースに書かれたURLを記録します。相対URL、絶対URL、ルート相対URLにはそれぞれ解釈の基準があります。about.htmlは現在のディレクトリを基準にし、/about.htmlはドメイン直下を基準にします。http://やhttps://から始まるURLは、別の場所を直接指定しています。
リンク先が存在しないときも、記述自体が無意味になるわけではありません。ファイル名から、かつてのページ構成、言語別ディレクトリ、移転前のサイト設計を推測できます。jp、en、old、indexなどの名前は、言語版や入口ページの区別に使われていた可能性があります。ただし、推測と確認済みの事実は分けて記録することが大切です。
リダイレクトにも注意が必要です。HTMLのmeta http-equiv="refresh"、JavaScriptのlocation、サーバー側のHTTPリダイレクトによって、表示されたページから別のURLへ移動する場合があります。最初のHTMLだけを見てサイト全体を判断せず、移動前のページと移動後のページを別々に保存すると、構造を正確に追跡できます。
古い記述からページの役割を推定する
レガシーHTMLでは、現代的な意味づけよりも、画面を整えるための記述が優先されていることがあります。font、center、bgcolor、align、borderなどの属性は、文字色、位置、背景色、表の枠線を直接指定するために使われました。これらは現在では非推奨ですが、当時のデザインやページの役割を読み取る材料になります。
表の中に大量のセルが並んでいる場合、それはデータ表ではなくレイアウト用の表かもしれません。幅や高さ、背景画像、空白セルの有無を見ると、メニュー、バナー、本文領域の配置を推測できます。spacer.gifのような透明画像が使われていれば、余白を画像で調整していた可能性が高いでしょう。
調査記録には、確認できた要素を三つに分けて書くと整理しやすくなります。実際にソースに存在する記述、リンクやファイル名から合理的に推測できる内容、現在は確認できない未確定の情報です。タイトルやブランド画像が壊れているページでは、推測を断定しないことが特に重要です。
安全に保存して検証する
不明な古いサイトを調べる際は、ソースコードを先に保存し、ブラウザーで実行される内容を慎重に扱います。HTMLの閲覧だけなら比較的安全ですが、外部JavaScript、古いプラグイン、実行ファイルへのリンクが含まれている場合があります。調査用の環境を分け、不要なファイルを開かないことが基本です。
保存時には、URL、取得日時、HTTPヘッダー、HTMLファイル、画像、CSSを対応づけます。フレームページでは親HTMLだけ保存しても画面を再現できないため、frameのsrcで指定された子ページも確認します。ローカルで表示する場合は、相対パスを維持しないと画像やリンクがさらに壊れて見えることがあります。
ソースを読む目的は、失われたページを無理に復元して断定することではありません。どのファイルが入口だったのか、どの文字コードを使っていたのか、どのリンクが別ページを指していたのかを、根拠とともに把握することです。古いHTMLは不完全に見えても、保存されたタグや属性の一つひとつが、当時のウェブ設計を示す記録になります。
まずは対象ページのソースを保存し、title、charset、href、src、framesetを検索してください。表示が崩れているページほど、見た目ではなく記述を順番に追うことで構造が見えてきます。記録したURLと文字コードを照合しながら、古いウェブページの読み解きを始めましょう。