shift_jisとutf-8

Question

お世話になります。
先日より文字コードのことで、頭を悩ましています。

サイト制作の時に、フルCSSを目指し、他の人が作っていたCSSを利用してDreamweaverで制作を始めました。
その際、文字コードがutf-8になっていたのですが、ブラウザによっては文字化けしていおり、宣言の部分をshift_jisに変更しました。
この部分です。<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
ちなみにDreamwerverではデフォルトの文字コードはshift_jisなので、わざわざ変更しない限り、制作したページはすべてshift_jisで書かれているようです。

また、使わせてもらったCSSのページには一行目に@charset "utf-8";が入っていたのですが、よくわからないのでこの行をはずしてみたところ、CSSの設定が反映されない部分が出てきました。（これが原因かわかりませんが、この一行を入れると直ったみたいで・・）

そこで質問なのですが、HTMLの方ではshift_jis、CSSファイルではutf-8という設定でも別にかまわないのでしょうか？（統一しなくてもいいのか？）
また、一行目の@charset "utf-8";を省くと問題がありますか？

統一した方がいい場合は、制作したものをすべてutf-8に（またはshift_jisに）するにはどうしたらいいのでしょうか？

別に統一する必要がなければ今回はこのままにして、次回からきちんとしたものを作って行きたいのですが・・

どうぞよろしくお願い致します。

nu00ll · Accepted Answer

ひとつのファイルの中に複数の文字コードが混在することはありません。
Dreamwerverで書き足したときに、どちらか（文面からすると、たぶん「Shift_JIS」）に統一されていると思いますから、そのあたりの心配は不要です。

ファイルの文字コードや改行コードですが、たいていのソフトではステータスバーに表示されるようになっています。
Dreamwerverはどうでしょうか？
もし表示されていなければ、そのHTMLファイルやCSSファイルをテキストエディタ（Windows標準の「メモ帳」ではダメです）でひらいてみてください。
たとえば「TeraPad」なら、右下に「SJIS」「CRLF」（これは文字コードが「Shift_JIS」、改行コードが「CR+LF」という意味です）と表示されます。

どちらにしても、開いたファイルを保存するときに、単純な上書きではなく、メニューから「文字／改行コード指定保存」（もしくは似たような表示のもの）を選べば、ファイルの文字コード、改行コードを変更できます。

同時に、Dreamwerverの設定も確認して下さい。
常に「Shift_JIS」で保存される設定だと、一度「UTF-8」にしても、またすぐに「Shift_JIS」にもどってしまいます。
設定を変えて、開いたときと同じ状態で保存するようにしましょう。

あるいは、常に同じ文字コード・改行コードで保存する設定にしてもいいです。
その際、文字コードはファイル内（metaタグや@charset）で指定したものにあわせて下さい。
ただし、他の文字コードのファイルを開くときは注意しないと、気付かないうちに（文字コードなどを）変えてしまうかも知れませんが。

改行コードについてですが、基本的にはサーバで使われているものにあわせます。
UNIX系なら「LF」、Windows系なら「CR+LF」です。
（「CR」はMac）
ただ通常は、FTPでサーバにアップロードするときに、自動的にサーバの使用コードにあわせられますから、気にしなくてもいいですが。

あと、「UTF-8」を使う場合に重要な注意を。

他の国のことは知りませんが、日本の多くのテキストエディタやHTMLエディタは、ウェブ上で使われる「UTF-8」を「UTF-8N」と表記します。
両者の違いは「BOMがついているかいないか」で、エディタでは「UTF-8」がBOM付き、「UTF-8N」がBOMなしを表すようになっています。
（BOMについては複雑なので説明を省きます）

なので、両方選べるようになっていたら「UTF-8N」を選択して下さい。
「UTF-8」にしてしまうと不具合の原因になります。

ちなみに、上で「メモ帳」がだめだと書いたのは、ここにも理由があります。
「メモ帳」では、「UTF-8N」にできないのです。
おまけに、「UTF-8N」で書かれたファイルをひらいて上書き保存すると、勝手に「UTF-8」にしてしまいます。
こまったものですね。

nu00ll · Answer

文字化けの原因ですが、おそらく、指定してある文字コードと、ファイル自体の文字コードが違っていたのではないでしょうか。

Dreamwerverでは自動的に「Shift_JIS」になるということなので、最初に導入したファイルの宣言が「UTF-8」なのに、「Shift_JIS」で保存されてしまったのではないかと。

HTMLファイルで
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
CSSファイルで、
@charset "UTF-8";
と指定していながら、ファイル自体を「Shift_JIS」で保存してしまうと、HTMLならブラウザで表示したときに文字化けが、CSSなら設定が反映されないことが起こり得ます。

ファイル内の指定と、ファイル自体の文字コード（作成したファイルを保存するときに指定できると思います）は同じものにして下さい。
それさえ正しければ、HTMLとCSSの文字コードが違っても問題ないでしょう（あとのことを考えれば、同じほうがいいとは思いますが）。

あとは、念のために改行コードも確認しておいたほうがいいかも知れません。


答えになっていますか？

nu00ll · Answer

すいません、混乱するような書き方になってしまっていたでしょうか。

「UTF-8N」というのは、あくまでもエディタがそう表示するようになっているというだけで、HTMLファイルやCSSファイルでは使うことはありません。
というか、
HTMLなどでの「UTF-8」＝エディタでの「UTF-8N」
ということです。

ですから、HTMLなら
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
CSSでは
@charset "UTF-8";
という書き方が正解です。

つまり、今のままでいいということです。
「N」の有無は、あくまでも、保存するときの注意ですから。

shift_jisとutf-8

文字化けの原因ですが、おそらく、指定してある文字コードと、ファイル自体の文字コードが違っていたのではないでしょうか。

この回答への補足

ひとつのファイルの中に複数の文字コードが混在することはありません。

すいません、混乱するような書き方になってしまっていたでしょうか。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング