HTML・CSSで文字化けさせない文字コード設定

HTML・CSSで文字化けさせない文字コード設定 ブログ記事
HTML・CSSで文字化けさせない文字コード設定

HTML・CSSファイルを文字化けさせず、ウェブページとして表示させる方法を記載します。
文字化けは、作成したファイルの文字コードとブラウザで表示する文字コードが一致しない場合に起こるので、この不一致が起こらない対策をとる必要があります。

HTML・CSSの文字コード

目的の文字コードで保存します。
現在、UTF-8が主流となっているので、この形式でファイルを作成することをお勧めします。
※ 文字コード:JIS、Shift-JIS、EUC、Unicode(UTF-8、UTF-16、UTF-32)など

HTML・CSSの文字コードの確認方法

テキストの場合、下記矢印の文字コードを確認します。
目的の文字コードと違う場合は、変更して保存しなおします。

保存の際は、念のため別名で保存し、ファイルの内容が文字化けしてないことを確認してから、前のファイルと置き換えます。

文字コード
文字コード

TeraPadの場合、下記矢印の文字コードを確認し、必要に応じて変更します。

テキストと同様、念のため別名で保存し、ファイルの内容が文字化けしてないことを確認してから、前のファイルと置き換えます。

文字コード
文字コード

UTF-8Nの「N」とは、BOM無しの意味です。
BOMについては、次の項目を参照してください。

文字コード UTF-8のBOMの意味

【テキスト】
UTF-8:BOM無し
UTF-8 (BOM付き) :BOM付き

【TeraPad】
UTF-8:BOM付き
UTF-8N:BOM無し

BOMとは、Unicode(UTF-8など)に付けられる、文字コードを判別するためのデータです。
BOM付きでは正常に動作しないプログラム(PHP)があるため、BOM無しにします。

HTML・CSSの文字コード記述

文字コードの記述がない場合、UTF-8で表示されますが、はっきりと記述するようにしましょう。
以下のように記述すると、問題はないと思いますので、参照してください。

HTMLはheadタグ内、CSSは最初の行に記述します。

【HTML】
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

【CSS】
@charset "utf-8";

また、.htaccessファイルなどに、文字コードが指定されていないか確認しておきます。
指定されている場合には、文字コードを一致させておきましょう。

HTML・CSSの文字コードのまとめ

以下の手順で文字コードを設定すると、ほとんどの場合、文字化けすることはありません。

  • HTML・CSSに文字コードを記述する
  • HTML・CSSに記述した文字コードで保存する
  • .htaccessファイルなどに文字コードの記述があるか確認し、ある場合は文字コードを一致させる

コメント