Contents
HTMLは、論理構造のマークアップをする言語です。文書の各部分毎に意味付けして行く、或は部分毎の意味を明確に目印付けしながら、全体の文書を構築して行くと云う「論理デザイン」と呼ばれる仕組みです。
其の見栄えは、御利用のブラウザに一任されることになります。H1要素は「見だしを意味する要素」だから「文字を大きく、太くする」と云うブラウザも在れば、マージンを取ることで見だし要素であることを示すブラウザも在るでしょう。この見栄えを、作り手が明示的に制御することは、HTMLでは基本的に出来ません。出来ても非常に限定された所までしか出来ないのです。例えば、「マージン」や「行間」、「文頭のインデント」などはHTMLでは指定できません。
逆に云えば、それらは論理構造ではないので、それらのいちいちをHTMLが指定すると、文書の論理構造が分り辛くなってしまいます。また、変更する場合には、個々のページの個々の要素の個々の属性をいちいち書き換える必要があり、非常に面倒であり、事実上新しくページを書き直す必要があるでしょう。そこで、見栄えの制御はHTMLから分離することになり、現在採用されているものの一つが、カスケーディング・スタイル・シート（CSS）と云う仕組みです。
見栄えと構造を分けるという考え方は、オブジェクト指向プログラミングにおいて「プレゼンテーションとロジック」を分けることにも照応します。生産性を高めるための工夫として、普遍的な流れです。
スタイル・シートは、論理構造をマークアップしたHTMLの要素毎に、その見栄えを明示的に指定する仕組みです。
次の文字列は、スタイルシートの例です：
p { line-height: 1.5}
このスタイルシートが適用された HTML 文書では、 p 要素の行の高さが、文字の高さの 1.5 倍になります。
もう少し詳しく見てみましょう：
| 用語 | スタイル宣言 | ||||||
|---|---|---|---|---|---|---|---|
| セレクタ | { |
プロパティ | : |
値 | } |
||
| スタイルシート | p |
{ |
line-height |
: |
1.5 |
}
| |
| 意味 | p 要素 | { |
行の高さ | : |
1.5 倍 | }
| |
如何でしょうか、感じがつかめましたか？ CSS ではこのように、 HTML では指定できない見栄えの部分を設定できます。
上述のスタイルシートを、或る HTML 文書に適用する方法を紹介します。目的の HTML 文書の head 要素を、次のように記述します：
<head>
...省略...
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
p { line-height:1.5 }
-->
</style>
</head>
HTML ソースの、head 要素内に、style 要素を記述してあります。この文書内の p 要素の行の高さは文字の大きさの 1.5 倍になります。
| CSSの記述形式 | セレクタ | { | プロパティ | : | 値 | }
|
| 具体例 | p | { | line-height | : | 1.5 | }
|
「セレクタ」が、宣言するスタイルを適合させる対象を指し、「プロパティ : 値」が、スタイルの宣言です。
例えば、HTML 文書内の全ての p 要素ではなく、或る特定の p 要素だけ、一行の高さを文字の 1.3 倍にしたい。」と思えば、次のように、目標の p 要素に style 属性を与えます。
<p style="line-height:1.3">
行の高さが一文字の 1.3 倍になる p 要素
</p>
| 【表示例】 |
|---|
|
一行の高さとは、行の下線と、下線の間の長さです。一行が一文字の 1.3 倍ということは、上の行と下の行の間の空白が 0.3 文字分空くということです。ウィンドウの大きさを調節して、この段落の行高が 1.3 文字程度であることを確認してください。 |
このように、 style 属性の属性値として宣言するスタイルを、インライン・スタイルと呼びます。
インライン・スタイルでは、適合させる対象は自明ですので、セレクタは省略し、スタイル宣言だけを直接記述します。
スタイルシートの適合方法は他にもありますが、ここで複数のスタイルが競合した場合の解決方法を紹介します。 STYLE 要素の宣言と style 属性の宣言が矛盾した場合は、どうなるでしょうか？
style 要素で、「p 要素の文字色は黒」と宣言されていても、或る p 要素の style 属性で「文字色は赤」と宣言されていれば、当該の p 要素の「表示される文字色は赤」になります。
head 要素内の STYLE 要素で宣言されたスタイルは、個別の要素に与えられた style 属性の INLINE スタイルによって上書きされます。
HTMLが論理構造を正しくマークアップしているほど、スタイルシートによる見栄えの調整もスムースに、統一的に行えます。
スタイルを適合させる対象が、 HTML で用意された要素では足りない場合は、 DIV 要素や SPAN 要素に class 属性を与えて、よりきめこまかいマークアップが出来ます。 class 属性に付いてはこの章では扱いません。Selector の拡張 (N)を御覧下さい。
CSS の HTML 文書への導入方法は他にもありますが、それは後で解説します。
CSSは基本的に次のような構造からなります;
property1: value1; property2: value2
property と、その値 value でワン・セットの宣言 property: value です。複数の宣言の間はセミコロン";"で区切ります。
例えば、次の例を御覧ください；
background-color: #ccc; color: blue; line-height: 1.5em
| プロパティ | 値 | プロパティの意味 |
| background-color | #ccc | 背景色 |
| color | blue | 前景色（文字の色など） |
| line-height | 1.5em | 行の高さ |
'background-color'は、「背景色」を指定するプロパティで、'color'は「前景色（文字の色など）」を指定、'line-height'は、「行高」を指定するプロパティです。この例では、「背景色」を #ccc にし、「前景色」を blue に、「行高」を 1.5em （1.5文字分＝1.5クワタ）にするように宣言されています。
色や長さの単位などは、後で説明します。
CSSが何であるか、手っ取り早く味わって頂く為に、サンプルを御用意致しました。適当なHTML文書のhead要素（<head>から</head>まで）の中に、次のサンプルをコピー&ペーストして下さい。
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
/* StyleSheetsのサンプル */
body {
margin: 1em;
font-family: serif;
line-height: 1.3em;
background: white;
color: #333 }
h1, h2, h3, h4 { margin: 1em 0}
h5, h6 { margin-top: 1em }
h1 { text-align: center }
h1, h2, h4, h6 { font-weight: bold }
h4, h5 { font-style: italic }
h1 { font-size: xx-large;
margin-left:1em }
h2 { font-size: x-large;
margin-left:3em }
h3 { font-size: large;
margin-left:6em }
p {line-height:1.5em; text-indent:1em }
strong { font-weight: bolder } /* relative to the parent */
cite, em, var, address, blockquote { font-style: italic }
pre, code { font-family: monospace }
pre { white-space: pre }
address { margin-left: 3em }
blockquote { margin-left: 3em; margin-right: 0 }
ul { list-style: disc }
ol { list-style: decimal }
li { margin-left: 3em }
dt { margin-bottom: 0 }
dd { margin-top: 0; margin-left: 3em }
hr { border:none; border-top: 2px groove red }
/* 'border-bottom' could also have been used */
a:link { color: navy } /* unvisited link */
a:visited { color: maroon } /* visited links */
a:link,a:visited {text-decoration:underline }
a:hover {color: gold; text-decoration:none } /* mouse-over links*/
a:active { color: green } /* active links */
/* setting the anchor border around img elements
requires contextual selectors */
a:link img { border: 2px solid navy }
a:visited img { border: 2px solid maroon }
a:hover img {border:none }
a:active img { border: 2px solid green }
-->
</style>
上の style 要素のサンプルを、適当な HTML 文書の head 要素内に挿入して下さい。 head 要素の内部構造は、次のように成ります；
<head>
...省略...
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!-- 省略 -->
</style>
</head>
当該のHTML fileをブラウザで開くと、スタイルシートの効果が分ることと思います。 数字やパラメタを色々変えてみてください。