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

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

ただいまの
回答率

87.78%

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

解決済

回答 8

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 19K+

score 403

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

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

<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縺ョ驥崎、�r髦イ縺舌◆繧√€�€」逡ェ繧偵▽縺代※縺翫¥
    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になっています。
イメージ説明

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 8

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/22 09:39

    回答ありがとうございます。
    そういうものなんですか(・_・;)

    いけないことなのだと思い対処しなければいけない問題だと思っていました。
    ありがとうございます

    キャンセル

  • 2016/06/22 09:43

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

    キャンセル

  • 2016/06/22 09:57

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

    キャンセル

+2

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/22 09:23

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

    もう少し回答待ってみたいと思います。

    キャンセル

  • 2016/06/22 10:50

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

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/22 22:37

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

    キャンセル

  • 2016/06/22 23:44 編集

    (censored)

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/22 08:55

    回答ありがとうございます。

    質問に追記しましたが、テキストエディタでの文字コードもUTF-8です。

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/22 11:53

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

    キャンセル

  • 2016/06/22 13:57

    これのアンサーとかは参考になりませんでしょうか?

    https://teratail.com/questions/17296

    キャンセル

-1

MIME Type について

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

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

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

BOM について

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/30 10:49 編集

    > と思って、スクリプトの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.

    おお! 存じませんでした。これはこの質問の文脈にも当てはまる、確たる根拠ですね。
    私が間違っていました。申し訳ありません。勉強になりました。

    キャンセル

  • 2016/06/30 10:55

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

    キャンセル

  • 2016/06/30 10:57

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

    キャンセル

check解決した方法

-6

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/25 02:33 編集

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

    キャンセル

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る