2007 Information Literacy Seminar.
前回作成した Web ページを CSS でデザインする方法を学びます。 HTML（構造）と CSS（スタイル）の役割分担を念頭に置きながら作業してください。
前回学んだように、Web ページとは HTML によってマークアップされた文書のことである。 Web ブラウザは HTML によって示された文書の論理構造にしたがい、各要素の意味に応じたレンダリングを施してわれわれに表示する。 しかし、HTML はあくまでも文書の構造を示すものであり、各要素をどのように画面に表示するべきかについての情報は持たない。
そこで提唱されたのが、各要素をどのように提示するかを制御するスタイルシートという考えである。 スタイルシートはデザインに関する情報によってマークアップ文書を補足するものであり、デザインの変更はもとの文書には影響を与えずに行われる。 このように、スタイルシートには文書の構造とデザインを分離するという基本的な理念がある。
HTML 文書にスタイルシートを適用させる場合には、CSS（Cascading Style Sheets）という仕様が用いられる。 以下に「ハリー・ポッター」を紹介する Web ページに CSS を適用する前と適用した後の結果を示す。 ソースを見ればわかるが、元の HTML 文書にはほとんど手を加えていない（素材提供元へのリンクを追加しただけである）。
Web ブラウザは、HTML のルールにしたがって文書の論理構造を把握し、スタイルシートの指示にしたがって各要素をデザインし出力する。 そのため、スタイルシートを利用するには、前提として文書が適切に構造化されていなくてはならない。 文法上の形式が整えられている文書のことを整形式文書と呼ぶ。 また、整形式文書の条件を満たした上で、DTD を明示して構文の検証を行う文書のことを妥当（Valid）な文書と呼ぶ。
スタイルシートを作成する前に、その Web ページが HTML の文法規則に適合しているかをチェックするべきである。 チェックには、以下に挙げる妥当性検証サービスや文法チェッカを利用するとよい。
W3C の妥当性検証サービスを利用し、先週の課題として作成してきた Web ページが HTML の文法規則に適合しているかどうか確認せよ。 妥当性が認められれば、それを示すメッセージとともに、妥当性と作者の苦労の証として Web ページに貼ることができるバナー画像が表示される。 エラーが表示された場合は、該当箇所を修正して再チェックすること。
先週作成した harry_potter.html をエディタで開き、head 要素内に以下の内容を記述する。
<style type="text/css">
h2 {
color: white;
background-color: navy;
}
</style>ファイルを上書き保存し、Web ブラウザで開いてみる。 h2 要素（見出し部分）の文字が白で、背景が濃紺で表示されることを確認せよ。
スタイルシートは、以下のような規則の集まりである。
セレクタ {
プロパティ: 値;
プロパティ: 値;
•••
}スタイルが適用される対象をパターンマッチングを用いて指定する。 対象を指定するために用いられるパターンのことをセレクタと呼び、代表的なものとして以下のようなものがある。 先ほどの例で使用したのはタイプセレクタであり、文書内のすべての h2 要素を対象に前景色と背景色のスタイルを指定したことになる。
| パターン | 名称 | 意味 |
|---|---|---|
| * | 全称セレクタ | すべての要素にマッチする。 |
| E | タイプセレクタ | すべての E 要素にマッチする。 |
| E F | 子孫セレクタ | E 要素の子孫であるすべての F 要素にマッチする。 |
| E.foo | クラスセレクタ | class 属性が foo であるすべての E 要素にマッチする。 |
| E#bar | 一意セレクタ | id 属性が bar である E 要素にマッチする。 |
セレクタに対するスタイルは、セミコロンで区切られたゼロ個以上のプロパティと値のセットとして記述する。 プロパティとは、文字のサイズや色といった設定しようとする項目のことである。 プロパティに続けて、そのプロパティに設定する値（実際にどのようなスタイルにするのか）をコロンで区切って記述する。
要素の前景色（文字の色）を設定する。
h2 {
color: orange;
}要素の背景色を設定する。 キーワード transparent を指定すると背景色は「透明」となる。
h2 {
background-color: rgb(102, 51, 51);
}なお、前景色と背景色が同じになって文字が読めなくなるトラブルを避けるため、color と background-color は必ずペアで指定することが推奨されている。
色名で指定する場合、aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow の 17 色を利用することができる。
RGB 成分で指定する場合、以下のいずれかの方法を利用できる。
したがって、以下に示す 4 つの指定方法は、すべて同じ色（orange = #ffa500）となる。
color: orange;
color: #ffa500;
color: rgb(255, 165, 0);
color: rgb(100%, 65%, 0%);指定したい色の RGB 成分を知りたい場合は、ペイントや Photoshop などの色設定画面を利用するとよい。
harry_potter.html と同じ場所に image フォルダを作成し、背景に表示する画像をダウンロードしてそこに保存しておく。
背景に表示する画像を指定する。
ファイルを指定するには、"url()" のカッコ内にファイルの URI を記述する。
ちなみに URI とは、インターネット上に存在するリソースの場所を指し示す文字列のことである。
われわれが Web ページを閲覧するときに利用する URL（いわゆるアドレス）も URI に含まれる。
body {
background-image: url("./image/castle.jpg");
}ここで指定した画像は背景色の上に表示されるため、png 画像などの透明部分には背景色が表示される。 また、背景画像を使用する場合には、何らかの理由で画像が表示できなかったときのために同系統の背景色を設定しておくべきであるとされている。
背景画像をタイル状に敷き詰めるかどうか、敷き詰めるならばどのように敷き詰めるのかを設定する。
body {
background-repeat: no-repeat;
}このプロパティには以下の値を指定することができる。
| 値 | 意味 |
|---|---|
| repeat | 水平・垂直両方向に敷き詰める |
| repeat-x | 水平方向に敷き詰める |
| repeat-y | 垂直方向に敷き詰める |
| no-repeat | 画像を敷き詰めず 1 回だけ描画する |
背景画像の初期位置を設定する。 要素の左上を起点として、水平方向および垂直方向の位置をスペースで区切って指定する。 値としては left / center / right および top / center / bottom といったキーワードが利用できる。
body {
background-position: right bottom;
}より細かく制御したい場合は長さや割合で指定することもできる。 長さで指定する場合は以下に挙げる単位記号を、割合で指定する場合はパーセント記号をつける。
| 単位記号 | 意味 |
|---|---|
| em | その要素に設定されている font-size プロパティの値を 1 とする相対値。 |
| ex | その要素に設定されているフォントの文字 'x' の高さを 1 とする相対値。 |
| px | ピクセル。出力デバイスに依存する相対値。 |
| mm | ミリメートル。 |
| in | インチ。1 インチは 25.4 mm と等しい。 |
| pt | ポイント。1 ポイントは 1/72 インチと等しい。 |
背景画像を文字とともにスクロールさせるか、画面に対して固定するかを設定する。 通常、文字とともに背景画像もスクロールするため、文字とその背景画像の相対的な位置は変わらない。 一方、背景画像の位置を固定した場合は、あたかも要素の背景が透明になり、画面の最背面に固定配置された画像が透けて見えているかのようになる。
body {
background-attachment: fixed;
}このプロパティには以下の値を指定することができる。
| 値 | 意味 |
|---|---|
| scroll | 背景画像をスクロールさせる |
| fixed | 背景画像を画面に対して固定する |
フォントはカンマで区切って複数指定することができ、先に記述したものほど優先度が高くなる。 指定されたフォントがすべて利用できない場合は、Web ブラウザのデフォルトフォントが利用される。 なお、フォント名にスペースが含まれる場合はシングルクオートかダブルクオートで括らなくてはならない。
body {
font-family: "Times New Roman", Times, Century;
}個別のフォントを指定する代わりに、総称ファミリを指定することもできる。 総称ファミリとは、撥ねや止めの装飾の有無といったフォントの一般的な性質を反映したキーワードであり、以下の 5 つが利用できる。 どんなフォントが利用できるかは環境によって異なるので、個別のフォントを列挙した後にこれらのいずれかも指定しておくのが望ましい。
| 名称 | 意味 | 代表例 |
|---|---|---|
| serif | 線の端に撥ねなどの装飾があるフォント。 | Century, Times New Roman, ＭＳ Ｐ明朝 など |
| sans-serif | 線の端に撥ねなどの装飾がないフォント。 | Arial, Helvetica, ＭＳ Ｐゴシック など |
| cursive | 筆記体のような字形をしているフォント。 | Caflisch Script, Sanvito, Zapf-Chancery など |
| fantasy | 装飾が主体だが文字として使えるフォント。 | Alpha Geometrique, Critter, Cottonwood など |
| monospace | すべての文字が同じ固定幅であるフォント。 | Courier, Courier New, ＭＳ ゴシック など |
長さや親要素のフォントサイズに対する割合のほか、絶対サイズおよび相対サイズによって指定することができる。
body {
font-size: 10pt;
}
絶対サイズは、Web ブラウザの設定にもとづくサイズ指定である。 medium を標準のサイズとして、もっとも小さい xx-small からもっとも大きい xx-large へと少しずつ大きくなる。 HTML の見出し（hn）要素とは以下のような対応関係がある。
| 値 | xx-small | x-small | small | medium | large | x-large | xx-large |
|---|---|---|---|---|---|---|---|
| 対応する hn 要素 | h6 | h5 | h4 | h3 | h2 | h1 |
相対サイズは、親要素のフォントサイズに対する相対的なサイズ指定である。
| 値 | 意味 |
|---|---|
| smaller | 親要素の font-size に対して一段階小さくする。 |
| larger | 親要素の font-size に対して一段階大きくする。 |
100 〜 900 までの 100 刻みの数値で指定するか、normal または bold を指定する。 数値が高くなるほどフォントは太くなる。
address {
font-weight: bold;
}数値とキーワードの対応は以下のとおりである。
| 数値 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| キーワード | normal | bold |
また、親要素のフォントの太さに対する相対的な太さの指定もできる。
| 値 | 意味 |
|---|---|
| bolder | 親要素の font-weight に対して一段階太くする。 |
| lighter | 親要素の font-weight に対して一段階細くする。 |
フォントの形状を通常体、オブリーク体（斜体）、イタリック体に設定する。 それぞれをあらわすキーワードを用いて指定する。
| 値 | 意味 |
|---|---|
| normal | 通常体を使用する。 |
| oblique | オブリーク体（斜体）を使用する。 |
| italic | イタリック体を使用する。 |
address {
font-style: normal;
}テキストに装飾を設定する。 リンクの下線など、ブラウザのデフォルト設定を上書き解除する場合にも使える。
a {
text-decoration: none;
}設定したい装飾に対応するキーワードをスペースで区切って複数指定することができる。
| 値 | 意味 |
|---|---|
| none | 装飾なし |
| underline | 下線 |
| overline | 上線 |
| line-through | 取り消し線 |
| blink | 点滅 |
スタイルシートは style タグを使ってヘッダーに記述するほかに、HTML とは別のファイルに記述して必要に応じて読み込むこともできる。
Web サイトで共通に使用するスタイルを記述した外部ファイルをひとつ用意し、個々の Web ページから読み込むようにすれば、Web サイト全体で一貫したスタイルを設定することができる。 また、デザインの修正が必要になった場合も、外部ファイルだけを修正すればよいという利点が得られる。
ここでは、例としてサンプルのスタイルシートを外部ファイルに分離する。 まず、エディタで新規ファイルを開き、harry_potter.html の style タグで囲まれた部分をコピー & ペーストして harry_potter.css という名前で保存する。 保存する場所は harry_potter.html と同じ場所にすること。
次に、harry_potter.html の <style> ••• </style> を削除し、代わりに以下の内容を入力する。
<link rel="stylesheet" type="text/css" href="./harry_potter.css"/>ファイルを上書き保存し、Web ブラウザで確認してみる。 表示結果は変わらないはずである。 さらに、先週の課題で作成した自分の Web ページに上記の link 要素を追加し、 Web ブラウザで表示して同じスタイルが適用されていることを確認してみよ。 また、harry_potter.css を編集してスタイルの指定を変更し、harry_potter.html と自分の Web ページの表示がどう変わるかも確認してみよ。
ある要素のあるプロパティに対する記述が複数あるとき、スタイルの競合が発生する場合がある。 その競合を解決するための規則をカスケード処理と呼ぶ。 カスケード処理におけるスタイルの優先順位は以下のように決定される。
一般的には、より詳細な指定を行なっているセレクタのほうが優先され、詳細度によって優先順位が決定できない場合には、より後の位置で指定されたスタイルが優先されると考えればよい。
ある要素にスタイルを指定すると、その内容は一部の例外を除いてそのまま子要素にも受け継がれる。 このような仕組みのことを継承と呼ぶ。 たとえば、body 要素の color プロパティを設定すると、その子要素である hn 要素や p 要素の color プロパティにも同じ値が暗黙的に設定される。 継承された値は、子要素で明示的に上書きしない限り有効となる。
かつては Web ページをデザインするために装飾用のタグ（font など）や属性（bgcolor など）が利用されていました。 しかし、現在ではこれらに代わってスタイルシートを利用することが推奨されています。 それはなぜでしょうか？ Web ページを制作する側と利用する側、両方の視点から答えてください。