|
WWW/WWWサーバによる情報公開 - 基礎編/スタイルシートによるページのデザイン
``スタイルシート''は，文書の見た目を整える方法を提供し，フォント指定，サイズ指定，インデントなどの位置指定，色指定などをすべて制御できます．スタイルシートを利用することにで，HTML文書中から見た目に関する情報を排除，分離できます．ここでは，スタイルシート記述言語である``CSS (Cascading Style Sheet)''について説明します． 3.5.1 色の指定
ページの背景や文字の色を変更するには，16進数で表現されたR (赤)，G (緑)，B (青)の3色の濃淡の組み合わせで指定します．例えば，``
#RRGGBB
3.5.2 CSSの文法`フォント名'，`表示色'などといった見た目に関する情報を``プロパティ''と呼びます．CSSでは個々のプロパティについてプロパティ名と値の組を次のように表現します．また，複数のプロパティを指定する際には，;で区切り，並べて記述できます．
プロパティ名: 値; 例えば，背景色を#FFFFFFに指定したい場合は次のように記述します．
background: #FFFFFF; 表3.2に代表的なプロパティを示します．この他にも多くのプロパティがあるので，詳しくは市販のマニュアルなどを参照してください．
文字の大きさの指定は，相対指定と絶対指定のいずれも可能です．``2em''なら``周囲の文字の大きさの2倍''，``12pt''なら``12ポイント''という意味になります．また，URLは `url(index.html)'のように指定します． 3.5.3 style属性によるスタイルシートの指定実際に文書にスタイルシートを組み込む方法はいくつかあります．本書ではそのうち，style属性による指定と，<style>タグによる指定について簡単に説明します． 既存のHTMLタグにはstyle属性を指定できます．これによって，そのタグの範囲だけにスタイルシートを適用できます．文書の一部だけにスタイルシートを適用したい場合に利用してください．
<tagname style="プロパティ名1: 値1; プロパティ名2: 値2; ..."> </tagname> 例えば，特定の段落の文字色を変更したい場合は，次のように記述します．
<p style="color: #FF0000;">赤の段落</p> <p style="color: #0000FF;">青の段落</p> 3.5.4 <style>タグによるスタイルシートの指定<head>タグと</head>タグで囲まれた部分に <style>タグを記述してスタイルシートを指定できます．ここで指定したスタイルは，そのHTML文書中のすべてのタグに影響がおよびます．
適用するタグ {
プロパティ名1: 値1;
プロパティ名2: 値2;
...
}type属性で，このスタイルシートの記述言語がCSSであることを宣言しています．例えば，<h1>タグと</h1>タグで囲まれた見出しの部分を緑色のイタリック体で表示したい場合は次のように記述します．
h1 { color: #00FF00;
font-style: italic;
}外部ファイルによるスタイルシートの指定<head>タグと<head>タグで囲まれた部分に <link>タグを記述して，スタイルシートを指定できます．ここで指定したスタイルは，そのHTML文書中のすべてのタグに影響をおよぼします．
<link type="text/css" href="リンク先のファイル名"> リンク先と指定するファイルには，次のようにスタイルシートを記述します．
<style type="text/css">
適用するタグ {
プロパティ名1: 値1;
プロパティ名2: 値2;
...
}
</style>
外部ファイルによってスタイルシートを指定すれば，複数の異なるHTML文書に対して同じデザインを適用できます．
|
