6. インポート

スタイル・シートのコンポーネント化

CSS の適用方法

HTMLファイルへの style sheet の導入には、今まで見てきた三つの方法があります。

  1. 或る特定の HTML 要素の style 属性の属性値としてスタイル宣言を記述(インライン・スタイル
  2. 或る特定の HTML 文書の head 要素内に style 要素として記述
  3. 外部スタイル・シート<link rel="stylesheet" type="text/css" href="URL"> で参照

実際には、これら三つを組み合わせることになるでしょう;

  1. 複数の HTML 文書で使いまわせる一般的なスタイルを外部スタイルシートに用意して link 要素で読み込み、
  2. 当該のファイルのみで利用する特殊なスタイルは head 要素内に style 要素として記述。
  3. 更に、或る特定の(ただ一つの)要素にだけ働かせたい特別なスタイルは、要素の style 属性として記述します。

この時、 Cascade 処理の優先順位は、外部スタイル・シートよりも、 head 要素内の style 要素内の宣言の方が高くなり、更に、 style 要素よりも style 属性の方が優先順位は高くなります。

@import 規則

スタイルが複雑化すると、そのコンポーネント化(部品化)が記述/管理の労力の上で有効になります。これは、複数の外部スタイルシートの組込みで実現されます。HTML 側で link 要素を用いて複数の「外部スタイルシート」を用いても良いのですが、CSS でも @import 規則を用いて読み込めます。

あらゆる @import 規則は、スタイルシート内の如何なるスタイル宣言よりも先行せねばなりません。

@import "subs.css";
h1 { color: blue }
@import "list.css";

この時、二つ目の @import 規則は個別のスタイル宣言よりも後に記述されており、不正であり無視されます。これは style 要素でも外部スタイルシートでも同様です。

@import 規則は style 要素内または外部スタイルシートの冒頭に書かれなくてはなりません。

@import とメディアタイプ

外部スタイルシートの項で、当該スタイルシートを適用するメディアを指定する方法を紹介しました。 @import 規則でも、読み込んだスタイルシートを適用させるメディアを指定することが出来ます。

@import url("loudvoice.css") aural;

この例では、スタイルシート loudvoice.css を、音声合成機器(スピーチシンセサイザー)だけが読み込んで、文書に適用するように求めています。

詳細は「メディア」を参照ください。

@import 規則を利用した例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  ...省略...
  <link rel=stylesheet type="text/css" href="http://style.com/cool.css">
  <meta http-equiv="content-style-type" content="text/css">
  <style type="text/css">
    <!--
    @import url(http://www.htmlhelp.com/atomic.css);
    h1 { color: blue }
    -->
  </style>
</head>
<body>
  <h1>headline is blue</h1>
  <p style="color: green">while the paragraph is green.</p>
</body>
</html>

<meta http-equiv="Content-Style-Type" content="text/css">は、この文書内で用いるスタイル・シートが、CSSであることの宣言。インライン・スタイルで CSS を使う文書には必ず入れて下さい。

@import の優先順位

@import url(URL); は、外部スタイルシートの参照と云うよりも、スタイル宣言の一部です。インポートされたスタイルシートは自動的に他のスタイルシートに組み込まれることになります。 上の例の場合、優先順位は次のようになります:

cool.css (外部スタイルシート) < atomic.css (@import 規則) < head 要素内の style 要素 < 開始タグ中での style 属性

文書間で共有される外部スタイルシートは特定文書内の style 要素に上書きされ、文書内の要素間に共有される style 要素は特定要素内の style 属性に上書きされます。この順序の中に、 @import 声明で導入されるスタイルシートが割り込みます。

@import 規則は、外部スタイル・シートの中に記述して構いませんが、必ずファイルの冒頭に無ければなりません。スタイル宣言よりも後ろの行に記述すると無視されなければなりませんが、ブラウザ (UA) によって、サポートのばらつきがあります。

Copyright © 2004 SUGAI, Manabu. All rights reserved.
1998-04-01 published, 2004-06-20 revised.