| 2008-10-26更新 2002-11-07作成 |
■スタイルシート（ＣＳＳ）
◇スタイルシートとは
スタイルシートを簡単に言ってしまうと、「Word」や「一太郎」における「書式」みたいなものです。
HTML自体は文書の構造を表すだけが本来の姿です。例えば見出しがあり、段落があり、一覧や表形式といった、文章の構造です。これらを表現するためのタグが用意されています。
そして文書の構造以外の、表現方法に関することはスタイルシートを使って指定します。例えば背景色や文字の色、あるいはページ内の配置（レイアウト）に関する指定などです。
スタイルシートには様々な機能があり、例えば細かなレイアウト設定もできます。ここのページでも <table> タグを使ってレイアウト設定をしていますが（レイアウトテーブルという技法です）、スタイルシートを利用しても同じことが出来ます。
ただ私自身がスタイルシートの機能の全てをきちんと理解しているわけではないので（ここのページでもスタイルシートを使ってますが、何しろスタイルシートを使うのも、HTMLを書くのもこの一連のページが初めてなんです）、まずは一番簡単かつ便利だと思う「書式」設定機能について説明します。
スタイルシート：CSS（Cascading Style Sheet）には
・HTMLの一部として.htmファイルの中に持つもの
・外部ファイルに.htmファイルとは別に持つもの
がありますが、ここでは基本的に外部ファイルに持つものだけを扱います。理由は外部ファイルとして持ち、それを各.htmファイルから参照することにより、複数のページで表示形式を統一することが簡単に出来るからです。また表示形式を変更するときも、CSSファイル一つだけを直せば一斉に変更されます。
外部ファイルのスタイルシートは拡張子をcssにして、ファイル名.cssという名前で作成しておきます。
※ 基本的に「技術メモ」以下では外部ファイルのスタイルシートのみを使用しています。
ただしこの「■スタイルシート（ＣＳＳ）」ページについては説明用の例示をするために、HTML中にもスタイル定義をしています。その実際の例は以下の説明内で参考として提示します。
◇スタイルシートの利用
外部のCSSファイルを利用する.htmファイルでは、 <head> タグの中で <link rel="stylesheet"> タグで使用するCSSファイルを指定します。
例えばこのページなら <head> タグは次のようになります。
<head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="../TechNote.css" type="text/css" /> <title> ＨＴＭＬ超入門編４ スタイルシート（ＣＳＳ）</title> </head>
href=パラメータで、通常のリンクと同じ形式でCSSファイルを指定します。
参考までにここの一連のページで使っているスタイルシートは
「ここで使ってるＣＳＳ」
になります。このリンクをクリックすると「ファイルを開くアプリケーションの選択」ダイアログが出てくるので、普段使っているエディタかメモ帳で開いてみてください。
ただそれほど良い参考にはならないと思います。もう何度も書いてますが初めて作ったものなので、「この指定はここじゃなくてこっちの方が」と、自分で思う部分もあります。ただ今さら全.htmファイルを直すのが面倒なのでそのままですが。
少なくともこれ以降の説明を見ていくのに参考になるかとは思います。
◇注釈（コメント）
やはり最初にコメントの書き方を記述しておきましょう。
HTMLのときとはコメントの書き方が若干違います。スタイルシートの場合は ⁄* で始まり *⁄ で終わるまでが注釈になります。
これはHTMLのときと同様、行を跨って複数行に渡る注釈を書くこともできます。
◇定義方法
定義方法の基本的な形は セレクタ { 宣言 } というように、 セレクタ を記述し、 { と } で囲んだ中にスタイルの宣言を記述する形となります。
・セレクタ
セレクタ部分はそのスタイル宣言の適用範囲によって次の三つのパターンがあります。
１ 要素タイプ
２ 要素タイプ.クラス名
３ .クラス名
この要素タイプというのは <body> 、 <p> 、 <table> などのタグと思ってください。
パターン１で要素タイプに p と指定すればHTMLの中で <p> タグを書く度、要素タイプに table と指定すれば <table> タグを書く度にそのスタイルが適用されます。
要素タイプによってスタイルを固定するのではなく、場合によっていくつかのスタイルを使い分けたい場合はパターン２のようにします。
p.pstyle1 や td.tdstyle1 といった具合です。
そのスタイルを適用させる場合は class= パラメータを使用し、今の例を使うと
<td class="tdstyle1"> となります。そうするとそのセルに対しては td.tdstyle1 で宣言したスタイルが適用される、という訳です。
この場合 tdstyle スタイルは td に対して宣言したものなので、 <tr class="tdstyle1"> というように行全体に対して適用することは出来ません。
さらに特定の要素タイプにとらわれず、.htmファイル中の任意の部分にスタイルを適用させたい場合はパターン３を使います。
また class= パラメータでクラス名を指定するときに、半角の空白で区切ることにより同時に複数のクラスを適用させることもできました（IE5.0での確認）。
class="クラス名1 クラス名2" といった具合です。これが出来れば文字の色や背景色に関するスタイルと、行間や位置揃え（右詰、左詰など）に関するスタイルを別に定義しておき、適宜適用させることによって自由度が大きくなりそうです。
・宣言
宣言は { と } で囲んだ中に パラメータ:値 という形で行います。一つのセレクタに対し複数のパラメータを指定する場合は各宣言を ; で区切ります。 パラメータ:値;パラメータ:値;パラメータ:値 という形です。実際には見やすさを考慮して
セレクタ
{
パラメータ:値;
パラメータ:値
}
のようにした方がいいと思います。
◇使用方法
使用方法は上の「・セレクタ」の説明中で、定義方法と合わせて説明しているのでそちらを参照してください。
◇どんなことが出来るか
まず実際にこのページの <head> タグで設定している内容の説明からいきましょう。最初に説明したようにここでは、スタイル設定の例示用にHTML内でもスタイル定義をしています。
またセレクタ部分は先に説明した中のパターン３、 .クラス名 という形にしてあります。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<style type="text/css">
.exbgclr1 { background-color: teal }
.exbgclr2 { background-color: navy; color: white }
.exgyokan1 { line-height: 2.5 }
.exbdrclr1 { border-color: fuchsia;
border-style: solid;
border-width: 1px; }
.exbdr1 { border-color: blue;
border-style: inset;
border-width: 2px;
margin: 1em 1em 1em 1em; }
.exbdr2 { border-color: green;
border-style: outset;
border-width: 2px;
padding: 1em 1em 1em 1em; }
.exfont1 { font-size: 0.8em; color: #00aaaa }
.exfont2 { font-size: 1.5em; font-weight: bold }
</style>
<link rel="stylesheet" href="../TechNote.css" type="text/css" />
<title> ＨＴＭＬ超入門編４ スタイルシート（ＣＳＳ）</title>
</head>
<link rel="stylesheet" ・・・>で指定しているのが、「技術メモ」以下で使用している標準スタイルシートの外部ファイルです。
その前の <style type="text/css"> 〜 </style> で定義しているのが例示用のスタイル定義です。この中で定義されていないものは、標準スタイルシートのものが使われます。
それでは定義しているクラス名毎に、その内容を説明していきます。
| クラス名 | 内容説明 |
|---|---|
| .exbgclr1 | 背景色（background-color）にtealを指定 |
| .exbgclr2 | 背景色（background-color）にnavyを指定。併せて文字の色（color）にwhiteを指定 |
| .exgyokan1 | 行の高さ（line-hight）に文字の高さの2.5倍を指定 |
| .exbdrclr1 | 枠（border-style）を実線（solid）で表示する。
枠線の色（border-color）はfuchsiaにし、線の太さ（border-width）は1pxを指定 |
| .exbdr1 | 枠（border-style）を実線（inset）で表示する。
枠線の色（border-color）はblueにし、線の太さ（border-width）は2pxを指定。 外枠との間に隙間を空ける（上下左右のmarginを1em） |
.exbdr2 | 枠（border-style）を実線（outset）で表示する。
枠線の色（border-color）はgreenにし、線の太さ（border-width）は2pxを指定。 内側に表示する文字との間に隙間を空ける（上下左右のpaddingを1em） |
| .exfont1 | 文字の大きさ（font-size）を小さめで標準の0.8倍（0.8em）にし、色（color）は#00aaaaを指定 |
| .exfont2 | 文字の大きさ（font-size）を大きめで標準の1.5倍（1.5em）にし、太さ（font-weight）はboldを指定 |
この中で枠について補足説明をしておきましょう。
範囲指定あれこれで少し触れましたが、区域（ <div> タグ 〜 </div> タグ）や段落（ <p> タグ 〜 </p> タグ）を設定した場合、それらの範囲は実は枠を持っているのです。これらのタグを入れると必ず改行コードが挿入されると書きましたが、これはある枠と別の枠の境目で改行される、と考えると分かりやすいと思います。
この枠線は標準では非表示になってますが、 border-style を none （非表示）以外に設定したクラスを定義しておき、 <div> タグや <p> タグでそのクラスを指定すると枠線が表示できます。その上で色（border-color）や太さ（border-width）を指定できるというわけです。
それと <span> タグです。これとクラスを組み合わせることによって、文の中のある部分だけ背景色を変える、ということも出来ます.
また通常のページだとこの部分のように行間が詰まっていることが多いと思います。
これだと（特に長めの文だと）あまり見やすくはないんですが、（スタイルシートを除いた）HTMLだけではこれは変えられません（と思う）。そうした場合にはスタイルシートを使う必要があります。私の場合はTechNote.cssの中で <p> タグに対して line-hight: 1.5 を指定しています。この段落以外の他の部分と見比べてみてください。
それから枠関連でもう一つ。ここでは見出しと本文の間では行頭の字下げ（インデント）をしています。本文内でも引用部分や、補足説明の部分は左右の字下げをしています。
これもスタイルシートの枠設定で行っています。
まずある枠があって、その枠とその外側の枠との間に隙間を空けたい場合、marginを指定します。
それからある枠があって、その枠とその内側の表示域との間に隙間を空けたい場合、paddingを指定します。ここの字下げではこのpadding指定を利用しています。
隙間の指定はどちらも同じでパラメータに {上 右 下 左} の順に空白で区切って、空けたい隙間の量を指定します。隙間の量はここでは em （文字数）で指定しており、空けたくない部分は0を指定してください。
| ソース | 実際の表示 | |
|---|---|---|
<br /> <div class="exbdrclr1 exgyokan1"> 部分的に<span class="exbgclr1">背景色を変えて</span>みる <br /> ここは<span class="exfont1">フォントの変更</span>をした <br /> <p class="exbdr1"> ここは外側の枠との間に隙間を空けている </p> <p class="exbdr2"> 枠の内側に表示する文字との間に隙間を空けている </p> ここは普通の表示 </div> 部分的に<span class="exbgclr2">背景色を変えて</span>みる <br /> ここも<span class="exfont2">フォントの変更</span>をした <br /> |
部分的に背景色を変えてみる
部分的に背景色を変えてみる
ここはフォントの変更をした ここは外側の枠との間に隙間を空けている 枠の内側に表示する文字との間に隙間を空けている ここは普通の表示ここもフォントの変更をした |
◇インラインスタイル設定
このページの一番最初に「スタイルシートとは何ぞや」について、「「Word」や「一太郎」における「書式」みたいなもの」と説明しました。その書式を設定する場所として、外部のCSSファイルにまとめて定義しておく方法について説明してきました。
それからこのページについてはスタイルシートの例示用に、HTML中の <head> タグで設定しています。その例は少し上で説明しましたね。
もう一つ、インラインスタイル設定というものがあり、個々の要素タグでも設定できます。ここでいう要素タグとは「範囲指定あれこれ」で説明したような <div> 、 <p> 、 <span> タグや <ul> 、 <ol> 、 <table> 、 <tr> 、 <td> タグといった、文章構造の範囲を指定するタグです。
例えばあるテーブルがあって、そのテーブル全体の文字の大きさと色を変えたいとします。文字の装飾は <font> タグを使いますが、これだとテーブルの個々の <td> 内毎に指定する必要があります。
しかしこのインライン（要素毎）スタイル設定を使えば <table> 全体や <tr> 全体という単位でスタイル設定ができます。
指定方法はスタイル設定をするタグに、 style= パラメータで指定します。書き方は
style="パラメータ: 値"
か、複数指定するのなら
style="パラメータ: 値; パラメータ: 値; パラメータ: 値"
です。
パラメータや値は今まで説明してきた外部ファイルや <head> タグで行うスタイルシートと同じですので、それらを参考にしてください。