Mac IE からのコメント文字化け対策

データベースが崩壊した旧サイトですが、Google 様のキャッシュや Internet Archive: Wayback Machine などのお力を借りて、8 割方記事を復活させることができました。今調べたら未だに残ってて、懐かしの旧サイト完全版が見れました。記念に前の記事で紹介している「Paparazzi!」を使って、キャプチャしておきました。いやいや、いいですね〜ミニバナー。もうこれに夢中でした（笑）。

なんて思い出に浸りたかったのではなくて、消えてしまった記事の中に未だに検索に引っ掛かってしまうものがあるので、ここで書き直そうと思ったわけです。

全然気がつかなかったトラブルの一つが、Mac IE でコメント欄に書き込むと、書いた先から文字化けしていく現象です。文字化けしている状態で書き込むんでも、表示は正常なので、書いている人にしかわからないんですね。別のサイト構築中に発覚して、慌てて自分のサイトを確認したら案の定文字化けしていたという次第です。

当サイトの場合はスタイルシートが原因でした。スタイルシートでサイトデザインをする時、ブラウザの初期設定をリセットした方が、後々楽になります。それはもう半端じゃないぐらいに。例えば「border」「margin」「padding」の値を0にしておくとか。当サイトの場合は他にもこんな感じで初期設定をリセットしています。

* {
margin: 0;
padding: 0;
border: none;
background: transparent;
vertical-align: 0;
list-style-type: none;
text-decoration: none;
text-indent: 0;
font-family: "Futura", "Franklin Gothic Medium", "Lucida Grande", "Verdana", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Arial", "MS Pゴシック", sans-serif;
font-size: 100%;
font-style: normal;
font-weight: normal;
}

要素を「*」とすることで「全ての要素」となります。これだけ適用したページはこんな感じ。つまり、一旦どのタグでマークアップしても同じ見た目にしてるわけですね。で、ここで重要なのが「font-family」です。この場合真っ先に選ばれるフォントは「Futura」で、それが無ければ「Franklin Gothic Medium」というように表記順でブラウザが選んでいきます。日本語の場合は英語専用のフォントでは表示できないので、真っ先に選ばれるのは「Hiragino Kaku Gothic Pro（ヒラギノ角ゴ Pro W3）」で、それが無ければ「Arial」をとばして「MS Pゴシック」といった順になります。ちなみにここで指定しているフォントが一つもなければ、システムフォントの中で「sans-serif」を選びます。

通常このような表記順でも問題ないのですが、Mac 版 IE のみがなぜか「textarea」に関して忠実にフォント順で表示しようとしているようです。憶測ですが。ということで「textarea」に対して新たにフォントを指定し直すことで、この問題を回避できます。例えばこんなこんな感じで。

textarea {
font-family: "Osaka","Trebuchet MS", verdana, arial, sans-serif;
}

Mac IE でしかこの問題を確認してませんので、OS 9 標準フォントの「Osaka」を使用した方が無難だと思います。

各サンプル
textarea フォント未設定
textarea に Osaka を指定

さらっと書き直すつもりだったのですが、えらい回り道してますね。すみません。相当数の方が OS X に移行してますが、OS 9 を使っている人もいるので、心優しい Mac ユーザーは必ずしておきたい対策ですね（笑）。

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]