2011年07月14日

これからのHTMLの文字コード指定は…

 私はWindowsマシンを使ってきた関係上、長い間、Shift-JISでHTMLファイルを作ってきた。
 しかし少し前から、UTF-8で書かれたファイルを原稿としてもらったりすると、書き直す必要のある場合があって、新しいサイトはUTF-8でファイルを作り、もちろんヘッダで、
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
と書いていたが、従来からあるShift-JISのサイトはそのままでも構わないと思っていた。
 が、意外な問題が発生することが分かった。

sjis_utf8.gif 上に示したのは、私が管理しているサイトの一部分を試験的に書き換えたものだ。そのサイトは、1年程前にスタートしたもので、当時私はまだXPを使っていた。文字コードはShift-JISとした。
 そのころは、何の問題もなかったのだが、Windows7に切り替えてからちょっと困ったことが起こった。ページの切替を示すために<div>タグと、styleのボーダーを組み合わせて、ページの切替のリンクの表示をしていたのだが、数字の位置が、従来中央部分にあったものが少し高い位置に表示されるようになってしまったのだ。
 上のアニメの上段は私のオリジナルで、下段は「正常」に表示されていたはずの、某サイトのHTMLの記述とCSSをそのままコピーしたもの。

 当初この原因は、vista以降使われるようになったWindowsの標準フォント「メイリオ」と、例えばMSP-ゴシックとのベース位置の違いなどによるものだと思っていた。
 ところが不思議なことに同じような表示をしても、中央部に表示されているサイトを多く見かけるのだ。
 CSSの記述での私のミスがなどと考えたが、いろいろとテストをする内に別の原因だと分かった。
 上のアニメで、もらいもので正常の筈の下段でも数字が中央に表示される場合と、少し高い位置に表示される場合がある。

 その原因とは、メイリオをフォントにもっている環境では、IE8(他のバージョンのIEは持っていないのでテストしていない)では、UTF8にすると中央部に文字が表示されるということだ。
 当該のサイトでは、cssによってフォントは、
font: 100%/1.5 "メイリオ", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
と指定している。

 ただし、上の段の「3」だけは、
<font face="MS ゴシック, MS Gothic, Osaka−等幅, Osaka-mono, monospace">3</font>
としてみた。興味深いのは、この「3」はどちらのファイルでもあまり位置が変わらずほぼ中央部にっ表示されている事だ。
 ただ、今後はメイリオが主要なフォントになることが考えられるので、基本的にはメイリオの表示を考慮する必要があると思われる。
 従って、今日のタイトル「これからのHTMLの文字コード指定は…」の続きは「UTF-8だ」ということになる。


 ただし、SafariやChromeでは、Shift-JISとUTF-8の表示の違いは全くなかった。相変わらず「困ったIE」ということだ。




posted by kewpie at 01:07| Comment(0) | TrackBack(0) | ファイル作成
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/46739659
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。