CSS における @ の使用法の概要 (例と説明付き)

@ ルールは、CSS の実行または動作に関する指示を提供する宣言です。各宣言は @ で始まり、その後に使用可能なキーワードが続きます。このキーワードは、CSS が実行する内容を示す識別子として機能します。これは一般的な構文ですが、各 @ ルールには他の構文のバリエーションがあります。

一般規則

一般的なルールは次の構文に従います。

コードは次のとおりです。

@[キーワード] (ルール);

@文字セット
このルールは、スタイルシートに非 ASCII 文字 (例: UTF-8) が含まれている場合にブラウザーが使用する文字セットを定義します。 HTTP ヘッダーに配置された文字セットは @charset ルールを上書きすることに注意してください。

コードは次のとおりです。

@charset "UTF-8";

@輸入
このルールは、スタイルシートが要求されていることを示します。この行では、コンテンツが正しい場合、外部 CSS ファイルがインポートされます。

コードは次のとおりです。

@import 'global.css';

一般的な CSS プリプロセッサはすべて @import をサポートしていますが、ネイティブ CSS とは動作が異なることに注意してください。プリプロセッサは CSS ファイルを取得して 1 つの CSS ファイルに処理しますが、ネイティブ CSS の場合、各 @import は個別の HTTP リクエストです。
@名前空間

このルールは、XHTML 要素を CSS のセレクターとして使用できるため、CSS を XML HTML (XHTML) に適用する場合に非常に便利です。

コードは次のとおりです。

/* XHTML の名前空間 */
@名前空間 url(http://www.w3.org/1999/xhtml);
/* XHTML に埋め込まれた SVG の名前空間 */
@namespace svg url(http://www.w3.org/2000/svg);

ネストされたルール

ネストされたルールには追加のサブセット宣言が含まれており、その一部は特定の状況にのみ適用されます。

コードは次のとおりです。

@[キーワード] {
/* ネストされたステートメント */
}

@書類
このルールはスタイルシートの条件を指定します。特定のページにのみ適用できます。たとえば、URL を指定して、この特定のページのスタイルをカスタマイズします。他のページでは、これらのスタイルは無視されます。

コードは次のとおりです。

@書類
/* 特定のページのルール */
url(http://css-tricks.com/)、
/* URL が... で始まるページのルール */
url-prefix(http://css-tricks.com/snippets/)、
/* ドメインでホストされているすべてのページのルール */
ドメイン(css-tricks.com)、
/* すべてのセキュアページのルール */
正規表現("https:.*")
{
/* スタイリングを開始 */
本文 { フォントファミリー: Comic Sans; }
}

@フォントフェイス
このルールにより、Web ページにカスタムフォントを読み込むことができます。カスタムフォントのサポートにはさまざまなレベルがありますが、このルールではこれらのフォントを作成して提供するためのステートメントを受け入れます。

コードは次のとおりです。

 @フォントフェイス {
フォントファミリ: 'MyWebFont';
ソース: url('myfont.woff2') フォーマット('woff2'),
url('myfont.woff') フォーマット('woff');
}

@キーフレーム
このルールは、多くの CSS プロパティの中でキーフレームアニメーションの基礎となり、アニメーションの開始と終了をマークすることができます。

コードは次のとおりです。

 @keyframes パルス {
0% {
背景色: #001f3f;
}
100% {
背景色: #ff4136;
}
}

@メディア
このルールには、特定の画面のスタイルを指定するために使用できる条件付き宣言が含まれています。これらの宣言には画面サイズを含めることができ、画面固有のスタイルで役立ちます。

コードは次のとおりです。

 /* iPhone の縦向きと横向き */
@メディアのみの画面 
（最小デバイス幅：320ピクセル） 
（最大デバイス幅：480ピクセル）
および (-webkit-min-device-pixel-ratio: 2) {
.module { 幅: 100%; }
}

または、文書を印刷するときにのみスタイルを適用します

コードは次のとおりです。

@media 印刷 {
}

@ページ
このルールは、印刷される個々のページのスタイルを定義します。特に、ページ疑似要素のマージンを設定できます::first、:left、:right

コードは次のとおりです。

@ページ:最初{
余白: 1インチ;
}

@サポート
このルールは、ブラウザが特定の機能をサポートしているかどうかをテストし、サポートしている場合は、それらの要素に特定のスタイルを適用します。 Modernizr に少し似ていますが、CSS プロパティ用です。

コードは次のとおりです。

/* サポートされている条件を 1 つチェックします */
@supports (表示: flex) {
.module { ディスプレイ: flex; }
}
/* 複数の条件をチェックする */
@supports (display: flex) と (-webkit-appearance: checkbox) {
.module { ディスプレイ: flex; }
}

要約する

@ ルールを使用すると、CSS でクレイジーで興味深いことを実現できます。この記事の例は基本的なものですが、特定の条件に合わせてスタイルを使用して、特定のシナリオに一致するユーザーエクスペリエンスとインタラクションを作成する方法を確認できます。

CSS における @ の使い方のまとめはこれで終わりです。CSS における @ の使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Web でよく使われるフォントの紹介 (iOS および Android ブラウザでサポートされているフォント)

>>: HTMLでアンカーの位置を設定するためのいくつかの一般的な方法