Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

外部スタイルシートの読み込み

■ スタイルシートの設定方法

スタイルシートの設定方法は、大きく分けて以下の3つの方法があり、利用する状況に応じて使い分けができるようになっています。

■ 外部スタイルシート読み込みの記述方法

外部スタイルシートの読み込みでは、HTML文書内でスタイルシートの設定をするのとは異なり、別途、スタイルシートの設定を行ったファイルを用意し、必要に応じて取り込む方法です。

<LINK REL="stylesheet" HREF="★" TYPE="text/css">

この方法では、 HTML文書の<LINK>タグでスタイルシートファイルを読み込む時点でスタイルシートと解釈されるので、外部スタイルシートファイルの中には<STYLE>タグは必要ありません。このとき、外部スタイルシート内で<STYLE>タグを記述してしまうと、<LINK>タグがスタイルシートを解釈できず、スタイルの適用が行われませんので、注意してください。
外部スタイルシート・ファイルの拡張子は.cssとなります。
一つのスタイルファイルをサイト全体に適用させ、サイト全体のページの雰囲気を統一したいときなどに利用すると便利です。

■ 作例

HTML文書

<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="test.css" TYPE="text/css">
</HEAD>
<BODY BGCOLOR="yellow">
<H3>スタイルシートの記述方</H3>
<P> 外部スタイルシートの読み込みでは、HTML文書内でスタイルシートの設定をするのとは異なり、別途、スタイルシートの設定を行ったファイルを用意し、必要に応じて取り込む方法です。</P>
</BODY>
<HTML>

外部スタイルシートファイル(test.css

H3 {color:green;
  background-color:white;}

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial