にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

スタイルシート(CSS)には「別のCSSファイル」を読み込む機能が用意されています。使い方は簡単で、例えば「style2.css」ファイルを読み込むには、次のように記述します。

@import url("style2.css");

スタイルシートの記述が大量になりすぎて、適用先別や装飾種類別にファイルを分割した方が管理しやすくなる場合や、別ページを装飾対象としたスタイルAとスタイルBのうち、共通する部分をスタイルCとして1ファイルに独立させた方が見やすいなどの場合には便利な気がします。ただし、この方法には弊害もあるので注意が必要です(後述)。

なお、この「@import」には「CSSソースの先頭(※)に記述しなければならない」という記述位置の制約があります。それ以外の場所に記述しても無視されますので注意して下さい。ただし、スタイルシートの文字コードを指定する「@charset」を記述する場合には例外で、「@charset」→「@import」の順序で記述します。

※独立したCSSファイル内に記述する場合はファイルの先頭、HTMLのstyle要素内に記述する場合はstyle要素の中身の先頭。

複数の外部CSSファイルを読み込むことも可能

この「@import」を使う方法は複数のCSSファイルを読み込ませることもできます。下記のように必要なだけ列挙するだけです。

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

説明するまでもないでしょうが、上記では「style2.css」・「style3.css」・「style4.css」の3ファイルを読み込んでいます。

メディアタイプを併記することで、特定の環境にのみ読み込ませることも可能

なお、メディアタイプを併記することで環境を限定しての読み込み指定もできます。例えば以下のようにCSSソースを記述すると、

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

上記には2つのCSSファイル名が記述されていますが、下記のように読み込まれる環境が限定されます。

  • 「styleprint.css」は印刷時にだけ読み込まれ、画面表示には使われません。
  • 「screen.css」は画面表示だけで読み込まれ、印刷時には使われません。

上記のように限定すると、例えばテレビ(=メディアタイプは「tv」)で表示された際には、どちらのCSSも適用されなくなりますので注意が必要です。

指定可能なメディアタイプ

ここで使えるメディアタイプには、「all」(すべて)・「screen」(画面)や「print」(印刷)・「projection」(プロジェクタ)などがあります。ただし、すべてのメディアタイプをブラウザがサポートしているとは限らない点にも注意が必要です。詳しくは、MDNのメディアタイプページなどが参考になります。

@importを使うと読み込み速度の面ではマイナス(デメリット)になる

このように使い方によっては便利な@importですが、読み込み速度の面ではマイナスであり、あまり使用は望ましくありません。読み込み速度が遅くなってしまう理由は、以下の通りです。

仮に、「style1.css」ファイルの中で「style2.css」が読み込まれており、その「style2.css」ファイルの中でさらに「style3.css」が読み込まれているケースを考えます。このときブラウザは、以下のような読み込み動作をします。

  • まず「style1.css」を読み込みます。
  • そこで@importの記述を発見し、次いで「style2.css」を読み込みます。
  • さらに@importの記述を発見し、次いで「style3.css」を読み込みます。

当たり前のように思えるかも知れませんが、この「順番に1つずつ読むしかない」点が速度低下に繋がります。

HTML側にlink要素を使って以下のように記述している場合は、3つのファイルを同時に読み込みできる(=最初のCSSファイルの読み込み完了を待たずに次のファイルをリクエストできる)ため、回線をより効率よく使ってダウンロードが可能です。

<link type="text/css" rel="stylesheet" href="style1.css">
<link type="text/css" rel="stylesheet" href="style2.css">
<link type="text/css" rel="stylesheet" href="style3.css">

どうせ3つのCSSファイルを読み込むのであれば、上記のHTMLソースのようにHTML側でlink要素を3つ並べて記述する方が、CSSファイル中に「@import」を記述するよりも早く読み込みが完了するでしょう。

どうしてもHTML側に手を加えられないなどの制約があるのであれば、スタイルシート側で@importを使う手もあるでしょうね。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---