ヘッダーの上の隙間はが紛れていないか疑え！
ページのヘッダー上部に隙間が出たら
ごくまれに、ページの一番最初のコンテンツの上、普通はヘッダーだと思うけど、とにかくページの一番上に隙間ができてしまうことがある。
ソースを見てみても何も記述されていない。
そんな時は、Chromeの「要素の検証」で調べてみると、「」という文字列が混入されていることがある。
「BOM」が挿入されてしまっている！
「」を調べてみると、これはBOM（Byte Order Mark）というもので、ソースを編集した時のテキストエディタによって挿入されてしまうことがあるらしい。主に、
- Windowのメモ帳
- TeraPad（テラパッド）
このいずれかを使ってファイルを編集すると、BOMが挿入されてしまうことがあるらしい。
隙間の原因「」の削除方法
terapadを使用している場合は、 ファイル>文字／改行コード指定保存 から、文字コードを「UTF-8N」にして、保存し直す。
FTPアップしてあるファイルは、もう一度この手順で保存し直す。
メモ帳しか入っていない、とかいう人がいたら、サクラエディタなりMeryなりをインストールして、保存し直す。
WordPressやMovable TypeなどのCMSでBOMが出てしまった場合
今回、この検証に時間がかかったのは、該当ページがMovable Typeに入っていたため。
WordPressでも同様だと思うが、そのページのソースをエディタに移して保存し、貼り付け直す、つぎにそのページにインクルードしているテンプレートも同様に貼り付け直す、という手順を踏んでしまったために、無駄に小１時間かけてしまった。
そうではなく、まずは、そのページからリンクしているファイルの中で、FTPアップしたファイルはないかを探す。
今回は、他人が「analyticstracking.php」をTeraPadで作成して、FTPから直接アップしていた事が原因だった。
「analyticstracking.php」をBOMなしで保存しなおして上書きしたところ、ページ上部の隙間は無事消え、た。
「メモ帳」や「TeraPad」を使っている人は要注意
そもそも、TeraPadを使用しない、というのはどうだろうか。
SublimeTextやDreamweaverはもちろん、サクラエディタやVim、MeryなどはデフォルトでBOMなしで保存するようになっている。
TeraPadでなければいけないという場面に出くわしたことがないが、TeraPad使いでphpやhtml編集を行う人は、エディタから見直すいい機会なのでは。（そんな人どんだけいるの？
以上、２年ぶりくらいに出くわしたので、次出くわした時忘れないようメモ。
