さて、ここからCSSを使うわけなのですが、CSSを使うときには、<META>タグを追加してスタイルシートを使う指定をしてやります。
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
 |
・HTMLがどのバージョンで書かれているかを指定する |
| <HTML> |
|
・HTMLで書かれていることを宣言する |
|
<HEAD> |
|
・文書に関する情報を記述する |
|
|
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> |
|
・どの文字コードで書いているかを指定する |
|
|
<META http-equiv="Content-Style-Type" content="text/css"> |
|
・スタイルシートの種類を指定する |
|
|
<TITLE></TITLE> |
|
・文書のタイトルを記述する |
|
</HEAD> |
|
|
|
<BODY> |
|
・ページの中身を記述する |
|
</BODY> |
|
|
| </HTML> |
|
|
|
では、実際にCSSを書いていきます。
今回の場合は<P>〜</P>タグに対して色を変えてやりたいので、この「Pセレクタ」に対して文字色の指定をします。
(<P>〜</P>タグだから「Pセレクタ」、<BODY>〜</BODY>タグだったら「BODYセレクタ」といった呼び方になります)
| <!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"> |
|
|
|
|
<TITLE></TITLE> |
|
|
|
|
<STYLE TYPE="text/css"> |
|
|
|
|
<!-- |
|
|
|
|
P{color:#FF0000} |
|
・Pセレクタに文字色の指定 |
|
|
--> |
|
|
|
|
</STYLE> |
|
|
|
</HEAD> |
|
|
|
<BODY> |
|
|
|
|
<H3>解析集計結果</H3> |
|
|
|
|
<P>解像度</P> |
|
|
|
|
<TABLE border="1"> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>1024x768</TD> |
|
|
|
|
|
|
<TD>75.5%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>800x600</TD> |
|
|
|
|
|
|
<TD>8.1%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
</TABLE> |
|
|
|
</BODY> |
|
|
|
これでこのページに書かれたすべてのPセレクタの文字色が赤になります。
項目を少し追加して表示させるとこんな感じです。
これですべてのPセレクタが赤い文字で表示されるのですが、部分的に「青」にしたい場合は困りますよね。
そこで登場するのが、CSSのclass指定とid指定です。
class指定は、種類や分類名を表すものなので複数の箇所に指定することができます。
id指定は、固有の名前をつけるものなので1箇所にしか指定することができません。
ここでは複数の箇所に指定することができるclass指定を使うことにします。
class指定をするには、<STYLE TYPE="text/css"><!-- 〜 --></STYLE>の間に、先頭にピリオドをつけて指定します。
| <!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"> |
|
|
|
|
<TITLE></TITLE> |
|
|
|
|
<STYLE TYPE="text/css"> |
|
|
|
|
<!-- |
|
|
|
|
P{color:#FF0000} |
|
・Pセレクタに文字色の指定 |
|
|
.blue{color:#0000FF} |
|
・先頭にピリオドをつけてclassを指定 |
|
|
--> |
|
|
|
|
</STYLE> |
|
|
|
</HEAD> |
|
|
|
<BODY> |
|
|
|
|
<H3>解析集計結果</H3> |
|
|
|
|
<P>解像度</P> |
|
|
|
|
<TABLE border="1"> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>1024x768</TD> |
|
|
|
|
|
|
<TD>75.5%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>800x600</TD> |
|
|
|
|
|
|
<TD>8.1%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
</TABLE> |
|
|
|
|
<P class="blue">ブラウザ</P> |
|
・Pセレクタにclassを指定 |
|
|
<TABLE border="1"> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>WinIE 6.0</TD> |
|
|
|
|
|
|
<TD>84.9%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>WinIE 5.5</TD> |
|
|
|
|
|
|
<TD>6.3%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
</TABLE> |
|
|
|
|
<P>OS</P> |
|
|
|
|
<TABLE border="1"> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>WinXP</TD> |
|
|
|
|
|
|
<TD>57.4%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>Win98</TD> |
|
|
|
|
|
|
<TD>14.7%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
</TABLE> |
|
|
|
</BODY> |
|
|
|
上記と同じやり方で、色んなタグに同じclassを指定してみました。
スタイルシートを指定するには、上記のようにHTML文書の<HEAD>〜</HEAD>内に直接指定する方法以外にも2つの方法があります。
次では、タグの中に直接スタイルシートを記述する方法を紹介します。
→
次へ 「個別のタグに対してスタイルを指定する方法」
