みんな忘れがちなCSSの@charsetについてキチンと解説します

CSSをコーディングする時に、「@charset」が必要か不要か、というのが議論になることがたまにあります。

結論から先に言ってしまうと、「@charsetは必要な場面が多いので、とりあえず書いておけ！」というのが、私の答えになります。

もう少しだけ付け加えると、書いておいて困ることは無いけど、書かなかったことで困ることがあります。（正しく記述することが大前提ですが）

したがって、とりあえず書いておいた方がいいですよ、という結論に至っています。

なぜこのような答えに至ったかについて、このあと詳しく説明していきたいと思います。

CSSで、@charsetの記述の仕方

通常、CSSの1行目、一番最初の行に記述します。

これにも明確な理由があって、CSSは1行目から順番に処理を行っていくインタプリタ言語の一種です。

@charsetの意味は、「このCSSのファイルの中身は、この文字コードで書かれているよ」という宣言になります。

したがって、この宣言より前に記述されている内容は、この文字コードだよと宣言される前の状態として解釈されてしまいます。

つまり、ブラウザは宣言される前の内容について、どの文字コードで書かれたものか正確に理解することが出来ません。（自動的に解釈する仕組みになっていますが、完全ではありません。）

CSSの記述例を示しておきます。

@charset "utf-8";

/* 初期化 */
html, body { height: 100%; }
img { border: none; }

1行目の「@charset “utf-8”;」は、「このCSSファイルの中身は、utf-8という文字コードで書かれています」ということを明示しています。

もう少し噛み砕いて言うと、utf-8で書かれていますよ、ということをブラウザに知らせています。

なので、CSSファイルを保存する際に指定された文字コードと、charset宣言の内容が一致していることが大前提となります。

charset宣言の内容と実際に保存した文字コードが不一致の場合は、文字化けが発生してしまいます。

なぜCSSに、@charsetが必要なのか？

現在のブラウザは、htmlやCSSがどの文字コードで記述されているか、自動的に判断するようになっています。

そのため、Google Chromeは機能として文字コード切り替えというメニューを撤廃しています。（おかげで万が一にも文字化けが発生した場合の回避方法がありません。）

FirefoxやSafariなどのブラウザでは、テキストエンコーディングというメニューは現時点の最新バージョンでも残っています。

ブラウザが自動的に判断するから、charsetの記述は必要ないという意見もあり、charsetを間違って記述してしまうことで、むしろ文字化けを発生させてしまう可能性が高まるというのが、その理由です。

もし、その理論が正しいのであれば、CSSだけでなく、htmlのcharset記述も不要になりますが、現状ではhtmlのcharsetについてはそういった声は、あまり聞かないのでCSSのcharset不要論には、慎重になった方が良いのかもしれません。

charsetの記述が正確にされていることが前提ですが、CSSのソースコード上には日本語で記述する場面がいくつかあります。

ソースコード上に一切日本語表記が無ければ文字化けの可能性は少ないですが、日本語で記述しなければいけないという場面も存在します。

例えばこんな場合です。

@charset "utf-8";

/* フォントの初期設定 */
* {
	font-family: "メイリオ", "MS Pゴシック", sans-serif;
}

「/* フォントの初期設定 */」の部分はコメント文なので、何のためのスタイルか日本語で記述する場合があります。

「font-family」については、日本語のフォント名の場合は日本語で記述しなければなりません。

コメント文が文字化けしてもスタイルには影響ありませんが、font-familyのフォント名が文字化けしてしまうとテキスト表示に影響が出てしまう可能性があります。

そのような文字化けの可能性が生まれてしまう場合には、正確に記述することが前提ですが、charsetは記述するべきだと考えます。

まとめ

CSSに、@charsetの記述はするべきかどうかというお話をしましたが、現時点での私の結論は「charsetは記述するべき」と考えています。

今後ブラウザの精度が向上して、機能としてエンコーディングも無くなるようであれば、不要になっていくかもしれません。

その時には、CSSの仕様として無くなっているかもしれません。

現状、CSSには、日本語表記をする必要のある場面がいくつかあるため、日本語表記を完全に排除することも出来ません。

したがって、自動的に文字エンコーディングしても文字化けの可能性も排除出来ないため、その可能性を出来るだけ低く抑えるためには、やはりcharsetを正しく記述しておいた方が、間違いありません。

CSSの仕様上、非推奨となっているわけではないので、今のところは正しく記載しておくようにしましょう。