From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/@import/index.html | 100 ++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ja/web/css/@import/index.html (limited to 'files/ja/web/css/@import/index.html') diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html new file mode 100644 index 0000000000..8ded925276 --- /dev/null +++ b/files/ja/web/css/@import/index.html @@ -0,0 +1,100 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@-規則' + - CSS + - CSS カスケードと継承 + - CSS 条件付き規則 + - メディアクエリ + - リファレンス +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

CSS の @import @-規則 は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは入れ子になるステートメントではないので、 @import は条件付き @-規則グループの中で使うことはできません。

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+ +

{{glossary("user agent", "ユーザーエージェント")}}は未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した @import 規則を指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリで指定します。メディアクエリがないと、インポートは無条件で行われます。メディアに all を指定しても同じ効果になります。

+ +

構文

+ +
@import url;
+@import url list-of-media-queries;
+@import url supports( supports-query );
+@import url supports( supports-query ) list-of-media-queries;
+
+ +

内容は次の通りです。

+ +
+
url
+
インポートするリソースの位置を表す {{CSSxRef("<string>")}} または {{CSSxRef("<url>")}} です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 chrome://communicator/skin/)。詳しくはこちらをご覧ください。
+
list-of-media-queries
+
リンクした URL で定義された CSS 規則の適用の条件を示す、メディアクエリのカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。
+
supports-query
+
{{CSSxRef("@supports", "<supports-condition>", "#Syntax")}} または {{CSSxRef("Syntax", "<declaration>", "#CSS_declarations")}} のどちらかです。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Cascade", "#at-import", 'the @import rule')}}{{Spec2("CSS4 Cascade")}}{{CSSxRef("@supports")}} 構文に対応するよう構文を拡張
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}}
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}単純な メディアタイプ だけでなく、いかなるメディアクエリもサポートするよう構文拡張
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}スタイルシートの URL の記述する {{CSSxRef("<string>")}} のサポートを追加し、
+ @import ルールを CSS 文書の最初に入れることを条件化
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.import")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf