Internet ExplorerやNetscapeなど主なブラウザはスタイルシートに対応しています。スタイルシートと聞くと難しいように思われがちですが、簡単に使用できるものも多く、WEB全体の統一感を出す為にも、作成時間短縮の為にも是非使ってほしい方法です。
|
|
 |
 |
| スタイルシートを使用する為には、まずヘッダ部分に＜STYLE＞タグを記述しなくてはなりません。 |
| 以下のように、＜STYLE TYPE="text/css"＞＜/STYLE＞タグ内に、自分の設定したスタイルシートを記述し、HTML内にヘッダ部分で設定したスタイルシートを用います。 |
|
各種設定 |
|
 ページの背景色 |
BODY{ background-color: #ffffff} |
ページ背景色：白 |
| ページの文字色 |
BODY{ color: #000000} |
ページ文字色：黒 |
ページ内の
文字のサイズ |
*{font-size: 10pt} |
ページ内の文字サイズ：10ｐｔ |
リンク部分の文字色
・サイズ (リンク部分 のアンダーライン
を消す) |
A: link { color: #006699;
font-size:8pt;
text-decoration:none} |
未アクセス時の文字色：水色
リンクのフォントサイズ：8pt
アンダーライン： なし |
A: visited { #006600;
font-size:8pt;
text-decoration:none} |
アクセス済みの文字色：緑
リンクのフォントサイズ：8pt
アンダーライン： なし |
A: hover { #cc0000;
font-size:8pt;
text-decoration:none} |
カーソルを重ねた時の文字色：赤
リンクのフォントサイズ：8pt
アンダーライン： なし |
見出し（H1）の
背景色・文字色 |
H1 { background-color: cc0000;
color: #ffffff} |
見出しの背景色：赤
見出しの文字色：白 |
文字の色・フォント
・サイズ・太さ |
P { color: #99ff00;
font-family:'ＭＳ Ｐゴシック', Osaka;
font-size:9pt;
font-weight:bold } |
文字の色：黄緑
文字のフォント：MSPゴシック,Osaka
文字のサイズ：9ｐｔ
文字の太さ：太い |
テーブルの枠の
スタイル・太さ
・背景色 |
TABLE {border : solid 1px #666666;
background-color: #ffffff } |
テーブル枠のスタイル：実線 1pt
テーブル枠の色：グレー
テーブルの背景色： 白 |
ラインのスタイル
・サイズ・色 |
HR {border-style:solid;
height:2px;
border-color: #cc0000} |
ラインのスタイル：実線 2ｐｔ
ラインの色： 赤 |
|
上記の設定ですと、例えば文字色<p></p>ならページ内全ての文字色が同じ設定になりますが、個々に違う表示をさせたい場合は、CLASS（クラス）名を指定してやることで区別することができます。 |
クラス名を指定 |
*クラス名（自分の好きな名前）・値の部分を変更します
|
文字色のクラス名
をtextと指定する |
P.text { color: #ff9900;
font-size:8pt } |
文字の色：オレンジ
文字のサイズ：8ｐｔ |
テーブル枠のクラス
名をwakuと指定する |
TABLE.waku {border : dotted 1px #cc0000;
background-color: #ffccff } |
テーブル枠のスタイル：破線
テーブル枠の色：赤
テーブルの背景色： ピンク |
|
これらを、実際にヘッダ内に記述すると以下のようになります。 |
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE TYPE="text/css">
BODY{ background-color: #ffffff;
color: #000000}
H1 { background-color: cc0000;
color: #ffffff}
P { color: #99ff00;
font-family:'ＭＳ Ｐゴシック', Osaka;
font-size:9pt;
font-weight:bold }
P.text { color: #ff9900;
font-size:8pt }
A: link { color: #006699;
font-size:8pt;
text-decoration:none}
A: visited { #006600;
font-size:8pt;
text-decoration:none}
A: hober { #cc0000;
font-size:8pt;
text-decoration:none}
TABLE {border : solid 1px #666666;
background-color: #ffffff }
TABLE.waku {border : dotted 1px #cc0000;
background-color: #ffccff }
HR {border-style:solid;
height:2px;
border-color: #cc0000}
</STYLE>
</HEAD>
|
|
|
|
|
|
|
他にも色々と設定の方法がありますが、初めはこの程度からやってみるといいでしょう。
|
|
|
 |
ヘッダ内で設定したスタイルシートを実際にBODY内で指定します。
下記のタグの様に指定します。 実際の表示と比較して見てください。
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<title>スタイルシート</title>
<STYLE TYPE="text/css">
BODY{background-color: #ffffff;
color:#000000}
*{font-size: 10pt}
H1 {background-color: cc0000;
color:#ffffff}
P {color: #99ff00;
font-family:'ＭＳ Ｐゴシック', Osaka;
font-size:9pt;
font-weight:bold }
P.text{color:#ff9900;
font-size:8pt}
TABLE.waku{border:dotted 1px #cc0000;
background-color:#ffccff }
HR {border-style:solid;
height:2px;
border-color:#cc0000}
</style>
</head>
<body>
<h1>スタイルシートの設定
</h1><br>
<p>ヘッダ内に設定したスタイルシートを実際に指定してみましょう。</p>
<p class="text">クラス名をつけたものは、タグの後ろにclass="クラス名"とつけるだけで指定できます。</p><br>
<hr>
<table class="waku"
width="350" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>簡単ですね。</td>
</tr>
<tr>
<td>これでページ数が多くても同じデザインで統一できます。</td>
</tr>
</table>
</body>
</html>
|
|
|
|
|
 |
これまで説明してきたスタイルシートの設定の他に、外部スタイルシートを用いることもできます。
外部スタイルシートとは、webページのスタイルを記述したtextファイルに拡張子「.css」を付けて保存したものです。このファイルを読み込むことによって、上記説明と同様にスタイルシートを適用することができます。外部スタイルシートの読み込みには、<LINK>タグを使用します。
|
|
|
|
