CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの@importルールとは？メディアタイプ別にスタイルシートを読み込む方法

CSSの@importルールは、外部スタイルシートを読み込むための@ルールです。インポートするCSSファイルのURLの後にメディアタイプを指定することで、「画面表示用」「印刷用」など、対象となるメディアごとに異なるスタイル情報を適用できます。

@importの基本構文

@importルールの基本的な書き方は以下のとおりです。

@import url("/* ファイルパス */") メディアタイプ {
    CSSコード;
}

それでは、実際のコード例を見ていきましょう。

例1：screen（画面）とprint（印刷）でスタイルを切り替える

HTMLドキュメント

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo. Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

CSSファイル（screen.css）

画面表示時に適用されるスタイルです。

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew; }

CSSファイル（print.css）

印刷時に適用されるスタイルです。

p { color: red; font-style: italic; }
.two { color: #989898; font-size: 40px; }

実行結果

ドキュメントがscreen（画面）メディアタイプで表示された場合：

CSSの@importルールとは？メディアタイプ別にスタイルシートを読み込む方法

ドキュメントがprint（印刷）メディアタイプで表示された場合：

CSSの@importルールとは？メディアタイプ別にスタイルシートを読み込む方法

例2：all（すべてのメディア）に対してスタイルを適用する

次に、すべてのメディアタイプに共通のスタイルを読み込む例を見てみましょう。

HTMLドキュメント

<!DOCTYPE html>
<html>
<head>
<title>CSS @import rule</title>
<style type="text/css">
@import url(all.css) all;
</style>
</head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>

CSSファイル（all.css）

p {
    float: left;
    margin: 10px;
    padding: 10px;
    color: white;
    background-color: #48C9B0;
    border: 4px solid #145A32;
}
p.noneFloat {
    float: none;
    clear: both;
    color: #34495E;
}

実行結果

CSSの@importルールとは？メディアタイプ別にスタイルシートを読み込む方法

まとめ

@importルールを使うと、メディアタイプ（screen・print・allなど）を指定して外部CSSファイルを読み込めるため、デバイスや出力形式に応じた柔軟なスタイル管理が可能になります。なお、@importは必ずスタイルシートの先頭に記述する必要がある点に注意しましょう。

  1. CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

    CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。構文（Syntax）@mediaルールの基本的な構文は以下の通りです。@media not | only mediatype and (expressions) { CSS-Code; }「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デ

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &