ヘッダーの上の「妙な空間」は『&#65279』かもしれない。

HTMLのコーディングをしていて、「ヘッダーの上に妙な空間が出来てしまう」ことは無いでしょうか？
いくつか原因があるのですが、そのうちの1つが原因で解決に時間がかかってしまったので、みなさんもそうならないよう参考になればと思います。

「妙な空間」の原因は『&#65279』かもしれない

ブラウザに搭載されているHTMLの開発ツールを用いて確認すると、HTMLソースの1行目に『&#65279』という記述が含まれていました。
当初はこれが原因とは考えていなかったのですが、これを調べてみると色々なことがわかり、原因の特定となりました。

『&#65279』とは？ → BOMです。

BOM（Byte Order Mark）と呼ばれているものです。ボムと聞いて良くないものと思いがちですが、これはファイルを実行する前に「Unicodeで作成されたテキストのファイルですよ」と宣言する『見えない文字列』の事です。UTF-16では必須項目だそうです。
現在主流のUTF-8では「あっても無くても良い」ということになってはいるのですが、これがある事によりHTMLが正常に読み込めなかったり（今回のケースでは空間が出来てしまう。）、PHPが実行出来なかったりします。

BOMが入らないようにするには？入ってしまったらどうすれば？

今回、『&#65279』が入ってしまった原因は、ちょっとした編集をする際にWindows標準ツールの『メモ帳』を使ったことが原因でした。他のエディタ類でも設定を変更せず、そのまま使ってしまうとBOMが入ってしまうものもあるようですが、私の環境ではWindowsのメモ帳が原因でした。
メモ帳では特に設定項目もなくBOMを含んだ状態で保存されてしまうので使わないようにしましょう。

・BOMが入らないようにするには？

BOMの入ってしまう『メモ帳』を使うのをやめましょう。「メモ帳は使っていないよ」という方も使っているテキストエディタの設定を見直し、BOM無しで保存しているか確認しましょう。

・入ってしまったらどうすれば？

BOM無しで保存できるテキストエディタで保存し直しましょう。

Windowsでは比較的メジャーなツールである『TeraPad』では、文字コードの指定の箇所で『UTF-8N』を選択します。Nの無い『UTF-8』はBOM有りで保存してしまうので注意が必要です。

その他の原因は？

WordPressでのサイト製作ではWordPressログイン状態での管理ツール帯？（サイト上部にでる黒い帯）が影響している事があるみたいです。
今回のケースは静的HTMLでしたので、これが原因ではありませんでした。

まとめ

いままで、『サイト製作なんて、メモ帳でも出来るんですよ』とか言ってましたが、今後この表現を使うのはやめようと思いました。

「文字コードはとりあえずUTF-8使っておけばOK。改行コード？何それ？」とこの辺の知識は無くてもHTMLコーディングは出来てしまうのですが、わかっている人とわかっていない人では何かあった時の対処に差が出ます。
今回の私はまさに「わかっていない人」でした。
また「自分は大丈夫！」と思っていても「他社が製作したHTMLを改修する」場合にはこういった場面に遭遇すると思われます。

この先UTF-8からUTF-16へ移行することがあるかもしれません。その際に慌てることの無いよう、文字コード周りは一通りおさらいしておくと良いかもしれません。

この記事を読んだ方はこちらも読まれています

Winodws10でVPN（L2TP/IPsec）の自動接続設定