CSS ファイルの charset 指定方法

2016-01-23

#Webデザイン CSS

CSSファイルで使っている文字コードの宣言方法について。

文字コード宣言は、正しく行わなければ意図した通りに解釈されない可能性があります。
動作確認するブラウザ以外でも正しく表示させるために、正しく指定しましょう。

書式

文字コード名

UTF-8, Shift_JIS, EUC-JP など。
IANA の Character Sets で定義されている MIME 名で記入します。

記入例

宣言時の注意

  • 文字コード宣言は必ず CSS ファイルの 1行目の先頭で行う必要があります。
  • 宣言の前に他の一切の文字を(スペースも)含んではいけません。
  • コード名は必ずダブルクオートで囲まなければなりません。

なお、宣言は CSS2 Rev1 以降で利用可能です。

文字コード判定の優先順位

文字コードを正しく宣言しても、他の方法での指定が優先される場合があります。
一般にブラウザはコード判定を次の手順で行います。

  1. HTTP ヘッダの charset 属性
  2. バイトオーダーマーク (UTF-8など)
  3. @charset 宣言
  4. UTF-8 と仮定

つまり、もしサーバ側で HTTP ヘッダに charset が指定されていて、かつ変更する手段が無い場合は残念ながらお手上げということです。

表記の揺れ

Shift_JIS は一般に、SJISShift-JIS とも表記されますが、CSS の仕様としては間違いのようです。全部小文字の shift_jis 等は OK かもしれませんが、ブラウザの実装に依存することになりそうです。
とはいえ、Shift_JIS を使う機会はもうほとんど無いかもしれません。

ところで、文字コードのことを言いたいときに、文字セット?エンコーディング?といつも迷ってしまうのは僕だけでしょうか(´・ω・`)

参考

@charset - CSS | MDN

QooQ