※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。

■ 15.スタイルシート

スタイルシートは、前回説明したスタイル属性をまとめて記述する方法です。
例えば、1ページ内に同じタグが複数あった場合、何度も同じスタイル属性を記述するのは面倒ですよね。
そこで、同じタグなら1箇所で指定できるようにしたもので、CSS（カスケーディングスタイルシート）と呼ばれます。

CSSの記述方法は2種類あり、そのページ内に記述する方法と、その記述を別ファイルとして保存し、読み込んでくるという方法があります。

■ 同一ページ内のCSS

同一ページ内にスタイルシートを記述する場合は、次のようにHEAD句内に記述します。

【記述サンプル】: <HEAD> <TITLE>タイトル名</TITLE> <STYLE type="text/css">  </STYLE> </HEAD>

例えばそのページに表組みがいくつかあってすべて同じスタイルだった場合は、次のような記述をします。

【記述サンプル】: <HEAD> <TITLE>CSSサンプル</TITLE> <STYLE type="text/css">  </STYLE> </HEAD>

HEAD句内に上記のように記述しておけば、そのページ内の表組みは属性指定しなくても、すべて「表全体の背景色をnavy、フォントサイズを10ポイント、セル内の背景色をカラーコード#ffffcc」に統一することができます。

また、CSSで指定したスタイル以外をそのページで使用することもできます。
CSSで指定したスタイル以外の指定は次のように、そのタグで新しいスタイルを指定するだけです。

【記述サンプル】: <HEAD> <TITLE>フレーム表示</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <TABLE style="font-size : 12pt;"> <TR> <TD style="background-color : silver">明細セル</TD> </TR> </TABLE> </BODY>

スタイルシートを別ファイルとして保存する場合は、スタイル定義のみをファイルに保存し、次のようにHEADタグ内にそのファイルの呼び出しリンクを記述します。
その際、保存するファイル名の拡張子には、.css を使用します。

<LINK rel="stylesheet" type="text/css" href="ファイル名">

例えば前述のスタイルは、次のように記述したものを「tb1.css」などと名前を付けファイルに保存します。

【記述サンプル】: TABLE { background-color　: navy;font-size : 10pt; } TD { background-color : #ffffcc; }

そして、そのスタイルを使用したいページのHEAD句内に次のように記述します。

【記述サンプル】: <HEAD> <TITLE>CSSサンプル</TITLE> <LINK rel="stylesheet" type="text/css" href="tb1.css"> </HEAD>

例えば、種類の違うタグで同じスタイルを使用したい場合は、次のように記述します。
名前の前に必ず、.（ピリオド）を付けます。

そのスタイルを使用するときは、次のように記述します。
.（ピリオド）を付けずに直接、名前を記述します。

<A href="page1.html" CLASS="名前">

この方法ならタグが違っても共通したスタイルシートとして使用できます。