【CSS】@import？@charset？使っているけどよくわからない「At-Rules of CSS」

CSSのat-rule、皆さん使ってますよね？
どんなものがあって、どういう構文で成り立っているのか整理してみます。

@[KEYWORD] (ROLE);

これがCSSのルールです。

@charset "UTF-8";

を見ると「あ〜、それのこと」と思うのではないでしょうか。

それでは色々なパターンを見ていきます。

@charset "UTF-8";

上記でもご紹介した文字セット定義です。

@import "global.css";

外部CSSを読み込むときのルールです。

@document url(http://unitopi.com/), domain(unitopi.com)

特定のページのみにスタイルを適用したいときに使います。
urlやdomainのほかにも指定方法がありますが、Firefoxしか対応していないなど、サポート状況が芳しくありません。

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

これはよく使うルールの一つですね。ちなみに@RULE {...}とすることで複数条件などを入れることが出来ます。

@keyframes pulse{
    0%{
        background-color: #333333;
    }
    100%{
        background-color: #555555;
    }
}

これも最近ではよく目にします。キーフレームアニメーションの開始と終了（途中も定義可能）を定義します。

@media only screen and(min-device-width:320px) and (max-device-width:480px){
    width: 100%;
}

@media print{
}

レスポンシブデザイン、スマートフォン対応などでよく見かける対応方法です。
特定の画面にスタイルを適用させるために条件文を含んでスタイルを適用します。
printに関しては印刷用スタイルを定義することができます。

なお、mediaの種類はこんなものがあります。

などなど

まとめ

いかがでしたか？
あまり心躍るワクワク系の内容ではなかったですが、CSS自体の定義という意味ではメタデータを扱ったり、条件情報をあつかったり、記述的情報を伝達するために必要不可欠な構文となっています。
普段使うものも多くはないので、サラッと覚えておきましょう！

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。