|
|
| スタイルシートの使用 |
- スタイルシートは、今までのHTMLのタグに機能を追加する為に開発されたテクノロジーで、
名前のごとく見た目のスタイルを細かく設定できるだけでなく、タグをブロック化したオブジェクトとして管理できます。
ここでは最も基本的な文字の大きさや、色の設定を解説しています。
フォントサイズやフォントの色は<font>タグでも指定できますが、styleで設定したフォントサイズや、
フォンとカラーはいつでも動的に変更できる事がタグとは違うところです。
また、ポイント(pt)単位で設定されたフォントは訪問者のブラウザ設定に関係なく、
指定された大きさで表示されますので、レイアウトが崩れる事も防いでくれます。
スタイルシートは、その都度１つ１つのタグに設定する事も可能ですが、
別ファイルにして各ページの先頭で読み込むことができます。
ホームページ全体に適用したい場合などには非常に便利です。
メモ帳などのテキストエディタに、
a:link { text-decoration:none; color:#FF0000 }
a:visited {
text-decoration:none; color:#0000FF }
a:active { text-decoration:none; color:#00FF00 }
a:hover { text-decoration:none; color:#FFFF00 }
このように入力して「mainstyle.css」と保存しておき、実際に表示する各ページの<body>タグの上にでも、
<link rel="stylesheet"
href="mainstyle.css" type="text/css">
このようにスタイルシートを呼び出すHTMLタグを追加するだけです。
※本来は<head>から</head>の間に置く
各ページで違ったスタイルシートを使用する場合は、<body>タグの上に、
<style TYPE=text/css>
a:link { text-decoration:none; color:#FF0000 }
a:visited {
text-decoration:none; color:#0000FF }
a:active { text-decoration:none; color:#00FF00 }
a:hover { text-decoration:none; color:#FFFF00 }
</style>
このように設定するスタイルを記述します。
- スタイルシートの大文字、小文字
スタイルシート内では大文字小文字を区別しません。
これはIEでもNetscapeでも同様です。どちらで書いても結構ですが、JavaScriptと、
CGIで使用する場合は、Perlとの区別が付きにくくなりますので、
どちらか一方に決めておいたほうがいいと思われます。
<p><div style="COLOR: #FF0000">大文字で書いています。</div></p>
<p><div style="color: #0000FF">小文字で書いています。</div></p>
|
|
- リンク色の設定
通常何も設定されていない場合は、リンクが付けられた文字列にアンダーラインが付けられます。
このアンダーラインを削除して他の属性を設定します。
<style TYPE=text/css>
a:link { text-decoration:none; color:#FF0000 }
a:visited { text-decoration:none; color:#0000FF }
a:active { text-decoration:none; color:#00FF00 }
a:hover { text-decoration:none; color:#FFFF00 }
</style>
<p>これはリンク色を設定するサンプルです。</p>
<a href=javascript:void(0)>ここにマウスをセットしてください。</a>
|
|
- ページ全体のフォントサイズを設定
ページ全体のフォントサイズを設定するには<body>タグに直接、
<body style="FONT-SIZE:
11pt">と書くことができますが、これでは全てのページに設定する必要がありますので、
スタイルシートのファイルに次のコードを追加して全てのページに適用する事もできます。
<style TYPE=text/css>
body { font-size: 15pt }
</style>
<p>ドキュメント全体のフォントサイズです。</p>
<table border=1><tr><td>
テーブル内には適用されません。
</td></tr></table>
|
|
ボディタグに設定したスタイルは<div>タグなどの領域には適用されますが、テーブル内のセルには適用されません。
テーブル内のセルにもフォントサイズを設定する場合は、
テーブル内のフォントを固定したい場合は、
<style TYPE=text/css>
body { font-size: 11pt }
td { font-size: 14pt }
</style>
<table border=1><tr>
<td>
テーブル内は14ポイントに設定
</td>
<td>
セルをいくつ追加してもテーブル内フォントサイズが適用されます。
</td>
</tr></table>
|
|
- 文字の背景色
各領域ごとにページ全体の背景色とは別の色で背景色を設定できます。
<p><div style="background:Red">背景色は赤です。</div></p>
<p><div style="background:Blue">背景色は青です。</div></p>
|
|
|
|
|
