【初心者向け】ローカルサーバを立てるかどうかで変わるブラウザ表示サイズ

はじめに

自分の想定していたサイズよりブラウザに小さく表示されてしまったことはないでしょうか？

このようなことが起きる理由としてファイルパスから直接開くか、ローカルサーバを介するかによって表示サイズが異なることがわかりました。

この記事では、Geminiに質問しながらわかったことをメモとして残していきます。

実際に使用した2つのURL

1. ファイルパス

file:///Users/mavo/practice/js/emotion/index.html#bad

2. ローカルサーバ経由

http://127.0.0.1:5500/emotion/index.html

2つのURLの違い

1. ファイルパス

file:///Users/mavo/practice/js/emotion/index.html

OSのファイルシステムから直接HTMLを読み込みます。

→ サーバーを介さないので、HTTPリクエスト/レスポンスがありません。

2. ローカルサーバ経由

http://127.0.0.1:5500/emotion/index.html

ローカルで立ち上げたサーバ（例：Live Server）経由で読み込みます。

→ HTTPプロトコルでアクセスするので、ヘッダー情報（Content-Type, Charset, CORSなど）が付きます。

表示サイズが変わる理由

1. ブラウザのデフォルトCSS（User Agent Stylesheet）が違う解釈をする場合

file:// だと文字コード（charset）やMIMEタイプを推測する必要があるので、フォントや行間が異なる場合があります。

一方、サーバ経由だと Content-Type: text/html; charset=UTF-8 が確定するので、解釈が安定する。

2. 相対パスの解釈の違い

file:// で開く場合、<link>や<img>の相対パスの基準が file:///Users/mavo/practice/js/emotion/

http://127.0.0.1:5500/emotion/ で開く場合、基準は http://127.0.0.1:5500/emotion/

これにより、CSSや画像が正しく読み込めない場合、デザインが崩れてサイズが変わります。

3. セキュリティ制限の違い

file:// だとCORSや一部のスクリプトがブロックされます。
JSや外部フォント（Google Fontsなど）が読み込めない
→ デフォルトフォントになり、サイズが変化します。

まとめ

この記事では、作成したHTMLが使用するURLによって、同じ内容でもブラウザへの出力結果が異なることについて解説しました。ローカルサーバを立てて確認した方が、より本番に近いと言えます。MIMEタイプ、CORS、フォント、JSの読み込みが正しく動くためです。確認するときは、積極的にローカルサーバを使っていきたいものです。

最後までお読みいただき、ありがとうございました。