閲覧側のフォント設定でレイアウトが崩れる・・・メイリオに注意!

ホームページ制作

閲覧側の環境に配慮する上で、IE6は何度も取り上げてきました。
IE6に比較すれば若干ではありますが、Windows Vistaに絡んでの問題です。
閲覧環境の初期設定フォントは以下のようになります。(ブラウザはIE6または7)

  • XP:「MS P ゴシック」
  • Vista:「メイリオ」
  • W7:「Meiryo UI」

この違いをイメージにするとこんな感じ
※閲覧環境に依存しますので、ここで正確な再現は不可。よって、画像によりイメージとして再現

Vistaデフォルトの「メイリオ」が他に比べ、横に広がっているのです。

では、どんなことが起きるかと言えば・・・
例えばテーブルで表を作り、その中に文字を組み込んだ場合、こんなことが起こります。
※フォントサイズは、同一指定

メイリオを想定しないでテーブルの横幅を設定した場合、途中で改行されます。

ホームページ側でフォントを「MS ゴシック」(等幅)等に指定すれば問題ないという方もいらっしゃいますが・・・フォント指定は原則NG。もっともテーブルの横幅を直接指定するのもNGです。
Web標準に準拠しつつ、配慮する・・・