人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

DOCUTYPEで"utf-8"?>としていたところ、MACのsafariで文字化けしているのがわかり、shift_jisに入れ替えてみました。
この場合、外部cssの一行目に入っている@charset ”UTF-8”;も削除するか、shift_jisに変更すべきなのでしょうか?
他の人が作ったものなので、よくわからず困っています。よろしくお願いします。

●質問者: piyo8184
●カテゴリ:ウェブ制作
✍キーワード:CSS MAC Safari Shift_JIS UTF-8
○ 状態 :終了
└ 回答数 : 8/8件

▽最新の回答へ

[1]合わせるべきは中身と宣言 JULY

CSS の中身に Shift JIS で記述されている部分があれば、

「@charset」の指定を Shift_JIS にするべきですが、

そもそも、そのファイルの文字コードは何ですか?

「開いてみたら文字化けしたから」ではなくて、そもそも、

中身が何の文字コードであるか、が先で、それに charset

の宣言を合わせるか、逆に charset の宣言どおりの文字

コードに変換するか、だと思うのですが...

余談:

Apache 2 が出たときに、Redhat でのデフォルトが、HTTP

のプロトコル上でデフォルトの文字コードを宣言しちゃって、

それを信じてブラウザが表示すると文字化けする、というのが

多発した時期がありましたが。


[2]>1 お返事ありがとうございました piyo8184

>そもそも、そのファイルの文字コードは何ですか?

ものすごく素人な質問なのですが、それはどこを見ればわかるのでしょうか?

WEBサイトの制作で、他の人が作ったCSSを利用して新たに作っているのですが、今まではDreamwerverでドキュタイプ宣言などは自動生成されるため、あまり気にしていませんでした。

(自動的にshift_jisが入っていたようです)

今作っているものはたまたまutf-8?となっており、外部CSSの一行目にも@charset "utf-8";となっていたので、あわせるべきものかもと思ったので質問させていただきました。

"utf-8";にしていても文字ばけしないこともあるのでしょうか?


[3]>2 Dreamwerverは文字コード変えられるので、調べないと... makoohira

メモ帳、シンプルテキスト、耳かき、その他のテキストツール、ワープロソフト類で開き、文字コードを見る。(でないツールもあります)

または、ブラウザの、表示>文字コードを変えていって、文字化けしないものが、そのファイルの文字コードです。

cssも同様に、テキストツールや、ブラウザで開いて(ドラッグ&ドロップして)表示>文字コードを変えてみましょう。


cssの文字コードは、css自身がどのコードで書かれているか?ということですので、

例えばcss内で、「font-face:MS Pゴシック;」と書かれていたときに、

どのフォントなのか分からないため、ブラウザ標準のフォントで表示します。

文字化け自体は起こりませんが、見栄えに影響します。


p.s.

「DOCTYPEに文字コードを指定」というのは変なので、xhtmlの「xml宣言の文字コード」と思われます。

htmlには、2カ所文字コードを書くところがあり

<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS" />ではなく

こっち


metaとxml宣言で、文字コードの食い違ったhtmlを試作してテストしたところ、

firefoxでは、mataの文字コード優先、safariではxml宣言の文字コードを優先しています。

で、safariのみ文字化けですので、

おそらく本文はShift_JISで書かれ、metaにShift_JIS、xml宣言にutf-8と書かれていたと思われます。


[4]>3 むずかしい… piyo8184

アドバイスいただきまして、ありがとうございました。大変助かっています。

ブラウザで見たところ、shift_jisは文字化けせず、そのほかではUTF-8も文字化けすることがわかりました。

・・ということはやはりshift_jisに変更しておかなくてはいけないのですよね?

CSSはブラウザで開くことができなかったのでわからないのですが・・


>htmlには、2カ所文字コードを書くところがあり

のあと、2箇所目が書かれていないようですが

<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS" />ここだけを変更してもいけないのでしょうか?

それとxhtml1-strict.dtdになっているよりTransitionalに変更しておいた方が汎用性が高いと思っていてよろしいのでしょうか?

ちなみにhead部分のhtmlはこのようになっています。

基本的なことがわかっていなくてすみません。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<title>タイトル</title>

<link href="css/set.css" rel="stylesheet" type="text/css" />

<meta name="description" content="">

<meta name="Keywords" content="">

</head>


[5]>4 すみません.....消えちゃってました makoohira

すみません、、、「ではなく こっち」のとこのタグが、なぜか消えてしまいました。

<?xml version="1.0" encoding="Shift_JIS"?>

(念のため、?、<、>、を全角で書きました。本当は半角です)

1行目のところです、語尾に?がついてるので、これの文字コードがutf-8になっていて、こちらを書き換えられたのだと思います。

試したところ、両方が同じでないと文字化けするようですので、Shift_JISへの変更は正しかったようです。

cssはset.cssというファイルのようですが、ローカル上のをドラッグドロップしても、開く>ファイル指定でも開かないのでしたら、ローカルではなく、webに上がってる方set.cssを見てみてください。

http://サイトのアドレス/css/set.cssにあるようです。

strictをクリアしているxhtmlなら、特に書き足す予定がなければ、strictのままでいいと思います。

「将来的に使用が望ましくないタグ」を排除した厳しい規制をクリアしたのがstrictなので。

書き換えるけど自信が無い、という場合はTransitionalにしても良いでしょう。


[6]>5 ご指導ありがとうございます piyo8184

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

strictは自信がないので下記のように変更してみました。

--------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<title>タイトル</title>

<link href="../css/set.css" rel="stylesheet" type="text/css" />

<meta name="description" content=""><meta name="Keywords" content="">

</head>

--------------------------------------------------

上記はDreamwerverで自動生成されたものですが、一行目に

<?xml version="1.0" encoding="Shift_JIS"?>

は入れなくてもいいんでしょうか?

また、lang属性も入れるように書いているものもありますが必要なのでしょうか?

Dreamwerverではこの二つは自動的に入らないので、なくても大丈夫のような気もしますし、入れない方がいいようなことを書いているものもありますが・・(ちなみに製作中のサイトはブログなどではなく普通のサイトで、携帯などで見せる予定ではありません。)

あとは、CSSのところで@charset "utf-8";を@charset Sift_jisに変更してやればいいですよね。(この一行もDreamweaverでは入らないので入れなくてもいいのかもしれませんが・・)

CSSの記述はメモ帳では開くのですが、ブラウザでは開かないので文字コードの確認ができないのですが・・


[7]>6 構文の正しさと、対応状況を天秤にかけて... makoohira

構文の正しさの定義も、年々変化してしまうのでDWも追いついていくのに大変みたいですね。

どれも、結局、どこまで正しく書くことにこだわるか?というもので、現時点ですぐに表示に影響するものではありません。(将来的には、正しいもの以外、保証されていませんが。)

■<?xml version="1.0" encoding="Shift_JIS"?>について

本来は、xhtmlでは必須なのですが、消しても、現時点で表示に問題はありません。

これを書いたときの影響として

「IE6に互換モードで表示するというバグがあるため、バグをよけるために、あれこれ注意したり、css hackしたりしながら書かなくてはならなくなる。(しかも、IE6のバグが見つかっているだけで全てだ、とは限らないため、対応しきれない可能性もある)」

という状況のため、書かない方も多いです。

■lang属性

書かなくても、書いても表示には影響はないのですが、正しくは書いたほうがいいです。ただ、xml宣言を無くした時点で意味は無いのかもしれません。

■cssの文字コード

なるべく書くことが望ましいですが、書かなくてもブラウザ側で自動判別はします。ただ、適当に書くのは一番まずいです。

判別が間違っていた場合、フォント指定が望んだ通りにならないかも?あるいは誤表示するかも?というものです。

もし気になるなら、cssのurlを貼っていただければ、こちらで調べますよ。


[8]>7 詳しい説明ありがとうございました。 piyo8184

とても丁寧なご説明、本当にありがとうございました。

すっきりと霧が晴れたような気分です。(^^)

WEBの世界は移り変わりが激しいし、奥が深いので本当に大変ですね・・

タグを知らなくてもDreamwerverで作れるようでもありますが、やはりそれだけでは足りませんね・・

CSSはやはり上の一行(@charset Sift_jis)は抜いておくことにします。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ