ここではタグの中に直接スタイルシートを記述する方法を紹介します。
「CSSをもっとわかりやすく解説(2)」では<HEAD>〜<HEAD>の中にまとめて指定していましたが、この方法は個別のタグに対してCSSを指定することができます。
では、実際にCSSを書いていきます。
個別のタグに対して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> |
|
|
|
</HEAD> |
|
|
|
<BODY> |
|
|
|
|
<H3>解析集計結果</H3> |
|
|
|
|
<P>解像度</P> |
|
|
|
|
<TABLE border="1" style="background:#CCFF00; color:#339933;"> |
|
・背景色と文字色を指定 |
|
|
|
<TR> |
|
|
|
|
|
|
<TD>1024x768</TD> |
|
|
|
|
|
|
<TD>75.5%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
|
<TR> |
|
|
|
|
|
|
<TD>800x600</TD> |
|
|
|
|
|
|
<TD>8.1%</TD> |
|
|
|
|
|
</TR> |
|
|
|
|
</TABLE> |
|
|
|
|
<P>ブラウザ</P> |
|
|
|
|
<TABLE border="1" style="font-weight:bold; font-size:9pt;"> |
|
・文字の太さと文字の大きさを指定 |
|
|
|
<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を使えば指定することができるものがあります。
そんなときにはこのように「style=" "」を使うことでタグ内にスタイルを指定することができますが、後でスタイルを変えたいと思ったときにはどうでしょうか。
HTML文書を全部エディタで開き、文書内をくまなく見回して全部の箇所を修正しなくてはいけなくなります。
これではとっても不便ですね。
次では、CSSの部分を別ファイルにしておいて文書内に読み込む方法を紹介します。
→
次へ 「CSSファイルをHTML文書の中に取り込む方法」
