外出自粛中でも楽しく過ごす!QAまとめ>>

お世話になります。
先日より文字コードのことで、頭を悩ましています。

サイト制作の時に、フル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に)するにはどうしたらいいのでしょうか?

別に統一する必要がなければ今回はこのままにして、次回からきちんとしたものを作って行きたいのですが・・

どうぞよろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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


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」にしてしまいます。
こまったものですね。
    • good
    • 0
この回答へのお礼

ご丁寧な説明をありがとうございました。
いろんな本を読んでもわかりにくかったことが、なんとなくわかってきたような気がします。

CSSはDreamwerverではわからなかったので、「TeraPad」で開いてみると「UTF-8N」「CRLF」となっていました。

お話を総合すると、CSSの一行目には
@charset "utf-8";ではなく
@charset "utf-8N";と入れておいた方がいいんでしょうか?

お礼日時:2007/07/24 11:25

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



「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」の有無は、あくまでも、保存するときの注意ですから。
    • good
    • 0
この回答へのお礼

ご返答ありがとうございました。
内容了解しました。
疑問が解けて大変助かりました。
どうもありがとうございました。

お礼日時:2007/07/25 09:15

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



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の文字コードが違っても問題ないでしょう(あとのことを考えれば、同じほうがいいとは思いますが)。

あとは、念のために改行コードも確認しておいたほうがいいかも知れません。


答えになっていますか?

この回答への補足

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

とりあえずCSSファイルが@charset "UTF-8";でも良いとのことで安心しました。
ただ、CSSファイルは他の人がUTF-8で作ったものの上から、私がDreamwervwe上で書き足していっているので、途中からShift_JISで書かれているのではないかと思います。

このファイルを全部UTF-8またはSHIFT_JISに変更しておいた方がいいですよね?その場合のやりかたなどはわかりますでしょうか?

>あとは、念のために改行コードも確認しておいたほうがいいかも知れません。
これはどこで見ればよろしいでしょうか・・?

何度もすみません。
よろしくお願いします。

補足日時:2007/07/21 14:54
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qブラウザの×ボタン(閉じるボタン)押下時のイベントをひろいたい

javaScriptでブラウザの閉じるボタン(×ボタン)を押したときに、functionを走らせたいのですがうまくいきません。onunloadで以下の処理を行っています。


if(event.clientX <= -8980 && event.clientY <= -9000 || event.clientX >= 32700 && event.clientY >= 32700) {
 //ブラウザ閉じられたときの処理
}
閉じるボタンを押してなくても走ってしまったり、不安定なのですが、×ボタン押下時のイベントの拾い方をどなたかご教授ください。よろしくお願いします。

Aベストアンサー

すでにお気づきかも知れませんが、下記URLの掲示板にヒントが載ってました。
WSH利用者さんのソースが、なかなか良いみたいです。

-- 以下、引用 --
function window.onbeforeunload() {
  if(((event.clientX > document.body.clientWidth) && (event.clientY<0)) || event.altKey){
    閉じたときの処理();
  }
}
-- --

参考URL:http://forums.microsoft.com/MSDN-JA/ShowPost.aspx?PostID=559017&SiteID=7


人気Q&Aランキング