【CSS Modules】@charsetアットルールの使い方
@charsetアットルールの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
@charset定数は、CSSファイルの文字エンコーディングを表す定数です。この定数は、ウェブブラウザやCSSパーサーに対し、そのCSSファイルがどの文字セットで記述されているかを明示的に伝える役割を持っています。これにより、ファイル内の日本語などの多バイト文字が正しく表示・解釈されるようになります。
@charsetルールを記述する際は、CSSファイル内のすべてのスタイルルールやコメントよりも前の、ファイルの先頭に配置する必要があります。ただし、BOM（Byte Order Mark）が存在する場合を除き、@charsetルール自体はファイルの最初の要素でなければなりません。また、1つのCSSファイルには、この@charsetルールを1つだけ記述できます。
一般的には、「UTF-8」という文字エンコーディングが広く推奨されており、ほとんどのウェブサイトで利用されています。もし@charsetルールが省略された場合、ブラウザはHTMLドキュメントの指定や、HTTPレスポンスヘッダーのContent-Typeフィールド、あるいはシステムデフォルトのエンコーディングなどから推測を試みますが、明示的に指定することで、常に意図した通りの解釈を保証できます。特に国際化されたウェブサイトにおいては、文字化けを防ぎ、一貫性のある表示を実現するために非常に重要な定数です。
公式リファレンス: @charset
構文(syntax)
1@charset "UTF-8";
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません