サイト確認で、cssで設定していない謎の隙間(マージン)を発見。。
↓開発ツールで確認すると、インクルードファイルの直前に「」と記載あり。
原因は、インクルードファイルの文字コードが「UTF-8のBOMつき」になっている事のようです。
なぜ、だたのUTF-8のはずが「BOMつき」になってしまったのか。。。？
どうやら、windowsのメモ帳で開いて保存すると「UTF-8のBOMつき」になってしまうそうです。。
このような対応として、BOMをサブディレクトリ含めて確認→削除する方法をご紹介します。
ファイル内のどこに、BOMの記述があるのか？確認する方法
テキストエディタなどでファイルを開いても、ブラウザでみるような隙間もゴミ記述もありません。どれがBOMなんだろう。。？と、疑問がわきます。
lessコマンドで確認することができます。
＊手順
ターミナルを開いき、cdで対象ディレクトリまで移動します。($ cd 対象ディレクトリをドラックアンドドロップ)
それから↓こちらを入力すると、
$ less hoge.html(対象ファイル名)
ターミナルに、対象ファイルの↓中身の記述が表示されます。
BOMつきファイルの確認(特定ファイルの確認)
↓fileコマンドで実行します。$ file hoge.html(対象ファイル名)
↓BOMなしの場合
↓BOMありの場合
サブディレクトリも含めて、ディレクトリ内すべてのファイルをBOMあり or 無しの一括確認と削除
fileコマンドで実行します。1. BOMあり or 無しの確認
$ find . -type f -print0 | xargs -0 nkf --guess
↓結果
2. BOMの削除
$ find . -type f -print0 | xargs -0 nkf --overwrite -w -Lu
BOMつきファイルのみ(サブディレクトリも含めて)検索するには。。
ファイル数が膨大だと、確認が大変なのです。。なので、BOMつきファイルのみ表示する方法も記載します。
$ find . -type f -name "*.html" | xargs file > file.txt
$ cat file.txt | grep "with BOM"
$ cat file.txt | grep "with BOM"
説明すると、
・1行目→ 結果をfile.txtに書き込む。
・2行目→「with BOM」のファイルだけ抽出
ちなみに、ディレクトリ直下に「file.txt」が生成されますので、不要の場合は処理が終わったら「file.txt」を削除してください。
(このファイルで確認することもできるので便利です。)
削除は、前項の方法で実行していただければ思います。
nkfコマンドでBOMあり or 無しの一括確認
ちなみに、インストールされていれば、nkfコマンドでも可能です。↓確認(直下ファイルのみ)
$ nkf --guess *.html
↓BOMの一括 追加
$ nkf --overwrite --oc=UTF-8-BOM *.html
↓BOMの一括 削除
$ nkf --overwrite --oc=UTF-8 *.html
