CSS 外部ファイルの読み込み方

外部ファイルを使ってスタイルシートを設定すと、複数の HTML で共用できるだけでなく、HTML のソースを修正せずにレイアウトも含むスタイルの変更ができます。W3C( World Wide Web Consortium )では、外部スタイルシートの使用を推奨しています。
外部スタイルシートを読み込む場合は、次のように記述します。複数の外部スタイルシートがある場合も、複数行書くことで読み込むことができます。

css_outside.html から外部スタイルシートを読み込む

<head>
・・・・
<link rel="stylesheet" href="../css_dir/outside.css" type="text/css">
<link rel="stylesheet" href="../css_dir/child_dir/out1.css" type="text/css">
・・・・
</head>

この例は、次のようなディレクトリとファイル構造の場合を想定しています。 の記号は、ディレクトリを表します。

  • web_dir
    • html_dir
      • css_outside.html
    • css_dir
      • outside.css
      • child_dir
        • out1.css
        • out2.css

CSS 外部ファイルのインポート

機能や定義の種類ごとに分けた複数の外部スタイルシートを利用すると、ホームページ製作がかなり汎用化されます。ところが、前項のような HTML に複数の外部スタイルシートを読み込む記述では、追加の定義の新しいスタイルシートを追加する場合は、HTML を修正しなければなりません。おそらく複数の HTML を修正することになります。
そこで、新しいスタイルシートを追加する場合でも、スタイルシート側だけ修正すればよい方法があります。HTML からは、親の外部スタイルシートだけを指定し、親の外部スタイルシートから、子のスタイルシートをインポートします。こうすれば、外部スタイルシートの追加や削除があっても、HTML はそのままで親のスタイルシートだけを修正すれば済みます。
ディレクトリとファイルの階層は、前項と同じ構造として例を示します。

css_outside.html から親の外部スタイルシートを読み込む

 <head>
・・・・
<link rel="stylesheet" href="../css_dir/outside.css" type="text/css">
・・・・
</head>

outside.css ( 子スタイルシートをインポートする )

@import "child_dir/out1.css";
@import "child_dir/out2.css";

親の外部スタイルシートからインポートする css ファイルの相対 url は、親の外部スタイルシートが基準になります。
したがって、css で使用する背景画像などは、親の外部スタイルシートの下の階層のディレクトリに置くと使いやすいと思います。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > CSS > 外部CSS