トップページ > スタイルシート > スタイルシートの@import

スタイルシートの@import

  • 2009-02-02 (月) 8:30

スタイルシートの@importの規則として、
　スタイルシート内のどのスタイル宣言よりも前に記述しなくてはならない、
というものがあります。

この規則ですが、Internet Explorer 7 では、より制約が厳しいので注意が必要です。例えば、次のような記述では、category1_index.cssを組み込んだページは期待通りの結果を得られない事があります。

base_index.cssの内容

@import url(theme.css);

// theme.css を基本とし、Webサイト全体の共通の定義を記述
body {
    background-color: #F5F5DC;
}

category1_index.cssの内容 

@import url(base_index.css);

// base_index.css から変更したい部分のみを記述
body {
    color: 555555;
}

この問題の対処方法は次のようになります。

base_index.cssの内容

// theme.css を基本とし、Webサイト全体の共通の定義を記述
body {
    background-color: #F5F5DC;
}

category1_index.cssの内容 

@import url(theme.css);
@import url(base_index.css);

// base_index.css から変更したい部分のみを記述
body {
    color: 555555;
}

FireFox3、Safari3、Chrome等のブラウザでは前者の方法でも問題ありませんが、Internet Explorer 7では@importが記述されたスタイルシートの@importにうまく対応できていないようです。

トップページ > スタイルシート > スタイルシートの@import

メニュー
カテゴリー
お知らせ

トップページへ戻る