CSSファイル内で日本語が文字化けする

|

どんなファイルでもそうですが、ファイルに記述された文字(データ)は符号化されます。元々、PCは1バイトしか利用できないので、2バイト文字である日本語は、一度符号化しなければなりません。

これをエンコードといい、ファイルを保存するときは、エンコードの形式を指定する必要があります。形式には「Shit-JIS」とか「EUC-JP」などがあります。

CSSファイルを適切なエンコードで保存しても、再度開いたときに、日本語が文字化けしてしまっているときがあります。これは、適切にデコード(エンコードの逆)ができていないためです。

そのような場合は、CSSファイルの一行目に

CSSコード

@charset "utf-8";

と記述します。

あるいは、外部CSSファイルを読み込む場合でしたら、HTMLファイルのほうから、エンコードを指定することができます。HTMLファイルの<head>~</head>タグ内に記述してください。また、以下のコードは外部スタイルシートを読み込むに記述しなければなりません。

(X)HTMLコード

<meta http-equiv="Content-Style-Type" 
content="text/css; charset=utf-8" />

※可読性を上げるため、2行で記述していますが、実際は1行で書いてください。

エンコードを@charsetあるいはmetaで指定しておかないと、特に、日本語表記でフォントの種類を指定している場合など、文字化けにより正しく認識されず、適用されない場合がありますので気をつけましょう。

このページに関連する記事

最近のブログ記事