文字コードについての質問です。

サイトの一部にMovableTypeを利用しているため、文字コードをUTF-8で制作、メインツールにDreamweaverMXを使用、出来たcssファイルをアップ後W3C CSS検証サービスにかけると、文書解析エラーが出ます。このcssファイルをezhtmlで開くと、「@charset "utf-8";」が「?@charset "utf-8";」となっていました。Dreamweaver上では、「?」は見えなかったのですが…。秀丸で開いても「?」は見えず、また、秀丸を使ってcssファイルを作り直してもやはりエラーが出てしまい、ezhtmlで見るとやはり「?@charset "utf-8";」となっていました。
「?」を削除して再度アップ、検証をかけると文書解析エラーは消えますが、font-familyの日本語指定部分が「????」等に文字化けした検証結果が出ています。

そもそも、どうしてこのようなことが起こるのか、この文字化けした日本語指定部分を正しく表示させる方法はあるのか、もっとよい制作方法はあるのか、知りたいです。よろしくお願いいたします。

回答の条件
  • 1人3回まで
  • 登録:2006/12/15 12:00:38
  • 終了:2006/12/18 16:41:17

回答(3件)

id:hamster009 No.1

hamster009回答回数3431ベストアンサー獲得回数502006/12/15 21:35:12

そのDreamなんたらを捨てたらどうでしょう。http://end

id:chankaz No.2

chankaz回答回数53ベストアンサー獲得回数32006/12/17 01:32:28

ポイント65pt

「@charset "utf-8";」が「?@charset "utf-8";」となっていました。

「?」はおそらく、BOM (Byte Order Mark) ではないかと。

普通のエディタでは見えませんが、バイナリエディタで表示させればわかります。(ファイルの先頭に「 EF BB BF 」があれば、それがBOMです)


もし「?」がBOMなら、BOMなしで保存(「utf-8N」で保存する)すれば消えます。


font-familyの日本語指定部分が「????」等に文字化け

CSSファイル内の日本語の文字列は文字参照に変換しておいた方が安全です。

http://hxxk.jp/2005/02/07/0132

http://www.eris.ais.ne.jp/~hiro/css/ref

id:graphico

ご回答、ありがとうございました!

ご指摘の通り、BOMでした。バイナリエディタで表示させたところ、「 EF BB BF 」がありました。削除したところ、文書解析エラーはなくなりました。

日本語指定部分についてですが、教えていただいたサイトを参考に文字参照に変換をしてみたのですが、どうもこちらはうまくいかず…例えば、

font-family: 'MS Pゴシック', …

font-family: '\ff2d\ff33\20\ff30\30b4\30b7\30c3\30af',

としてアップし直し再度検証サービスにかけてみたのですが、 そのまま表示されてしまいました。ただ、こういったことがあるとは知らなかったので、大変勉強になりました。


ブラウザ(Firefox)に、問題のあるcssファイルを直接突っ込んでみてチェックをすると、日本語の部分は問題なく表示されますし、同じくUTF-8で作られている他サイトのcssを検証サービスにかけてみても、やはり日本語部分(font-familyの指定部分)が「????」と表示されているので、こちら側の問題ではないのかもしれません。


もう少しいろいろ試してみますが、とりあえず文書解析エラーはなくなりましたので、終了とさせていただきます。

2006/12/18 16:28:56
id:yusaku5963 No.3

yusaku5963回答回数19ベストアンサー獲得回数02006/12/18 13:58:49

ポイント15pt

http://wakabano.cool.ne.jp/dream/setting/set_21.html

EZwebは文字コードがShift_JISなので。

id:graphico

ご回答、ありがとうございました。

「EZweb」は、もしかして私の質問文中の「ezhtml」のことでしょうか??

参照サイトのやり方のように、環境設定でUTF-8には設定しているのですが、どうもそのままではBOMがついてしまうようです。

2006/12/18 14:44:21
  • id:graphico
    ご意見・疑問点等ございましたら、コメント欄にお願いいたします。
  • id:pascal7
    自分が調べる時ならまずバイナリエディタでどんなコードになったか調べます。
    以下はバイナリエディタの例です。
    http://www.vector.co.jp/soft/win95/util/se079072.html
  • id:graphico
    コメントを頂き、ありがとうございます!教えていただいたバイナリエディタで問題のファイルを開いてみました。chankazさんにもご指摘をいただいたように、BOMが入っておりました…。良いエディタを教えていただき、ありがとうございました。少しですが、ポイントを送らせていただきます。
  • id:chankaz
    文書解析エラーがなくなってよかったですね。お役に立てたようでよかったです。


    >>
    例えば、
    font-family: 'MS Pゴシック', …

    font-family: '\ff2d\ff33\20\ff30\30b4\30b7\30c3\30af',
    としてアップし直し再度検証サービスにかけてみたのですが、 そのまま表示されてしまいました。
    <<
    「\ff2d\ff33…」がそのまま表示されてOKですよ。
    実際には「MS Pゴシック」が反映されます。


    ちなみに、このエスケープ(「MS Pゴシック」→「\ff2d\ff33…」)は、Safariユーザーもためのものですので、閲覧者の中にSafariユーザーがいるようなら、エスケープしてあげた方がいいと思います。

    >>
    同じくUTF-8で作られている他サイトのcssを検証サービスにかけてみても、やはり日本語部分(font-familyの指定部分)が「????」と表示されているので、こちら側の問題ではないのかもしれません。
    <<
    もしかしたらその検証サービスは日本語に対応していないのかもしれませんね。
    cssファイルを適用させているhtmlファイルをブラウザで表示させてみて、きちんとフォントが反映されているなら問題はないと思います。
  • id:graphico
    なるほど、このエスケープはSafariユーザーのためのものなのですね。多くのユーザーの方に可能な限り正しい表示で見ていただきたいので、エスケープしようと思います。

    そうですね、もしかしたら対応していないのかもしれません…とりあえず今確認している環境では、きちんとフォントも反映されており、問題なさそうです。

    丁寧なコメントを頂き、ありがとうございました!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません