🐙

【CSS】なぜ @charset を書くのか？

2024/03/15に公開

CSS

Web

tech

本記事の目的

この記事では、CSS で一番最初に記述される「@charset」の

基本内容
必要性

について、理解することを目的としております。

結論

@charset：スタイルシートの「文字エンコーディング」を指定するアットルール
必要性：必ずしも必要ではない
1. BOM・HTMLで判断され、@charset を見られないことが多い
2. 自動的に設定される文字コードも”UTF-8”のため、問題ない

@charset の基本内容

スタイルシートの「文字エンコーディング」を指定するアットルールです。

文字化け防止のために使われます。

以下は、@cahrset を記述する上でのルールです。

ファイルの一番初めに記述しなければならず、これより前に文字を記述してはならない。(スペースやコメントもNG)
文字エンコーディングの名前は、「ダブルクォーテーション」で囲む必要があります。
@cahrset の後に「半角スペース」が入っている必要があります。
複数の@cahrset を記述した場合、一番初めの設定だけが使われます。
HTML要素のstyle属性では使えません。

/* 正しい */
@charset "utf-8";

/* NG: 空白が入っている */
 @charset "utf-8";
 
/* NG: シングルクォーテーションになっている */
@charset 'utf-8';

/* NG: 半角スペースが入っていない */
@charset'utf-8';

ブラウザがCSSの文字コードを判断する順番

ファイル先頭バイト列(BOM)で判断
HTTPヘッダー(Content-Type)のcharset属性、または、スタイルシートを送るのにつかわれたプロトコル内の同等のものから得られた値

/* HTMLでcharsetを指定している場合 */
<meta charset="UTF-8">
/* または */
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

CSSの@cahrset の設定
~~HTMLでの<link>要素のcharset属性~~（現在は廃止されている）
もし、判別できなかったら、自動的に “UTF-8” と設定される

上記の順番で判断し、結果が得られたタイミングで、終了します。

@charset は必要か？

@cahrset は必ずしも必要ではありませんが、個人的には記述しておこうと思います。

下記２つは必ずしも必要ではない理由です。

@cahrset で判断される前に、BOM・HTMLで判断され、@charset を見られないことが多い
@cahrset 指定される文字コードは、”UTF-8”のことが多く、自動的に設定される文字コードも”UTF-8”のため、問題ない

BOMは、設定されてない場合も多いです。しかし、ほとんどの場合、HTMLで<meta charset=”UTF-8”> を付けるので、CSSで同じ設定をしなくても良いと考えられます。

それでも、個人的に記述しておく理由としては、設定を明示的にしておくためです。

というのも、暗黙の内に変更がされて、文字化けの原因につながる可能性がないとは限らないと思うからです。

そのため、必ずしも必要な設定ではありませんが、個人的には記述しています。

結論

@charset：スタイルシートの「文字エンコーディング」を指定するアットルール
必要性：必ずしも必要ではない
1. BOM・HTMLで判断され、@charset を見られないことが多い
2. 自動的に設定される文字コードも”UTF-8”のため、問題ない

ただ、個人的にはこれからも記述します。