CSSの重要なルール解説｜@import・@charset・@font-face・!importantの使い方

CSSの主要なルールとは？

CSSには、通常のセレクタによるスタイル指定のほかに、特別な役割を持つ「アットルール（@ルール）」や、適用の優先度を制御するためのルールが用意されています。これらを正しく理解しておくと、スタイルシートの管理やトラブルシューティングが格段にスムーズになります。
ここでは、押さえておきたい代表的なCSSルールを、サンプルコード付きで解説します。

@import ルール

@importは、別のスタイルシートを現在のスタイルシートに読み込む（インポートする）ためのルールです。CSSファイルを目的別に分割して管理し、ひとつのファイルからまとめて読み込みたい場合に便利です。

@import url("common.css");

@charset ルール

@charsetは、そのスタイルシートが使用する文字セット（文字エンコーディング）を宣言するためのルールです。日本語のサイトでは、一般的に「UTF-8」を指定します。この宣言はスタイルシートの先頭に記述する必要がある点に注意しましょう。

@charset "UTF-8";

@font-face ルール

@font-faceは、ドキュメント内で使用するフォントフェイスを詳細に定義するためのルールです。フォントファイルのパスや形式、表示上のファミリー名などを指定することで、Webフォントを自由に組み込めます。

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

!important ルール

!importantは、特定の宣言の優先度を最も高くし、他のスタイル指定よりも優先して適用させるためのルールです。特に、ユーザーが定義したスタイルが、サイト作成者のスタイルシートよりも優先されることを示す場合などに使用されます。ただし乱用するとスタイルの上書きや保守が難しくなるため、使用は最小限にとどめるのがおすすめです。

p {
  color: red !important;
}

まとめ

@import・@charset・@font-face・!importantは、いずれも実務でよく登場する重要なCSSルールです。それぞれの役割と書き方を理解しておけば、スタイルシートの設計やデバッグの効率が大きく向上します。