【Web制作】HTML・CSSで文字化けさせない文字コード設定

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

HTML・CSSの文字コード

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

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

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

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

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

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

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

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

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

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

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

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

【CSS】
@charset "utf-8";

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

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