blob: d47dddf9bc5a0e71c1d5cf1e257bb6da6c58440e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
title: '@import'
slug: Web/CSS/@import
tags:
- アットルール
- CSS
- CSS カスケードと継承
- CSS 条件付きルール
- リファレンス
browser-compat: css.at-rules.import
translation_of: Web/CSS/@import
---
{{CSSRef}}
**`@import`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイルルールをインポートするために使用します。
## 構文
```css
@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 は絶対パス相対パスでも構いません。
- _list-of-media-queries_
- : リンクした URL で定義された CSS ルールの適用の条件を示す、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)のカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。
- _supports-query_
- : {{CSSxRef("@supports", "<supports-condition>", "#Syntax")}} または {{CSSxRef("Syntax", "<declaration>", "#CSS_declarations")}} のどちらかです。
## 解説
インポートされたルールは、 {{CSSxRef("@charset")}} を除く他の種類のルールよりも優先されます。これは[入れ子になるステートメント](/ja/docs/Web/CSS/Syntax#nested_statements)ではないので、 `@import` は[条件付きアットルールグループ](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中で使うことはできません。
{{glossary("user agent", "ユーザーエージェント")}}は未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した `@import` ルールを指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りの[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)で指定します。メディアクエリーがないと、インポートは無条件で行われます。メディアに `all` を指定しても同じ効果になります。
## 形式文法
{{csssyntax}}
## 例
### CSS ルールをインポート
```css
@import 'custom.css';
@import url("chrome://communicator/skin/");
```
### 条件付きで CSS ルールをインポート
```css
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{CSSxRef("@media")}}
- {{CSSxRef("@supports")}}
|
