CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの@charsetルールの使い方と記述例を解説

ドキュメントをASCIIやISO-8859-1以外の文字セットで作成している場合は、スタイルシートの先頭に@charsetルールを指定することで、そのCSSがどの文字セット（文字エンコーディング）で記述されているのかを明示できます。

@charsetルールは、スタイルシートの冒頭に記述しなければなりません。ルールの前にスペースや空行が入っていてはいけません。また、文字セット名はダブルクォート（"）で囲み、IANAに登録されている標準的な文字セット名（例：iso-8859-1、utf-8など）を指定します。

記述例

それでは、実際の使用例を見てみましょう。

<style>
    <!--
        @charset "iso-8859-1"
        .......other CSS rules .....
    -->
</style>

@charsetルールを使う際のポイント

  • 記述位置は必ず先頭：コメントや空白よりも前に置く必要があります。途中に挿入しても無効になります。
  • 値は引用符で囲む：文字セット名はダブルクォートで囲んで指定します。
  • 主に外部CSSファイル向け：現在の仕様では、@charsetルールは外部スタイルシートの先頭で宣言して使われることが想定されています。

現代のWeb開発における補足

現在ではUTF-8が事実上の標準となっており、HTML側で<meta charset="utf-8">を正しく指定していれば、@charsetルールを明示的に書く必要はほとんどありません。ただし、レガシーな環境や特定の文字セットを扱うケースでは、依然として有用な手段です。

  1. CSSのcubic-bezier()関数の使い方をわかりやすく解説

    CSSでカスタムのイージング（加速・減速のカーブ）を定義したいときに便利なのが、cubic-bezier()関数です。この関数を使うことで、トランジションやアニメーションの速度変化を4つの制御点の値で細かく調整できます。cubic-bezier()関数とはcubic-bezier(x1, y1, x2, y2)の形式で指定し、それぞれの引数には0〜1の範囲（x軸）および任意の値（y軸）を取る数値を渡します。ベジェ曲線の形状によって、アニメーションが「ゆっくり始まって速く終わる」「一瞬オーバーシュートして戻る」などの表現が可能になります。実装例以下のコードでは、マウスホバー時にdiv要素の幅が3

  2. repeating-radial-gradient()関数の使い方｜CSSで繰り返し放射状グラデーションを作成する方法

    CSSのrepeating-radial-gradient()関数を使用すると、中心点から外側に向かって広がる放射状グラデーション（radial gradient）を、指定した範囲で繰り返し描画できます。通常のradial-gradient()関数と異なり、グラデーションのパターンが要素全体に自動的に反復されるため、ストライプ状や同心円状の装飾的な背景を簡単に作成できます。基本構文background: repeating-radial-gradient(色 位置%, 色 位置%, ...);各カラーストップには「色」と「開始位置」を指定します。最後のカラーストップの位置まで達すると、そのパタ