"CSS Tips Factory" : Presented by Nishishi via WordPress.

CSS中から別の外部CSSファイルを読み込む []

スタイルシートには、別のスタイルシートファイルを読み込む機能が用意されています。使い方は簡単で、次のように記述します。

@import url("style2.css");

上記の例では、style2.cssファイルを読み込んでいます。
スタイルシートの記述が大量になりすぎて、適用先別や装飾種類別にファイルを分割した方が見やすくなる場合とか、別ページを装飾対象としたスタイルAとスタイルBのうち、共通する部分をスタイルCとして1ファイルに独立させるとか、そういう場合には便利な気がします。

複数の外部CSSファイルを読み込ませることが可能なので、必要なだけ列挙できます。以下のような感じで。

@import url("style2.css");
@import url("style3.css");
@import url("style4.css");

なお、この「@import」には記述位置の制約があって、必ず、CSSの先頭に記述しなければなりません。それ以外の場所に記述しても無視されます。
例外は「@charset」と、「@import」自身のみ。
「@import」よりも前の行に登場可能な記述は、スタイルシートの文字コードを指定する「@charset」と、「@import」自身のみです。

なお、HTMLのlink要素でスタイルシートを読み込む場合と同様に、メディアタイプを限定しての読み込み指定も可能です。例えば、以下のように記述すると、styleprint.cssは、印刷時にしか読み込まれません。
使えるメディアタイプは、「screen」とか「all」とか、HTMLと同じです。

@import url("styleprint.css") print;

なお、「@import」による外部CSSファイルの読み込み機能は、Netscape Navigator4以下や、IE3以下ではサポートされていません。従って、古いブラウザにスタイルを適用させないようにする方法として、この「@import」が使われることもあります。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。