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関数リファレンス

スタイルシートとは

■ スタイルシートの書式

スタイルシートでは、「セレクタ属性にする」という形で設定を行っています。例えば、簡単なスタイルシートは次のようになっています。

<HTML>
<STYLE>
H1 {color:green;}
</STYLE>
<H1>スタイルシート</H1>
<H2>スタイルシートの書式</H2>
</HTML>

この例では、H1{color:green} がスタイルシートの設定となり、<STYLE>タグと</STYLE>タグで囲まれています。
ここでは、セレクタは<H1>タグ、属性はcolor、値はgreenとなり、「H1タグの範囲の文字色を緑色にする」という指定になります。
セレクタとは、設定対象のことです。上の例では<H1>タグがスタイル設定の対象となるため、<H2>タグには適用されません。
このように、元々あるHTMLタグを再定義する形での適用が一番簡単な設定方法です。
スタイルの設定はタグに対して行うことも、タグの組み合わせに対して行うこともできます。目的に応じてセレクタを使い分ければ、さまざまな範囲にスタイルシートを適用することができます。
図個性は、セレクタの何に対してスタイルを設定するかを示す部分で、文字色(color)、背景(back-ground)、マージン(margin)といった様々な属性が用意されています。
値は、属性に対してどのようなスタイルを設定するのかを示す部分です。属性ごとに値が決められており、例えばcolor属性では何色にするかを値で指定することになります。
値の直後にセミコロン(;)がありますが、 これは、複数スタイル設定を行う場合、スタイル設定とスタイル設定を区切るための符号です。スタイル設定が一つだけの場合は特に指定しなくても構いませんが、常に指定する癖をつけておけば、スタイルを拡張する際にミスが少なくなるでしょう。

■ スタイルシート内のコメント

スタイルシートにコメントを記述する場合には、/*と/*でコメントを囲みます。
コメント中には改行も入れられます。タイトル・メモなどを書き込むときに利用します。

<STYLE TYPE="text/css">\
/*
コメントは改行も
できます。
/*
DIV {background-color:lime;}    /*ここにもコメントが記述できます。
</STYLE>
<BODY>
<DIV>コメントの部分は表示されません</DIV>
</BODY>

■  デフォルトのスタイルシートの設定

現在一般的に言われている「スタイルシート」とは、スタイルシートの一種であるCSS(Cascading Style Sheets)をさしていることが多いのですが、実際にはスタイルシートの実現方法はCSSだけではありません。そのため、スタイルシートを利用する場合にはデフォルトで使用するスタイルシートを指定しておく必要があります。これには<meta>タグを使って指定します。必ず<head>タグと</head>タグの間に記述してください。
多くの場合は、これらの情報を記述しなくてもブラウザ側が自動的に判別しますが、文字化けや誤動作が生じる可能性があります。正しく表示させるためには指定しておいてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>デフォルトのスタイルシートの設定</title>
<STYLE TYPE="text/css">
<!--

h1 {background-color:#cfc;}
h1,h2{color:rgb(0,128,0);}
-->
</STYLE>
</head>
<body>
</body>
</html>

■  大文字か小文字か

スタイルシートの属性は、大文字小文字を区別しません。
値の多くも、大文字小文字を区別しません。
ただし、フォント名、URLなどは大文字小文字を区別し、違う場合は指定が無効になりますので、注意が必要です。

<<<戻る

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