UTF-8とUTF-8Nの違いでデザインが崩れた

Movable Typeで生成したatom.xmlをphpで読み込み、日付とタイトルにデザインをつけて表示しようとしました。

デザインを入れる前までは問題なく進んだけど、デザインを入れてみると表示が崩れているではありませんか。。。

cssでfloat:leftを指定し、２段組で表示してあげる予定でした。
しかし、右側のdivが１行下がってしまう…。

原因はphp(文字コード:UTF-8)でatom.xml(文字コード:UTF-8N)を読み込み、デザインテンプレート(文字コード:UTF-8)に日付とタイトルをを埋め込み出力(表示)していたため。

phpで出力されているデータ（テンプレート）の先頭にBOM(Byte Order Mark)がつけられ、そのBOMがデザインの崩れを引き起こしていました。

UTF-8とUTF-8Nが混在していました。
すべてのファイルの文字コードをUTF-8Nにすることで解決できました。

問題解決への道のり

1. 完成予定のソースを(x)htmlに直接記述　→　思い通りに表示される。


2. phpで表示しソースをコピーし、サクラエディタで表示　→　「・・」のようなコントロールコードが表示された


3. こんどはTeraPadで表示　→　文字コードがUTF-8Nと認識された


4. 使用しているファイルを全てUTF-8からUTF-8Nに変更

いつもExpression Webを使用していたので、全く意識していないものでした。
ちなみにサクラエディタと秀丸エディタのUTF-8はUTF-8Nのことのようです。

関連リンク

• Expression WebでのUTF-8の扱い


• UTF-8 と UTF-8N の違いは何か？