ホームページを作っていると、時々よく分からない変な現象が起きます。今回はPHPでHTMLファイルを呼び出すとき、或いはPHPファイルにHTMLを記述した場合に、ホームページのトップ(上部)に隙間が出てしまう現象について解説します。
最初はPHPを使った自作CMSで、この上部に隙間が出てしまう現象が起き、いろんな方法を試してもついに原因が分からなかった、、、
それから半年が経ち、今回はWordPressでオリジナルホームページを作ることになり、はやり同じ現象が起きる。
生成されたソースコードを見ても、ブラウザの検証機能で見ても分からない。最終的に何かの偶然で隙間がなくなったことで解決しました。
以下、この偶然を研究した結果です。
PHPファイル或いは呼び出されるHTMLファイルの文字コードをUTF-8Nに指定し変更すると一発で解決です。
エディタによってはやり方が違うので、たとえばDreamWeaverでは「メニュー」→「修正」→「ページプロパティ」→「エンコーディング」の「Unicode署名を含める(BOM)(S)」のチェックを外します。
TeraPadなら、「ファイル」→「文字/改行コード指定保存」→「文字コード」をUTF-8Nに変更して保存します。
秀丸ならば、「名前を付けて保存」する際のウィンドウに「エンコードの種類」の横に「BOMを付ける」のチェックを外します。
メモ帳でしたら、必ずBOM付けられるので、ほかのエディタにしましょう。
半年のイライラが方法が分かるとこんなにも簡単だなんて!
PHPファイルだけじゃなく、HTMLファイルもUTF-8が標準になりつつあります。UTF-8にはBOMありとBOMなしがあり、ホームページに使う場合基本BOMなしです。
ではその「BOM」は一体なにものなのか、UnicodeのUTF-16のエンコーディング方式において、エンディアンを指定するためにファイルの先頭に記入する値。と言ってもいまいちです。要はファイルを読み込む前にまずこのBOMがあるかないかで、ビッグエンディアンなのかリトルエンディアンなのかを判別しています。
間違った方式だと判読できないからです。ほかにも文書がUnicodeで記述されているかどうかを判別するために用いられるため、UTF-8でも先頭にBOMがついている。
ホームページに使った場合、特にPHPのインクルード処理ではこのBOMを解読できないため、謎の隙間が出てしまうのです。