CSS入門 | CSS応用 | @規則

Tags:

@規則(at-rule)

CSSでは、W3Cで定められているいくつかの規則を使用できる。その中でもよく使われる代表的な規則は次のとおりである。

  1. @import
  2. @font-face
  3. @media

@import規則

@import規則は、ほかのスタイルシートからスタイル規則を読み込むための規則である。この規則は、スタイルシートで使用する文字エンコーディングを指定する@charset規則を除き、ほかのすべての規則より前に記述しなければならない。

通常、HTML文書では次のように複数の<link>タグを使ってスタイルシートを追加する。

<head>
    <title>@import規則</title>
    <link rel="stylesheet" href="firstStyleSheet.css">
    <link rel="stylesheet" href="secondStyleSheet.css">
    ...
    <link rel="stylesheet" href="hundredStyleSheet.css">
</head>

しかし、このように追加するCSSファイルの数が増えるほど、Webサーバーの負荷も大きくなる。そのため、HTML文書には一定数のCSSファイルだけを追加し、追加されたCSSファイルの中で@import規則を使って別のCSSファイルを追加する方法を使用する。

<head>
    <title>@import規則</title>
    <link rel="stylesheet" href="firstStyleSheet.css">
    <link rel="stylesheet" href="secondStyleSheet.css">
</head>

firstStyleSheet.css

@import url("thirdStyleSheet.css");
@import "fourthStyleSheet.css";
...

@import規則を使っても、追加するCSSファイルの数が増えればWebサーバーの負荷はやはり大きくなる。したがって、Webサーバーの負荷を減らすには、作成したCSSファイルを適切に分散して追加する方法が必要になる。

@import規則を利用すると、メディアクエリ(media query)の条件に応じて必要なCSSファイルだけを選択的に読み込める。

次の例は、印刷時にはfirstStyleSheet.cssファイルを読み込み、画面が横向きに設定されているときにはsecondStyleSheet.cssファイルを読み込む例である。

<head>
    <title>@import規則</title>
    @import url("firstStyleSheet.css") print;
    @import "secondStyleSheet.css" screen and (orientation:landscape);
</head>

@font-face規則

@font-face規則は、Webフォント(web font)を定義するときに使用する規則である。Webフォントは、ユーザーのコンピューターにインストールされていないフォント(font)をWebブラウザーで使用できるようにする。

まずWebフォントをサーバーにアップロードし、CSSファイルで@font-face規則を使ってWebフォントを定義して追加する。すると、そのWebページにアクセスするすべてのWebブラウザーは、サーバーからWebフォントを自動的にダウンロードし、そのフォントで表示する。

<style>
    @font-face {
        font-family: "myWebFont";
        src: local("NanumGothic"), url("NanumGothic.eot"), url("NanumGothic.ttf"), url("NanumGothic.woff");
    }
    * { font-family: "myWebFont"; }
</style>

@media規則

CSS2では、@media規則によって、異なるメディアタイプ(media type)向けの専用スタイルシートをサポートする。

次の例は、HTML文書が画面に表示されるときと印刷されるときに、異なるスタイルを適用する例である。

<style>
    body { background-color: darkorange; }
    @media screen {
        body { background-color: black; color: white; }
    }
    @media print {
        body { background-color: white; color: black; }
    }
</style>