ホーム>Web デザインのチュートリアル>CSS チュートリアル

CSS @ルール (詳細)

著者：Eve Cole 更新時間：2024-11-21 08:36:01

CSS には 2 つの構文ルールが含まれています。

通常のルール: セレクター、属性、値で構成され、以前の研究では主にこの種のルールを使用しました。

@ルール: @で始まり、その後にキーワードが続きます。「ATルール」とも呼ばれ、使用方法の違いにより「通常のルール」と「ネストされたルール」に分けられます。

CSSの@ルールを中心に紹介していきます。

1. 一般規則

いわゆる「通常のルール」とは、次のような構文を持つルールを指します。

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

(1)@charset

@charset は、CSS ファイルで使用される文字エンコーディングを設定するために使用されます。構文形式は次のとおりです。

 @charset<文字セット>;

このうち、<charset> は特定の文字エンコーディングであり、デフォルト値は「utf-8」です。

使用する場合は次の点に注意する必要があります。

① @charset が設定されている場合は、CSS ファイルの先頭に指定する必要があり、@charset の前に文字を指定することはできません。

②文字エンコーディングは二重引用符で囲む必要があります。

③ @rule 名 (@charset) と特定の文字エンコーディングを区切るにはスペースを使用する必要があります。

④ルールの後のセミコロンは省略できません。

⑤ @charset が複数設定されている場合は、最初のステートメントのみが有効です。

⑥@charset は HTML 要素や <style> タグ内では使用できません。

⑦複数の文字コード規則が異なる方法で定義されている場合、その優先順位は次のとおりです。

● HTML ファイルの先頭に文字エンコード宣言。

●HTTPリクエストヘッダの文字エンコーディング宣言。

●CSSファイル内では@charsetで定義された文字エンコード宣言が使用されます。

●<link>タグのcharset属性で設定する文字エンコーディング宣言（HTML5では非推奨）。

次の例は、@charset の使用法といくつかのエラーの例を示しています。

 /*CSS エンコード形式を UnicodeUTF-8 に設定します*/@charsetUTF-8;@charsetutf-8;/*大文字と小文字は区別されません*//*エラーのデモ*/@charset'iso-8859-15';/*無効です はい、間違った引用符が使用されています */@charset'UTF-8';/*無効です、間違った引用符が使用されています*/@charsetUTF-8;/*無効です、@charset と文字エンコーディングの間に余分なスペースがあります * /@charsetUTF-8;/*無効です。@ ルールの前に余分なスペースがあります*/@charsetUTF-8;/*無効です。文字エンコーディングは二重引用符で囲む必要があります*/

(2) @インポート

@import は、他のスタイル ファイルを現在の CSS スタイル ファイルにインポートするために使用されます。他のスタイル シート ファイルの @charset を除くすべてのコンテンツは、@import を通じて導入できます。また、@import もスタイル ファイルの先頭に配置する必要があります。 @import の構文形式は次のとおりです。

 @import<url><media_query_list>

このうち、<url> は、絶対パスまたは相対パスを使用してインポートされる外部スタイル シート ファイルのパスです。また、url() 関数を使用してファイル パスを指定することもできます。<media_query_list> は、ファイル パスを指定するために使用されます。メディア クエリの条件を指定するには、カンマを使用します。

実際のプロジェクトでは、@import を多用することはお勧めできません。大量の余分なリクエストが発生し、他のファイルの読み込みがブロックされるためです。

@import を使用する場合は、次の点にも注意する必要があります。

●@import はスタイルシートファイルの先頭で宣言し、末尾のセミコロンを省略すると外部スタイルシートが正しくインポートされない可能性があります。

●IEブラウザで@importを使用すると、スタイルシートは35個までしか導入できません。

次の例は、@import の使用法を示しています。

 @importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(blueish.css)projection,tv;@import'custom.css';@ importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);

url() を使用してスタイル シート ファイルのパスを設定する場合、上記の定義メソッドはすべて有効です。特定のパスを使用してスタイル シート ファイルのパスを設定する場合、折り返しパスの引用符はオプションです。引用符の折り返しパスは保持する必要があります。

(3)@名前空間

@namespace は、CSS スタイル シート内の XML 名前空間の @ ルールを定義するために使用され、現在のスタイル ファイル内のすべてのセレクターに指定された名前空間を設定できます。 @namespace は通常、HTML5 のインライン SVG、MathML、または複数の語彙が混在する XML など、複数の名前空間を含むドキュメントを処理するために使用されます。

@namespace は、すべての @charset と @import の後、スタイル シート内の他のスタイル宣言の前に定義する必要があります。 @namespace を使用してデフォルトの名前空間を定義すると、すべてのユニバーサル セレクターとクラス セレクター (属性セレクターではない) がこの名前空間内の要素にのみ適用されます。 @namespace は、名前空間プレフィックスの定義にも使用できます。一般セレクター、クラスセレクター、または属性セレクターの前に名前空間プレフィックスがある場合、このセレクターは、名前空間が要素名または属性と一致する要素のみと一致します。

次の例は、@namespace の使用を示しています。

 /*デフォルトの名前空間*/@namespaceurl(XML-名前空間-URL);@namespaceXML-名前空間-URL;/*名前空間プレフィックス*/@namespaceprefixurl(XML-名前空間-URL);@namespaceprefixXML-名前空間-URL;

2. 入れ子のルール

いわゆる「ネストされたルール」とは、@ ルールの後に中括弧 { } が続く必要があることを意味します。これには、次のような他のルール宣言が含まれます。

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

(1)@メディア

@media は、1 つ以上のメディア クエリの結果に基づいてスタイル シートの特定の部分 (中括弧内のスタイル情報) を適用するために使用されます。 @media を使用すると、メディア クエリのセットと CSS スタイル ブロックを指定できます。メディアの場合 指定された CSS スタイルは、クエリが使用されているデバイスと一致する場合にのみドキュメントに適用されます。

メディア クエリは、デバイスの幅と高さの値、アスペクト比、色、解像度などのデバイス情報を決定するために使用される一連の条件です。条件が一致すると、ネストされたスタイル情報が実行されます。

@media は、スタイル シートまたは他の @ ルールのどこにでも配置できます。サンプル コードは次のとおりです。

 @mediaalland(min-width:1280px){/*幅が 1280 より大きい*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*Retina スクリーン*/ } @mediaprint{/*print*/}@mediascreen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}

(2)@ページ

@page は、ドキュメントの印刷時に特定の CSS プロパティを変更するために使用されます。@page を使用すると、外側の間隔プロパティのマージン、印刷関連のオーファン、ウィンドウ プロパティ、改ページなどの一部の CSS プロパティのみを変更できることに注意してください。 -* プロパティ、他の CSS プロパティは無視されます。

 /*印刷時の最初のページの上と左の余白が両方とも 50% であることを示します*/@page:first{margin-left:50%;margin-top:50%;}

(3)@サポート

@supports は、ブラウザが「機能クエリ」とも呼ばれる特定の CSS 機能をサポートしているかどうかを確認するために使用されます。このルールの構文構造は次のとおりです。

 @supports(ルール)[演算子(ルール)]*{sRules};

このうち、rule は特定の CSS スタイルであり、括弧で囲む必要があります。演算子のオプションの値は or、and、not です。演算子パラメーターを使用して複数の CSS スタイルを指定できます。

@supports は、スタイル ファイルの先頭または他のネストされたルール内で定義できます。ただし、@supports はまだ実験段階にあり、使用する前にブラウザがサポートしているかどうかを確認する必要があります。

次の例は、@supports の使用法を示しています。

 /*ブラウザがdisplay:grid属性をサポートする場合に使用されるCSSスタイル*/@supports(display:grid){div{display:grid;}}/*ブラウザがdisplay:grid属性をサポートしない場合に使用されるCSS属性 Style*/@supportsnot(display:grid){div{float:right;}}/*複数の条件を同時にチェック*/@supports(display:flex)and(-webkit-Appearance:checkbox){.module {表示: フレックス;}}

(4) @font-face

@font-face は、リモート サーバーまたはローカル ユーザーから指定されたフォントをロードするために使用されます。構文形式は次のとおりです。

 @font-face{font-family:<識別子>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}

パラメータの説明は次のとおりです。

●<識別子>: フォント名。

●<url>: url() (リモート フォント) または local() (ローカル フォント) を使用して、相対パスまたは絶対パスのフォント保存パスを指定します。

●<string>: truetype、opentype、embedded-opentype、svg などのカスタム フォントの形式を指定するために使用されます。

●<font>: フォント関連のスタイルを定義します。

ヒント: @font-face は、CSS スタイル シートの先頭または他のネストされたルール内に配置できます。 local() 関数と url() 関数の両方を使用してフォントをロードする場合、local() 関数で定義されたローカル フォントが最初にロードされます。見つからない場合は、url() 関数で定義されたリモート フォントがロードされます。ロードされています。

次の例は、@font-face の使用法を示しています。

 /*@font-face ルールを定義します*/@font-face{/*フォント名を指定します*/font-family:OpenSans;/*フォント ファイルへのパスを指定します*/src:url(/fonts/OpenSans- Regular -webfont.woff2)format(woff2),url(/fonts/OpenSans- Regular-webfont.woff)format(woff);}/*フォントアプリケーション*/p{font-family:OpenSans;}

(5)@キーフレーム

@keyframes は、CSS3 でアニメーション キーフレーム (またはウェイポイント) のスタイルを定義し、アニメーション シーケンスの中間ステップを制御するために使用されます。このルールを定義した後、animation-name 属性を通じてそれを使用する必要があります。キーフレーム シーケンスはパーセンテージで名前が付けられ、開始状態と終了状態はそれぞれ 0% と 100% を表します。

@keyframes の構文形式は次のとおりです。

 @keyframes<識別子>{<キーフレームブロック>}

このうち、<identi fier> はアニメーションの名前を定義するために使用され、<keyframes-blocks> は各段階のアニメーション、つまりフレーム アニメーションのスタイルを定義するために使用されます。

@keyframes の使用法を次の例で示します。

 /*ステートメント*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{top:30px;}100%{top:60px;}}/*適用*/p{アニメーション名:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s ;}

(6)@ドキュメント

@document は、ドキュメントの URL に基づいてドキュメント内のスタイルの範囲を制限するために使用されます。この属性を使用して、指定したユーザーに対して排他的なスタイルを定義できます。現在、@document はまだ実験段階にあり、具体的な規格は CSS4 で決定される予定です。

@document で使用できる関数は次のとおりです。

●url(): URL 全体と一致します。

●url-prefix(): 一致するドキュメントの URL がパラメータで指定された値で始まるかどうか。

●domain(): 一致するドキュメントのドメイン名がパラメータで指定されたドメイン名であるか、そのサブドメイン名であるか。

●regexp(): 一致するドキュメントの URL がパラメータで指定された正規表現と一致するかどうか。表現は URL 全体と一致する必要があります。

ヒント: url()、url-prefix()、domain() 関数に指定されるパラメータは引用符なしでラップできますが、regexp() 関数に指定されるパラメータは引用符で囲む必要があります。

次の例は、@document の使用法を示しています。

 @documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/*この CSS ルールは次の Web ページに適用されます: + URL が http://www.weixueyuan.net/ であるページ + URL が http://www.weixueyuan.net/Style/ で始まるすべての Web ページ +ドメイン名 weixueyuan。net 内のすべての Web ページ + URL が https:*//*define style*/body{color:purple;background: yellow;} で始まるすべての Web ページ。
関連記事