CSSファイルをHTML文書の中に取り込む方法

ここではCSSの部分を別ファイルにしておいて文書内に読み込む方法を紹介します。
「CSSをもっとわかりやすく解説(2)」ではHTML文書の<HEAD>～<HEAD>の中にまとめて指定していましたが、この方法は<STYLE TYPE="text/css"></STYLE>の中に記述していたものを別ファイルにします。

まずCSSを別ファイルにするわけですから、その別ファイルを作成しなくてはいけません。
ファイルは拡張子を「.css」にします。
そしてファイルの中には、<STYLE TYPE="text/css"></STYLE>の中に記述していたものだけを記述します。

次にHTML文書内にこのCSSファイルを読み込む指定をします。
CSSファイルを読み込むには次の<META>タグを追加してやります。
<LINK rel="STYLESHEET" href="test.css" type="text/css">
赤字の部分は作成したCSSファイルの名前にします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
	<HEAD>
			<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
			<META http-equiv="Content-Style-Type" content="text/css">
			<LINK rel="STYLESHEET" href="test.css" type="text/css">		・CSSファイルを指定
			<TITLE></TITLE>
	</HEAD>
	<BODY>
		<H3>解析集計結果</H3>
		<P>解像度</P>
		<TABLE border="1" class="style1">			・CSSファイルの中にあるclassを指定
			<TR>
				<TD>1024x768</TD>
				<TD>75.5%</TD>
			</TR>
			<TR>
				<TD>800x600</TD>
				<TD>8.1%</TD>
			</TR>
		</TABLE>
		<P class="blue">ブラウザ</P>			・CSSファイルの中にあるclassを指定
		<TABLE border="1" class="style2">			・CSSファイルの中にあるclassを指定
			<TR>
				<TD>WinIE 6.0</TD>
				<TD>84.9%</TD>
			</TR>
			<TR>
				<TD>WinIE 5.5</TD>
				<TD>6.3%</TD>
			</TR>
		</TABLE>
	</BODY>

上記を表示させるとこのようになります。

「CSSをもっとわかりやすく解説(2)」～「CSSをもっとわかりやすく解説(4)」の中で、スタイルシートを指定する3つの方法を解説しましたが、メンテナンスの容易さの面からおさらいをしてみたいと思います。

　→　次へ　「CSSのおさらい」