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

2017/08/01 技術系 投稿者:竹内

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

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)