日本語の文字化けをhtml上で修正する

6116 ワード
HTML 文字化け 日本語 UTF-8 HTML テキストリンク

はじめに

自分のメモ帳みたいなものです．
WebアプリケーションであるNginxにて日本語が文字化けしてしまったのでその解決策の1つを書きます．

ソースコードはこちら
なおReactを使っています

<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/jsx">
     var HelloWorld = React.createClass({
       render: function() {
         return (
           <p>Hello!World!(ハローワールド)</p>
         );
       }
     });

     var m = React.render(<HelloWorld />, document.getElementById('app'));
    </script>
  </body>
</html>

解決法

<head>の中に下記を挿入するだけ

<meta http-equiv="content-type" charset="UTF-8">

ということで最終的なソースコードがこちら

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" charset="UTF-8">
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app">
    <script type="text/jsx">
     var HelloWorld = React.createClass({
       render: function() {
         return (
           <p>Hello!World!(ハローワールド)</p>
         );
       }
     });

     var m = React.render(<HelloWorld />, document.getElementById('app'));
    </script>
  </body>
</html>

結果としてもしっかりと日本語が表示されるようになりました．

終わりに

本当はconfファイル等を編集するのがいいと思いますが，ひとまず緊急の際は参考にしてください．