next up previous contents
Next: 3.5 タグによるページのレイアウト Up: 3. WWWサーバによる情報公開 - 基礎編 Previous: 3.3 ページの作成


3.4 スタイルによるページのデザイン

"スタイルシート"は，文書の見た目を整える方法を提供し，フォント指定，サイズ指定，インデントなど位置指定，色指定などを全て制御できる．スタイルシートを使うことによって，HTML文書中から見た目に関する情報を排除，分離できる．ここは，スタイルシート記述言語である"CSS (Cascading Style Sheet)"について説明する．


3.4.1 CSSの文法

`フォント名'，`表示色'などといった見た目に関する情報を"プロパティ"と呼ぶ．CSSでは個々のプロパティについてプロパティ名と値の組を以下のように表現する．この組はいくつ並べてもよい． 

プロパティ名: 値;

例えば，背景色を#FFFFFFに指定したい場合は 

background: #FFFFFF;
と記述する．表3.2に代表的なプロパティを示す．この他にも多くのプロパティがあるので，詳しくは，市販のマニュアルなどを参照すること．


表 3.2: CSSで指定できるプロパティの例
プロパティ名 意味 値の例
background 背景色 #RRGGBB
color 前景色(文字の色) #RRGGBB
background-image 背景の画像 URI
font-size 文字の大きさ ?em，?pt，small，large
font-weight 文字の太さ bold，normal
font-style 斜体 italic，oblique，normal
text-align 文字の水平位置揃え left，right，center
vertical-align 文字の垂直位置 baseline，super，top，bottom
text-decoration 下線などの文字装飾 underline，overline，line-through，blink

文字の大きさの指定は，相対指定と絶対指定のいずれも可能である．`2em'なら`周囲の2倍の大きさ'，`12pt'なら`12ポイント'という意味になる．また，URI `url(index.html)'のように指定する．


3.4.2 STYLE属性によるスタイルシートの指定

実際に文書にスタイルシートを組み込む方法はいくつかある．本書ではそのうち，STYLE属性による指定と，<STYLE>タグによる指定について簡単に説明する．

既存のHTMLタグにはSTYLE属性を指定できる．これによって，そのタグの範囲だけにスタイルシートを適用できる．文書の一部だけにスタイルシートを適用したい場合に便利である． 

<TAGNAME STYLE="プロパティ名1: 値1; プロパティ名2: 値2; ...">
</TAGNAME>
例えば，特定の段落の文字色を変更したい場合は 

<P STYLE="color: #FF0000;">赤の段落</P>
<P STYLE="color: #0000FF;">青の段落</P>
のようにする．

3.4.3 <STYLE>タグによるスタイルシートの指定

<HEAD>タグと</HEAD>タグで囲まれた部分に <STYLE>タグを記述してスタイルシートを指定できる．ここで指定したスタイルは，そのHTML文書中の全てのタグに影響をおよぼす． 

<STYLE TYPE="text/css">
適用するタグ {
      プロパティ名1: 値1;
      プロパティ名2: 値2;
      ...
}
</STYLE>
TYPE属性で，このスタイルシートの記述言語がCSSであることを宣言している．例えば，<H1>タグと</H1>タグで囲まれた見出しの部分を緑色のイタリック体で表示したい場合は 

<STYLE TYPE="text/css">
H1 {
      color: #00FF00;
      font-style: italic;
}
</STYLE>

のようにする．

外部ファイルによるスタイルシートの指定

<HEAD>タグと<HEAD>タグで囲まれた部分に <LINK>タグを記述して，スタイルシートを指定できる．ここで指定したスタイルは，そのHTML文書中の全てのタグに影響をおよぼす． 

<LINK TYPE="text/css" HREF="リンク先のファイル名">

リンク先と指定するファイルには，次のようにスタイルシートを記述する． 

<STYLE TYPE="text/css">
適用するタグ {
      プロパティ名1: 値1;
      プロパティ名2: 値2;
      ...
}
</STYLE>

外部ファイルによってスタイルシートを指定すれば，複数の異なるHTML文書に対して同じデザインを適用できる．

next up previous contents
Next: 3.5 タグによるページのレイアウト Up: 3. WWWサーバによる情報公開 - 基礎編 Previous: 3.3 ページの作成