CSS @importルール

定義と使用方法

@importルールは、別のスタイルシートにスタイルシートをインポートすることを許可します。

@importルールはドキュメントのトップに配置する必要があります（@charset宣言の後に配置されますが）。

@importルールはメディアクエリをサポートしており、メディアに依存するインポートを許可します。

例

例1

"navigation.css"スタイルシートを現在のスタイルシートにインポートします：

@import "navigation.css"; /* 文字列を使用 */

または

@import url("navigation.css"); /* urlを使用 */

例2

プリントメディアのみで"printstyle.css"スタイルシートをインポートします：

@import "printstyle.css" print;

自分で試してみてください

例3

スクリーンメディアのみで、ビューポートの最大幅が768ピクセルの場合に"mobstyle.css"スタイルシートをインポートします：

@import "mobstyle.css" screen and (max-width: 768px);

自分で試してみてください

CSS文法

@import url|string list-of-mediaqueries;

属性値

値 説明
url|string urlまたは文字列で、インポートするリソースの場所を表します。urlは絶対または相対のものができます。
list-of-mediaqueries カンマで区切られたメディアクエリリストは、URLからインポートされたCSSルールがどのような条件下で適用されるかを決定します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5