> | > 「~ (から・波線)」がWebページで文字化けする条件と対処法 全角チルダと波ダッシュ

「~ (から・波線)」がWebページで文字化けする条件と対処法 全角チルダと波ダッシュ

小川貴史

このエントリーをはてなブックマークに追加

Webページ上で「10月10日から10月23日の期間」といった表現したい場合、次のような表現をよく使うと思います。

画像:波ダッシュの正常な表示

しかし条件によっては、Winで表示した場合に「~」が崩れたように文字化けして表示がされる事があります。

画像:波ダッシュの崩れた表示

「~ (から・波線)」がWinで文字化けする条件

「~」がWinで文字化けする条件ですが、下記がそろった場合などに起こります。

  • Webページの文字コードが「UTF-8」
  • Macで「~」を入力した
  • Winで表示した (メイリオでは起こらない)

「~ (から・波線)」がWinで文字化けする理由

各OSで「~」を入力
  表示される文字
Winで入力 全角チルダ
(Unicode:FF5E)
Macで入力 波ダッシュ
(Unicode:301C)
UTF-8での表示
  Winで表示 Macで表示
全角チルダ
(Unicode:FF5E)
画像:Winで全角チルダの表示 画像:Macで全角チルダの表示
波ダッシュ
(Unicode:301C)
画像:Winで波ダッシュの表示 画像:Macで波ダッシュの表示

上記の表からわかるように、同じ「~」を入力していても、Winでは「全角チルダ(FF5E)」が表示され、Macでは「波ダッシュ(301C)」が表示されます。OSによって表示される文字が違うのです。

この「全角チルダ」と「波ダッシュ」ですが、Macでは同じ形状で表示されます。しかしWinではそれぞれ違う形状で表示され、Winの波ダッシュは崩れたような「~」で表示されてしまうのです。

余談:この現象は、WinのUnicodeに関連する問題から起こっています。WinのUnicode問題について詳しく知りたい方は、Wikipediaを参照してください。

「~ (から・波線)」がWinで文字化けする場合の対処法

ではどんな対処法があるかというと下記の方法があります。

(イマイチ) Macで全角チルダを入力する

全角チルダであればWinでも文字化けしませんので、Macで作業する際に「~」を波ダッシュではなく全角チルダで入力すれば問題は起こりません。

「なんだ、じゃあ簡単じゃない」と思うかもしれませんが、(私が調べた範囲での話ですが)Macで全角チルダ(FF5E)を入力するには、文字パレットから選択して入力するしかありません。これはかなり手間な方法です。

ことえりの文字パレット

そして、なんとかがんばって入力したとしても、全角チルダと波ダッシュはMac上では見た目が一緒ですので、正しく入力できたかどうかの判断をすることが困難です。これでは正確な作業は出来ません。

これらのことから「Macで全角チルダを入力する」は、あまり現実的な方法とはいえません。

(イマイチ) メイリオで表示させる

「メイリオ」フォントでは波ダッシュと全角チルダは、同じ形状で表示されます。ですので、CSSの「font-family」を使ってメイリオで表示されるようにすれば文字化けは起きません。

しかし、条件として閲覧者のPCにメイリオが入っている必要があります。Win Vistaの場合、メイリオはディフォルトで入っていますが、Win XPの場合は入っていません。

Vistaの普及率を考えると「メイリオで表示させる」も、あまり現実的な方法とはいえません。

余談:Win XP IE6のUTF-8だと、メイリオを指定しても表示されない場合があります。その時は、html要素に「lang="ja"」を追加してください。表示されるようになります。ちなみに、Win XPのメイリオはこちらで配布されています。

(オススメ) Winで波ダッシュを全角チルダに変換する

とても単純な方法です。Winで波ダッシュを全角チルダに変換してやればいいのです。Winであれば、見た目で判断することが出来るので変換も容易です。

肝心の変換する方法ですが、Windows版のDreamweaverの「検索および置換」機能や、秀丸(ver.7)の「grepして置換」などを利用して、Webサイト単位で変換を行うのが確実で良いかと思います。

この「Winで波ダッシュを全角チルダに変換する」ならば容易に出来ますので、一番現実的な方法だと思います。

Mac環境で作業していて、かつUTF-8で納品する場合の注意点の一つとして「全角チルダと波ダッシュの問題」は覚えておいた方が良いかと思います。

09/05/12追記
(オススメ)文字参照で全角チルダを表示する

アイビーネットblogをリニューアルしたところ、Winで波ダッシュを全角チルダに変換しても、記事を上げる時点で文字化けを起こしてしまいました。原因はよく分かりませんが、MTやMySQLのバージョンが変わったことが影響しているのかもしれません。

そこで、全角チルダを文字参照「~」で表示する方法に変えました。この方法であればMac上でも作業できます。単純に文字として全角チルダを表示する場合は、この方法が一番いいかもしれません。

このエントリーをはてなブックマークに追加

読者のコメント

けると
2009年5月 8日 16:31

「全角チルダ」を漢字登録してしまえばいいと思います。
たとえば、「ちるだ」とかで変換されるようにするのです。


ただし...
「から」という読みでは、あらかじめ「波ダッシュ」の方で
辞書が登録されてしまっているインプットメソッドがある
ようなので、「から」の候補に見た目同じ記号が出てきて
使いづらいので避けた方が良いでしょう。

小川貴史 Author Profile Page
2009年5月 8日 16:32

こんにちは。


>「全角チルダ」を漢字登録してしまえばいいと思います。


そうですね。その他、MacでJedit等のテキストエディタでなんかを使って全角チルダを波ダッシュに変換してやってもいいですね。


ただし、Mac上では見た目は全く同じなので、何かの拍子で全角チルダに戻ってしまうと確認が面倒ですね。


ということで、ここでは「Winで変換するのが確実」とまとめさせてもらっています。

コメントを投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

(HTMLタグは使用できません)

トラックバック

このエントリーのトラックバックURL
http://ib-ennoshita.jp/mt/mt-tb.cgi/48

ホーム > (X)HTML | Webサイト管理 > 「~ (から・波線)」がWebページで文字化けする条件と対処法 全角チルダと波ダッシュ

このページの先頭へ