@規則 (At-rule)

@規則の種類

  • 一般
    • @charset
    • @import
    • @namespace
  • 条件付きグループ規則 (Conditional Group Rules)

@charset

スタイルシートの文字セットを定義します。

@charset 'charset';
@charset "charset";
@charset - CSS | MDN

@import

スタイルシートをインポートします。

@import 'url';
@import "url";
@import "url" media1, media2, ...;

@import url(url);
@import url('url');
@import url("url");
@import url("url") media1;
@import - CSS | MDN

@namespace

XML名前空間を、スタイルシートで使用することを宣言します。

@namespace "XML-namespace-URL";
​@namespace prefix "XML-namespace-URL";
CSS Namespaces Module Level 3
@namespace url("XML-namespace-URL");
​@namespace prefix url("XML-namespace-URL");
@namespace - CSS | MDN

サンプル

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* XHTMLが既定の名前空間と宣言されているため、これはXHTMLのa要素にマッチする */
a {}

/* これはSVGのa要素にマッチする */
svg|a {}

/* これはXHTMLとSVGの、両方のa要素にマッチする */
*|a {}
Examples - @namespace - CSS | MDN

@media (Media Queries)

スタイルを適用するかどうかを、条件によって決定できます。

@media [only | not]? media_type [ and ( media_feature [: value]? ) ] {
    /* media-specific rules */
}

適用対象とするmedia_typeには、以下のような値を指定できます。メディアタイプ - @media - CSS | MDN

  • all … すべてのデバイス
  • print … 印刷物
  • screen … コンピューターのスクリーン ≫レスポンシブWebデザイン
  • speech … スピーチ シンセサイザー (音声合成のシステム)

これ以外にも、ttv、tv、projection、handheld、braille、embossed、auralがありますが、これらはすべてMedia Queries 4で非推奨とされています。Internet Explorerでは、9以降でこの@mediaがサポートされます。Browser compatibility - @media - CSS | MDN

論理演算子 (Logical operators)

  真と評価される条件
not あるクエリの評価が偽
and いずれのクエリも真
, いずれか1つのクエリが真
only すべてのクエリが真
論理演算子 - メディアクエリの利用 - CSS | MDN 論理演算子 - メディアクエリ - Web developer guide | MDN

メディア特性 (Media features)

メディア特性 作用
color 出力デバイスの色深度
color-index 参照する色テーブルに含まれている色の数
aspect-ratio 出力デバイスの表示部分のアスペクト比
device-aspect-ratio  
device-height  
device-width  
display-mode  
grid  
height  
monochrome  
orientation  
resolution  
scan  
width 出力デバイスのレンダリング領域の横幅
メディア特性 - @media - CSS | MDN メディア特性 - メディアクエリの利用 - CSS | MDN
コード スタイルが適用される条件
@media handheld and (min-width: 20em),
    screen and (min-width: 20em) { ... }
モバイル端末でレンダリング領域の幅が20emより大きいか、PCでレンダリング領域の幅が20emより大きい
@media screen and (min-width: 500px)
    and (max-width: 800px) { ... }
レンダリング領域の幅が500px以上800px以下 (500pxと800pxの時点を含む)