スタイルシートとは
スタイルシートでは、「セレクタの属性を★にする」という形で設定を行っています。例えば、簡単なスタイルシートは次のようになっています。
<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などは大文字小文字を区別し、違う場合は指定が無効になりますので、注意が必要です。