<<PREV | TOP | NEXT>>

CSS - Cascading Style Sheets

CSS は HTML 文書の見栄えを調整するための仕組みです。ここでその概略を述べます。まずは試してみたい方は、「CSS スピードラーニング」を、さらに詳しい解説は「CSS 解説」を御覧ください。

1. CSS の基本的な書式

段落を表す P 要素の行頭を一文字へこませたいとします（インデントを一文字分取る）。この指定は、 CSS では次のように記述します；

p { text-indent: 1em }

p をセレクタと呼び、スタイル宣言の適用対象を表します。 { から } までを宣言と呼び、見栄えを指定します。ここで、 text-indent は CSS のプロパティと呼び、 1em はその値です。

一つのセレクタに複数のスタイル宣言を記述する時は、相互をセミコロン ; で区切ります；

p em { font-style: italic;
  color: red;
  text-decoration: underline }

セレクタ P em は「 P 要素の内側に入っている EM 要素」を表します。宣言は、「文字スタイルがイタリック体で、色が赤、下線表示」の三つが指定されています。

2. セレクタの種類

タイプ・セレクタ

例えば、 H1 と云う要素にマッチするセレクタです；

h1 { font-weight: 900 }

子孫セレクタ

例えば、 P 要素の子孫要素である EM 要素にマッチするセレクタです；

HTML 文書の例；

<p>
ここは P 要素の内容部です。
或る要素の内容部に現れる要素のことを、
一般に<em>子孫要素</em>と呼びます。
</p>

対応するスタイルシートの例；

p em { color: red }

クラス・セレクタ

要素に class 属性が与えられている場合、セレクタで参照できます。

パラメタ実体 %coreattrs; の一部である class 属性は、 BODY 要素内のあらゆる要素 (%flow;) に与えることが出来ます。

HTML 文書の例；

<p class="note">
ここは P 要素の内容部です。
この P 要素には、 class 属性が与えられており、
その属性値は note です。
</p>

対応するセレクタの例

p.note { font-style: italic }

ここでは class="note" を持つ P 要素だけにマッチするようにセレクタを書きましたが、 class="note" を持つ全ての要素にマッチするようにも書けます；

.note { text-decoratoin: underline }

一意セレクタ

要素に id 属性が与えられていれば、セレクタで参照できます。

パラメタ実体 %coreattrs; の一部である id 属性は、BODY 要素内のあらゆる要素 (%flow;) に与えることが出来ます。

HTML 文書の例；

<h1 id="optical-properties">光学物性</h1>

対応するセレクタの例；

h1#optical-properties { color: yellow }

id 属性の値には、一つの文書中で一回だけしか用いられていないと云う一意性が必要です。別の場所に同じ id 属性を与えないようにくれぐれも注意が必要です。

3. HTML 文書への組込み方

初期設定の明記

HTML 文書でスタイルシートを利用する場合は、 HEAD 要素内でその種類を明記します。ここでは CSS を宣言します；

<head>
  <title>CSS の例</title>
  <meta http-equiv="content-style-type" content="text/css">
</head>

文書中で標準的に利用するスタイルシートの種類を、HEAD 要素の中に、 META タグを利用して記述しています。

ここでは text/css を指定しましたが、これが CSS のことです。

STYLE 要素

文書中で標準的に利用するスタイル宣言を HEAD 要素内の STYLE 要素で記述できます。

<head>
  <title>CSS の例</title>
  <meta http-equiv="content-style-type" content="text/css">
  <style type="text/css">
  <!--
  p { line-height: 1.5 }
  -->
  </style>
</head>

p { line-height: 1.5 } がスタイルです。文書中の全ての P 要素の一行の高さが、文字の 1.5 倍になるように指定してあります。

インラインスタイル

或る一つの要素にだけスタイルを適用する場合は、当該要素の style 属性で指定します；

「日本列島改造論」を著した
<span style=" color: red; text-decoration: underline">田中角栄</span>
とはどんな人だったのだろう？

ここで田中角栄 は SPAN 要素の内容ですが、この SPAN 要素には style 属性が与えられています。「文字色が赤、下線表示」が指定されています。

このように style 属性を与える方法のスタイルシートを、インラインスタイルと呼びます。

複数の文書で共通して利用するようなスタイルシートは、文書から独立したファイルにしておけます。このとき、拡張子は *.css です（例； atomic.css, cool.css ）。

或る文書が、 atomic.css と cool.css を利用したい場合、 HEAD 要素で LINK 要素を利用して明記します。

<head>
  <title>CSS の例</title>
  <meta http-equiv="content-style-type" content="text/css">
  <link rel="StyleSheet" href="../visual/atomic.css" type="text/css">
  <link rel="StyleSheet" href="../visual/cool.css" type="text/css">
</head>

ブラウザは、まず visual フォルダにある atomic.css が読み込まれ、これに cool.css が上書きされ、出来あがったスタイルシートを適用します。

これは固定スタイルシートと呼ばれる例です。外部スタイルシートには、代替スタイルシートと云うものもありますが、ここでは割愛します。詳しくはCSSの紹介を御覧ください。

4. 競合の解決

複数の文書で共有する一般的なスタイルを記述した外部スタイルシートと、文書内の要素毎に適用できる準一般的なスタイルを記述した STYLE 要素と、極特殊なスタイルを記述したインライン・スタイルの三つに、相矛盾した記述があるときは、特殊なものほど優先されます；

優先；　外部スタイルシート < STYLE要素 < インライン・スタイル

同じSTYLE要素内でも、下の行に記述されたものほど優先度が上がります。読みこみ順が後ろに行くほど優先度が上がると云えます。

但し、 !important と云うキーワードで、任意のスタイル宣言の優先度を最高に指定出来ます。

ユーザスタイルシート

スタイルシートは、ブラウザ、ユーザ、ページ記述者の三者が持寄る可能性があります。ページ記述者のものが最も優先されます；

優先度；　ブラウザ < ユーザ < ページ記述者

まずブラウザが用意したスタイル・シートがあり、それをユーザが上書きし、更に各ページ毎に記述されているスタイルが上書きすると云う順番だと考えて良いでしょう。

但し、 !important と云うキーワードで、任意のスタイル宣言の優先度を最高に指定出来ます。

こうして最終的に出来あがったスタイル・シートが適用されます。

次に、 HTML に関する具体的な諸注意と、利用する値の種類について紹介します。

<<PREV | TOP | NEXT>>