teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.31%
トップ文字コードに関する質問
文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

8回答

28804閲覧

エディタでは文字化けしてないのにブラウザで見ると文字化けしている

earnest_gay
earnest_gay

総合スコア615

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2016/06/21 22:48

編集2016/06/22 02:53

0

2

コメントアウトの日本語が文字化けしています。

実際テキストエディタから見ると文字化けしていませんが
ブラウザから見ると文字化けしています。

<head>
	<meta charset="UTF-8" name="robots" content="none">
	<title>人材登録 - Japanese</title>
	<link rel="stylesheet" href="css/design.css" type="text/css">
	<script type="text/javascript" src="js/org.js" charset="utf-8"></script>
</head>

のように外部ファイルを読み込み、
css/design.cssにアクセスし、ブラウザで閲覧すると下記のように文字化けしています。
jsファイルも同じ症状です。

body{
	font-family: Verdana, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", "Hiragino Kaku Gothic ProN", "繝｡繧､繝ｪ繧ｪ", Meiryo, sans-serif;

}
h2.title{
	font-size:3em;
	text-align:center;
}


/*蜈ｱ騾夊ｨｭ險�*/
.header-in,.global-navi-in,.main-in,.footer-in{
	width:1200px;
	margin:auto;
}


/*蜈ｱ騾夊ｨｭ螳�*/
a{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	color: #444;
}

実際に編集するのはテキストエディタを使ってやるから、
そのテキストエディタで文字化けしてなければ
ブラウザで文字化けしてても問題ないかなぁ、...
とは思うのですが、気になります。

何が原因なのでしょうか？

【追記】
CSSファイルの先頭に@charset "utf-8";を記述することでCSSファイルの方は解決しました。
jsファイルはどうしたらよいのでしょうか？

/*繧ｹ繧ｭ繝ｫ繧ｨ繝ｪ繧｢縺ｮ繧ｻ繝ｬ繧ｯ繝医�繝�け繧ｹ繧ｻ繝�ヨ縺ｮ繧ｯ繝ｭ繝ｼ繝ｳ*/
function skill_selectAdd(){
	var get = document.getElementById("skill_select");
	var set = get.cloneNode(true);
	var target = document.getElementById("skill_selectAdd");
	var btn_delete = document.getElementById("skill_select_btnDel");
	set.id= "test" + target.children.length;//id縺ｮ驥崎､�ｒ髦ｲ縺舌◆繧√€�€｣逡ｪ繧偵▽縺代※縺翫￥
	target.parentNode.insertBefore(set, target);
	btn_delete.disabled = false;
}

/*繧ｹ繧ｭ繝ｫ繧ｨ繝ｪ繧｢縺ｮ繧ｻ繝ｬ繧ｯ繝医�繝�け繧ｹ繧ｻ繝�ヨ縺ｮ蜑企勁*/
function skill_selectDel(){
	var targets = document.getElementsByClassName("skill_select");
	var btn_delete = document.getElementById("skill_select_btnDel");
	if (targets.length === 2) {
		btn_delete.disabled = true;
	}
	targets[1].parentNode.removeChild(targets[targets.length - 1]);//譛€蠕後�隕∫ｴ�繧貞炎髯､
}

テキストエディタでの文字コードもUTF-8です。
イメージ説明

読み込み時も一応UTF-8にしてます。

<script type="text/javascript" src="js/org.js" charset="utf-8"></script>

別のエディタで確認してもUTF-8になっています。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答8件

0

MIME Type について

ブラウザから見ると文字化けするということですが、化けるのはローカルにあるものではなく、サーバー上にあるものなのでしょうか？

サーバーからファイルを取得するとき、同時に MIME Type というものも取得します。これはこのファイルがテキストファイルであったり画像や動画であったりすることを示すものですが、例えばテキストファイルの場合には HTML なのか js なのかエンコードは何なのかといった情報も含まれています。

この MIME Type は、通常はファイルの拡張子に基づいてサーバーが自動的に判断して付与します。従って、サーバーの設定によっては、拡張子が js ならば実際のエンコードが何であろうと Shift_JIS の MIME Type をつけて送るようになります。
もしこれが原因だとすると、.htaccess などで MIME Type を変更できる権限をお持ちなら、それで文字化けが解消する可能性があります。

BOM について

BOMは、テキストファイルの先頭につけられた余剰データで、そのファイルのエンコードを示します。UTF8 の場合は、BOM がつけられないことが多いですが、これは英語圏の人にとっては(つまり英数字のみを使うならば)、クラシカルなテキストファイルと同じものになるためです。
明確にエンコードを指定したい場合には、BOM をつけましょう。我々は日本人で、コメントには日本語を使うのですから。

投稿2016/06/22 07:06

Zuishin
Zuishin

総合スコア28673

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matobaa
matobaa

2016/06/22 13:39

BOMの説明が正しくないー
Zuishin
Zuishin

2016/06/22 14:21

正確ではありません。UNICODE に限ります。
matobaa
matobaa

2016/06/23 04:07

正しく修正してもらえるとありがたいです。前半はいい回答なので、ぜひ＋にしたい。
Zuishin
Zuishin

2016/06/23 04:43

全部細かく正確に書こうとすると長くなりすぎますので、この程度で勘弁してください。BOM がつけられている場合、それがエンコードを示すのは間違っていないはずだと思いますので、他に間違ったところがあればご指摘ください。
matobaa
matobaa

2016/06/23 09:08 編集

単にBOMのくだりを削除していたければよいかと。 BOMはエンコードを表すのではなく、別の手段でエンコードが指定されたうえで、さらにエンディアンを表明するためのものです。つまりエンコードを指定するにはBOMだけでは不十分で、他の仕組み、たとえば MIME Type (=Content Typeヘッダ)を使う必要があります。UTF-8化されたBOMシーケンスがついていることをもってUTF-8エンコードであることを推測することはできるものの、あくまで推測であって明示的な方法ではなく、「†(ダガー)」とか「美乳」とか書くのと同じレベルです。
Zuishin
Zuishin

2016/06/23 07:53

用語に誤解があるようですね。エンディアンはエンコードです。
matobaa
matobaa

2016/06/23 08:04 編集

エンディアンはエンコードではないです。
matobaa
matobaa

2016/06/23 09:10 編集

しかたありませんね…… 下げます。
Zuishin
Zuishin

2016/06/23 08:11

エンコードというのは、文字をどのようなデータとしてシリアライズするかということです。ビッグエンディアン・リトルエンディアンはその規格の一つです。
Zuishin
Zuishin

2016/06/23 08:12

たとえば、ビッグエンディアンは「UTF16BE」という名前がついた立派なエンコードです。
matobaa
matobaa

2016/06/23 08:23 編集

根拠にリンクしないと見苦しいです。
Zuishin
Zuishin

2016/06/23 08:33

https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E7%AC%A6%E5%8F%B7%E5%8C%96%E6%96%B9%E5%BC%8F 文字符号化方式（もじふごうかほうしき、英: character encoding scheme、CES）とは、符号化文字集合で文字に対応付けた非負整数値を、実際にコンピュータが利用できるデータ列（通常、バイト列）に変換する符号化方式。 文字符号化体系、文字符号化スキーム (CCS) とも言う。 https://ja.wikipedia.org/wiki/UTF-16 UTF-16符号化形式のための文字符号化スキームには、UTF-16の他にUTF-16BE、UTF-16LEがある。
matobaa
matobaa

2016/06/23 08:41 編集

Wikipediaかよ…… 同じページに UTF-16BE符号化スキーム 16ビット整数をビッグエンディアンで直列化する。バイト順マーク (BOM) は使用不可。 って書いてあるんですけど、BOMをつけることでエンコードを明示できるもんなんですか? どうやって。 くだらなくなってきた。あきた。
Zuishin
Zuishin

2016/06/23 08:43

BOM がつけられている場合、それがエンコードを示すのは間違っていないはずだと思いますので、他に間違ったところがあればご指摘ください。
Zuishin
Zuishin

2016/06/29 09:52

「UTF-8 で BOM をつけるのは必須でも推奨でもありません」とのことなので、BOM のない UTF-8 を標準としたいんでしょうね。 日本人にとっては UTF-8 と Shift-JIS は全く違うものですが、英語圏の人にとっては BOM をつけなければ今までのテキストがそのまま UTF-8 の下位互換になるので便利なんでしょう。
eripong
eripong

2016/06/29 09:56

そうかも知れません。 私としては、仕様にはできるだけしたがっておいた方が、何か問題があったときに仕様通りですということができるので、良いかなと思います。 この辺りは考え方次第なのとも思います。
Zuishin
Zuishin

2016/06/29 10:06

つけない方が多いので、文字化けなどの問題が起きないなら別につけなくてもいいんじゃないですか？ つけちゃいけないとは書いてないので、それで問題が改善するならつけるべきです。
matobaa
matobaa

2016/06/29 12:54 編集

このケースであれば、Zuishinさんの回答の前半にあるとおり、MIME Type を使うのが正解で、具体的には HTTP応答ヘッダに Content-Type:application/javascript; charset-UTF-8 を載せる、というのが正解です。 ブラウザの開発者ツールで応答ヘッダを確認し、意図したものでなければ .htaccess などを設定して対処する。できないのなら、次善の策として、UTF-8の仕様ではBOMをつけることは推奨されていないことを知りつつも、BOMをつけるなり、†(ダガー)を書くなりして回避すればいい。安易にBOMをつけることは推奨されない。 BOMを付けただけでエンコードを明示したつもりになってはいけない。それは単なるヒントにすぎない。エンディアンはエンコードではなく、回答中の「BOMは……そのファイルのエンコードを示します」は誤りで、「エンディアンを示します」が正しい。「明確にエンコードを指定したい場合には、BOM をつけましょう」は、「明確に」の部分が誤り。たいへんもったいない。 「それで問題が改善するならつけるべき」という考え方は賛成しかねます。本質的な問題を見えなくすることにつながるので、コスト等の理由で暫定対処するつもりならいいですけれど、本質的には誤ったアプローチだと考えます。 この辺りは考え方次第なのとも思います。 エンディアンはエンコードではないです。
eripong
eripong

2016/06/29 13:25 編集

そうですね。私が選ぶならmatobaaさんの方法を選びます。エンディアンはエンコードではないも同意です。 私とZuishinさんとは考え方の基準が違うのかな、と思いました。
Zuishin
Zuishin

2016/06/29 14:08

お二人とユニコードコンソーシアムは考え方の基準が違うようですね http://www.unicode.org/faq/utf_bom.html#bom1 it can be used as a signature defining the byte order and encoding form それ(BOM)はバイト順とエンコーディング形式を記述するシグネチャとして用いられます。 BOM はエンコーディング形式を示すとはっきり書いてあります。
eripong
eripong

2016/06/29 14:31

ああ、そういう内容があるのですね。ちょっと見てみます。 私が仕様書の記述ベースで書いた際に、仕様書ベースでの回答でなかったので、 Zuishinさんが仕様がどうあるかを重要視していないのかと思いました。 そこが考え方の違いかと思ったのですが、 重要視している所は一致しているということでしょうか。
Zuishin
Zuishin

2016/06/29 14:35

同じページに UTF-8 の BOM についてはこう書いてあります。 UTF-8 is byte oriented and therefore does not have that issue. Nevertheless, an initial BOM might be useful to identify the datastream as UTF-8. UTF-8 はバイト順なので(訳注:ワード順ではないので)このような問題は起きません。しかし、先頭の BOM はそのデータの並びが UTF-8 であることを示すのに便利です。
Zuishin
Zuishin

2016/06/29 14:36

「推奨しません」という言葉を間違ってとらえていませんか？ UTF-8 の BOM を策定したのはユニコードコンソーシアムです。 そう、わざわざ作ったんですよ。使えるように。
matobaa
matobaa

2016/06/29 14:43 編集

そう、そうなんですよ。つまり、 UTF-8化されたBOMシーケンスがついていることをもってUTF-8エンコードであることを推測することはできるんです。 でも推奨してない。
Zuishin
Zuishin

2016/06/29 14:44

それを踏まえて > BOMは、テキストファイルの先頭につけられた余剰データで、そのファイルのエンコードを示します。 間違ってますか？
Zuishin
Zuishin

2016/06/29 14:45

推奨してないというのは「使わないことを推奨する」ととらえていませんか？ 全然違います。この場合は「別に使わなくてもいいよ」という意味です。
eripong
eripong

2016/06/29 15:05

議論が進んでますが、 > そこが考え方の違いかと思ったのですが、 > 重要視している所は一致しているということでしょうか。 という点については同意ということで良いでしょうか？
Zuishin
Zuishin

2016/06/29 15:08

仰ってる意味がよくわかりませんが、人の回答が間違っているとおっしゃっていたのなら訂正すべきだと思います。
eripong
eripong

2016/06/29 15:16

いや、議論としてこちらの質問に答えていただくか、何らか反応をもらわないと会話が成り立ちません。
eripong
eripong

2016/06/29 15:18

理由が書かれていれば、私(eripong)の質問自体が不適切だ、でもいいのですが。
eripong
eripong

2016/06/29 15:21

> BOM はエンコーディング形式を示すとはっきり書いてあります。 については、「ああ、そういう内容があるのですね。ちょっと見てみます。」と書いたように、こちらでも、FAQの内容を確認中です。
Zuishin
Zuishin

2016/06/29 22:54

お読みになりましたか？ > BOMは、テキストファイルの先頭につけられた余剰データで、そのファイルのエンコードを示します。 この部分について正反対の意見を述べられておりましたので、一致するかと聞かれてもとまどいます。正しい知識を入れて私やユニコードコンソーシアムの意見と一致されましたら仰ってください。
eripong
eripong

2016/06/30 01:50 編集

一致というのは仕様書ベースで意見をやり取りすると言うことでよいかの確認のつもりでした。仕様書を重視しないのであれば、意見が合わなくても当然と思うので、議論の前にそこを確認したかったのです。分かりにくくすみません。 目を通してみた結果、「BOMは、テキストファイルの先頭につけられた余剰データで、そのファイルのエンコードを示します。」というZuishinさんの意見については、ちょっと説明は不足している気がしますが、間違っていないと思いました。ので、私は間違っていたようです。 以下、そう思った理由です。 Zuishinさんが引用されている箇所の後ろに、 > , primarily of unmarked plaintext files. Under some higher level protocols, use of a BOM may be mandatory (or prohibited) in the Unicode data stream defined in that protocol. [AF] 他に従うべきプロトコルがある場合には、そちらに従うべきとある様です。この場合、MIME Typeが使えるのでそちらで指定するべきで、BOMが付いているかはエンコーディング形式の判断には使われないということでは？ と思って、スクリプトのMIME Typeの仕様である http://www.rfc-editor.org/rfc/rfc4329.txt を見たところ、 4.2 Character Encoding Scheme Detection > If the binary source text starts with a Unicode encoding form > signature, the signature determines the encoding. と言う記述があり、これがそのままZuishinさんの結論と同じに見えました。 というわけで、長々お付き合いいただきましたが、私は納得しました。
eripong
eripong

2016/06/30 01:49

あ、でも元の質問だとjsだけでなくcssもですね。cssについても確認した方が良いかも知れません。
matobaa
matobaa

2016/06/30 01:56 編集

> と思って、スクリプトのMIME Typeの仕様である > http://www.rfc-editor.org/rfc/rfc4329.txt > を見たところ、 > 4.2 Character Encoding Scheme Detection > > If the binary source text starts with a Unicode encoding form > > signature, the signature determines the encoding. おお! 存じませんでした。これはこの質問の文脈にも当てはまる、確たる根拠ですね。 私が間違っていました。申し訳ありません。勉強になりました。
Zuishin
Zuishin

2016/06/30 01:55

解決してよかったです。正しい回答を間違った回答へ訂正するようしつこく強制されて他の質問にまで付きまとわれて本当に迷惑でした。
matobaa
matobaa

2016/06/30 01:57

ちょっと長くなったので、回答文でサマリしておいていただけますとありがたいです。
guest

0

コメントなんですよね? だったら日本語を使わないで半角英数の範囲で書けばよいかと。

冗談ではなく、わりとまじめにそう思ってます。ブラウザで漢字が表示できたからといって、読んでいる人が漢字を読めるとは限らない。もちろん、英語を読めるかもわからないですけど。

プログラミングとかでの解決ではなくて恐縮です。ああ、さげられちゃうんだろうな……。

投稿2016/06/22 02:03

編集2016/06/22 02:04
matobaa
matobaa

総合スコア2493

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

htmlで読み込まれる際には、文字化けなく処理はされていると思います。

ブラウザで直接開いたときに、js ファイルが文字化けするのは
ブラウザが、文字コードの判別を間違えたということです。
直接開くことを想定されていないので、仕方ないですね。
これについては、ルールがないのでどうにもなりません。
サーバー側でヘッダつけようが、ファイルにBOMつけようが ブラウザでちゃんと開く保証はありません。
ブラウザで開いたときに エンコードを指定するしかないでしょうね。

投稿2016/06/22 00:32

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

earnest_gay
earnest_gay

2016/06/22 00:39

回答ありがとうございます。 そういうものなんですか(・_・;) いけないことなのだと思い対処しなければいけない問題だと思っていました。 ありがとうございます
earnest_gay
earnest_gay

2016/06/22 00:43

逆に、ユーザー側でエンコードを指定したりするのは煩わしいので 自動でエンコードをUTF-8に指定するようにプログラムを組みこむ方法とかはありませんでしょうか？
退会済みユーザー

退会済みユーザー

2016/06/22 00:57

ユーザーにjsファイルを直接開かせて見せるサイトを作りたいということでしょうか？
guest

0

美乳を思い出してしまいましたｗ

UTF-8では**†**だそうです。
UTF-8 の文字化け対策！ 「美乳」ではなく「†（ダガー）」を使う

‥という話ではないのでしょうかね？

投稿2016/06/22 06:39

fuzzball
fuzzball

総合スコア16733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matobaa
matobaa

2016/06/22 13:37

あっっ。なんでうまくいかないのかと思ってたら「微乳」って書いてたよ……
fuzzball
fuzzball

2016/06/22 14:51 編集

(censored)
guest

0

UTF-8で書かれたものをShift-JIS（他にもあるけどおそらくこれ）で表示した場合、そのような文字化けになります。
charsetでUTF-8を指定しているのにエンコードが違うのは謎ですが・・・
HTMLファイルやCSSファイルを作りなおしてみたら直る、という話もあるらしいですよ。

投稿2016/06/22 00:18

Yasha_Wedyue
YashaWedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

earnest_gay
earnest_gay

2016/06/22 00:23

回答ありがとうございます。 作り直してみると直ることもあるということはロジックはないのですかね... もう少し回答待ってみたいと思います。
Yasha_Wedyue
YashaWedyue

2016/06/22 01:50

もしかしたらUTF-8であっても「BOMあり」と「BOMなし」でも変わるかもしれません。 BOMの有無が設定できるテキストエディタであればお試しください。
guest

0

自己解決

読み込み時にはちゃんと日本語で読み込めているのは分かっていて、プログラム的にも問題ないのは分かっているんですが、自分的には、ブラウザでの表示もちゃんと入力しているものをそのまま表示させたいということで質問させてもらいましたが、自分のレベルを大きく上回っている回答が多いため、一度〆させて頂きます。

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

投稿2016/06/23 07:48

earnest_gay
earnest_gay

総合スコア615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/24 17:37 編集

あや...消えない...
guest

0

別のエディタで見ても、UTF-8で表示されますか？
（エディタによっては、表示はUTF-8でも、ファイルとしては別のコードのままってことがあります）

投稿2016/06/22 02:22

FKM
FKM

総合スコア3660

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

earnest_gay
earnest_gay

2016/06/22 02:53

別のエディタで見ても、UTF-8になっております。 質問に追記しました。
guest

0

テキストエディタで使用してる文字コードと、
WEBページで表示している文字コードが違うのではないでしょうか？
SJIS / EUC-JP 等ブラウザで テキストエンコーディングの設定を変えて
リロードすると分かると思います。

投稿2016/06/21 23:51

YK1037
YK1037

総合スコア236

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

earnest_gay
earnest_gay

2016/06/21 23:55

回答ありがとうございます。 質問に追記しましたが、テキストエディタでの文字コードもUTF-8です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップ文字コードに関する質問

エディタでは文字化けしてないのにブラウザで見ると文字化けしている