2008 Information Literacy Seminar.

6月17日｜CSSの基礎

前回作成した Web ページを CSS でデザインする方法を学びます。 HTML（構造）と CSS（スタイル）の役割分担を念頭に置きながら作業してください。

1｜構造とデザイン

スタイルシートとは

前回学んだように、Web ページとは HTML によってマークアップされた文書のことである。 HTML はあくまでも文書の論理構造を示すものであり、各要素をどのように画面に表示するべきかについての情報は持たない。各要素をどのように装飾するかについて制御し、マークアップ文書を補足するのがスタイルシートである。

Cascading Style Sheets

現在、HTML 文書にスタイルシートを適用させる場合には、CSS（Cascading Style Sheets）という仕様が用いられる。以下に「ハリー・ポッター」を紹介する Web ページのスタイルシート適用前の状態とスタイルシートを適用した後の結果を示す。それぞれの Web ページのソースを確認してみよう。

元の HTML 文書にはほとんど手を加えていないことがわかる（ヘッダにスタイルシートを読み込むためのタグを追加し、本文に素材提供元へのリンクを載せただけである）。スタイルシートには文書の構造とデザインを分離するという基本的な理念があり、デザインの変更はもとの文書には影響を与えずに行われる。

整形式文書と妥当な文書

Web ブラウザは、HTML のルールにしたがって文書の論理構造を把握し、スタイルシートの指示にしたがってレンダリングを施す。そのため、スタイルシートを利用するには、前提として文書が適切に構造化されていなくてはならない。スタイルシートを作成する前に、その Web ページが HTML の文法規則に適合しているかをチェックするべきである。チェックには、以下に挙げる妥当性検証サービスや文法チェッカを利用するとよい。

The W3C Markup Validation Service（妥当性検証サービス【英語】）
Another HTML-lint gateway（文法チェッカ【日本語】）

なお、文法上の形式が整えられている文書のことを整形式文書（well-formed document）と呼び、整形式文書の条件を満たした上で DTD を明示して構文の検証を行う文書のことを妥当な文書（valid document）と呼ぶ。

課題の文法チェック

上で紹介した文法チェッカを利用し、先週の課題として作成してきた Web ページが HTML の文法規則に適合しているかどうか確認してみよう。

【チェック方式】に［ File ］を指定し、［選択... ］ボタンをクリックして課題の HTML ファイルを選択する。
【チェックオプション】では以下の 2 つにチェックを入れる。
- 宗教的なチェックをすべて無効にします。
- WAI Content Accessibility Guidelines に示されている軽度のチェックを無効にします。
［チェック］ボタンをクリックして結果を確認する。エラーが表示された場合は、解説を参考に該当箇所を修正して再チェックすること。

2｜スタイルシートの書き方

スタイルシートの例

先週作成した harry_potter.html をエディタで開く。

head 要素内に以下のように style タグを記述する。

•••
<head>
    <title>ハリー・ポッターの世界</title>
    <style type="text/css">
    </style>
</head>
•••

たった今追加した style 要素内に、以下のようにスタイルの指定を記述する。コロン（：）やセミコロン（；）を書き忘れたり、書き間違えたりしないように十分注意すること。また、見やすいように半角スペースやタブを用いてもよいが、全角文字は使わないこと。
```
•••
<head>
    <title>ハリー・ポッターの世界</title>
    <style type="text/css"> 
        h2 {
            color: white;
            background-color: navy;
        }
    </style>
</head>
•••
```
ファイルを上書き保存し、Web ブラウザで開いてみる。 h2 要素（見出し部分）の文字が白で、背景が濃紺で表示されることを確認しよう。

スタイルシートの記述ルール

ここで、スタイルシートの記述ルールを説明しておこう。スタイルシートは、以下のような規則の集まりである。

セレクタ {
    プロパティ: 値;
    プロパティ: 値;
    •••
}

セレクタ

スタイルが適用される対象をパターンマッチングを用いて指定する。対象を指定するために用いられるパターンのことをセレクタと呼び、代表的なものとして以下のようなものがある。先ほどの例で使用したのはタイプセレクタであり、文書内のすべての h2 要素を対象に前景色と背景色のスタイルを指定したことになる。

代表的なセレクタ
パターン	名称	意味
*	全称セレクタ	すべての要素にマッチする。
`E`	タイプセレクタ	すべての `E` 要素にマッチする。
`E` `F`	子孫セレクタ	`E` 要素の子孫であるすべての `F` 要素にマッチする。
`E`.`foo`	クラスセレクタ	class 属性が `foo` であるすべての `E` 要素にマッチする。
`E`#`bar`	一意セレクタ	id 属性が `bar` である `E` 要素にマッチする。

プロパティと値

セレクタに対するスタイルは、セミコロンで区切られたゼロ個以上のプロパティと値のセットとして記述する。プロパティとは、文字のサイズや色といった設定しようとする項目のことである。プロパティに続けて、そのプロパティに設定する値（実際にどのようなスタイルにするのか）をコロンで区切って記述する。

たとえば、以下のようなプロパティがある。演習ですべて取り上げるのは不可能なので、必要に応じて市販の解説書や参考サイトを参照して各自で調べること。

代表的なプロパティ
用途	プロパティ	値の指定方法
前景色（文字の色）	`color`	色名・RGB成分（後述）
背景色	`background-color`	色名・RGB成分（後述）
背景画像	`background-image`	画像のURL（後述）
フォントの種類	`font-family`	フォント名・総称フォントファミリ（`serif` など）
フォントの大きさ	`font-size`	pt や % などの単位つきの数値・キーワード（`large` など）
フォントの太さ	`font-weight`	100 〜 900 の 100 刻みの数値・キーワード（`bold` など）
フォントの形状	`font-style`	キーワード（`italic` など）
文字の装飾	`text-decoration`	キーワード（`underline` など）

参考サイト

3｜スタイルシートによる装飾

色の指定方法

スタイルシートの基礎が理解できたら、さっそく他の部分の色も変えてみよう。色を変えたい要素の前景色と背景色のスタイル指定を style 要素内に追加すればよい。先ほどと同じように、セレクタで要素を指定し、color プロパティと background-color プロパティで色を指定する。色を指定するには、以下の 2 通りの方法がある。

色名で指定する

色名で指定する場合、aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow の 17 色を利用することができる。

RGB 成分で指定する

RGB 成分で指定する場合、以下のいずれかの方法を利用できる。

# 記号の後に各成分の値を 16 進数で 2 桁ずつ（00 〜 ff）指定する。
rgb() のカッコ内に各成分の値（0 〜 255）をカンマで区切って指定する。
rgb() のカッコ内に各成分の割合（0% 〜 100%）をカンマで区切って指定する。

以下に示す 4 つの指定方法は、すべて同じオレンジ色となる。

color: orange;
color: #ffa500;
color: rgb(255, 165, 0);
color: rgb(100%, 65%, 0%);

指定したい色の RGB 成分の値を知りたい場合は、ペイントや Photoshop などの色設定画面を利用するとよい。

背景画像の指定方法

harry_potter.html と同じ場所に image フォルダを作成し、背景に表示する画像をダウンロードしてそこに保存しておく。
harry_potter.html をエディタで開き、style 要素内に以下の内容を追加する。 body 要素の background-image（背景画像）プロパティに画像ファイルを相対パスで指定している。画像ファイルを指定するには、"url()" のカッコ内にファイルの URI を記述すればよい。
```
<style type="text/css"> 
    •••
    body {
        background-image: url("./image/castle.jpg");
    }
</style>
```
タイル状に敷き詰められた背景画像を、1 枚だけ表示されるように変更する。 body 要素の background-repeat（背景画像の繰り返し）プロパティを以下のように指定して、結果を確認してみよう。
```
<style type="text/css"> 
    •••
    body {
        background-image: url("./image/castle.jpg");
        background-repeat: no-repeat;
    }
</style>
```
背景画像がページ右下に表示されるように配置を調整する。 background-position（背景画像の配置）プロパティを使って、水平方向および垂直方向の位置をスペースで区切って指定する。ここでは body 要素の右側（right）の下端（bottom）に表示されるように記述しよう。
```
<style type="text/css"> 
    •••
    body {
        background-image: url("./image/castle.jpg");
        background-repeat: no-repeat;
        background-position: right bottom;
    }
</style>
```
最後に、画面をスクロールしても常に背景画像が表示されるように、背景画像を画面に対して固定しておく。 background-attachment プロパティに fixed を指定して、背景画像がどのように表示されるかを確認してみよう。
```
<style type="text/css"> 
    •••
    body {
        background-image: url("./image/castle.jpg");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-attachment: fixed;
    }
</style>
```
通常、文字とともに背景画像もスクロールするため、文字とその背景画像の相対的な位置は変わらない。一方、背景画像の位置を固定した場合は、あたかも要素の背景が透明になり、画面の最背面に固定配置された画像が透けて見えているかのようになる。

4｜スタイルシートの便利な機能

外部スタイルシート

スタイルシートは style タグを使ってヘッダに記述するほかに、HTML とは別のファイルに記述して必要に応じて読み込むこともできる。 Web サイトで共通に使用するスタイルを記述した外部ファイルをひとつ用意し、個々の Web ページから読み込むようにすれば、Web サイト全体で一貫したスタイルを設定することができる。また、デザインの修正が必要になった場合も、外部ファイルだけを修正すればよいという利点が得られる。

外部ファイルへの分離

エディタで harry_potter.html を開き、さらに新規ファイルを開く。
harry_potter.html の style 要素の中身をコピー（style タグは不要）し、新規ファイルにペーストする。
新規ファイルにスタイルの指定が移せたら、harry_potter.css という名前で保存する。 保存する場所は harry_potter.html と同じ場所にすること。
harry_potter.html の style 要素を削除し、代わりに以下の内容を入力する。ここで一度ファイルを上書き保存し、Web ブラウザで確認してみよう。表示結果が変わらなければ、スタイルシートを外部ファイルに分離するのに成功したことになる。
```
•••
<head>
    <title>ハリー・ポッターの世界</title>
    <link rel="stylesheet" type="text/css" href="./harry_potter.css"/>
</head>
•••
```
外部スタイルシートを他の HTML ファイルから利用してみよう。まず、先週の課題で作成した自分の Web ページを harry_potter.html と同じ場所にコピーする。上記の link 要素をヘッダに追加して上書き保存したら、Web ブラウザで表示して同じスタイルが適用されることを確認しよう。
さらに、外部スタイルシートを編集して、スタイルの変更が harry_potter.html と課題の Web ページに反映されることも確認してみよう。

カスケード処理と継承

カスケード処理

ある要素のあるプロパティに対する記述が複数あるとき、スタイルの競合が発生する場合がある。その競合を解決するための規則をカスケード処理と呼ぶ。カスケード処理におけるスタイルの優先順位は以下のように決定される。

重要度および出処によって優先順位を計算する。
詳細度によって優先順位を計算する。
記述順によって優先順位を計算する。

一般的には、より詳細な指定を行なっているセレクタのほうが優先され、詳細度によって優先順位が決定できない場合には、より後の位置で指定されたスタイルが優先されると考えればよい。

カスケード処理の確認

harry_potter.css にもうひとつ h2 要素のスタイルを追加してみる。本日の演習の最初に追加したスタイルとは異なる前景色と背景色を指定して、Web ブラウザで結果がどう変わるか確認しよう。スタイルの指定が 2 箇所以上にあらわれた場合、より後のほうに書いてある指定が優先される。
```
h2 {
    color: white;
    background-color: navy;
}

h2 {
    color: orange;
    background-color: teal;
}
•••
```
さらに、以下のように追記するとどうなるだろうか。最初に追加したスタイルと前の手順で追加したスタイルの真ん中に、body 要素の子要素である h2 要素の前景色と背景色の指定を追加する。セレクタの部分が子孫セレクタとなっていることに注意すること。書かれている順番が前であっても、より詳細な指定を行なっているセレクタのほうが優先される。
```
h2 {
    color: white;
    background-color: navy;
}

body h2 {
    color: silver;
    background-color: black;
}

h2 {
    color: orange;
    background-color: teal;
}
•••
```
本日の演習で最初に追加したスタイルに、最重要であることを示す !important をつけてみよう。このキーワードを指定されたスタイルは、記述順や詳細度にかかわらず優先されるようになる。
```
h2 {
    color: white !important;
    background-color: navy !important;
}

body h2 {
    color: silver;
    background-color: black;
}

h2 {
    color: orange;
    background-color: teal;
}
•••
```

継承

ある要素にスタイルを指定すると、その内容は一部の例外を除いてそのまま子要素にも受け継がれる。このような仕組みのことを継承と呼ぶ。たとえば、body 要素の color プロパティを設定すると、その子要素である hn 要素や p 要素の color プロパティにも同じ値が暗黙的に設定される。継承された値は、子要素で明示的に上書きしない限り有効となる。

5｜本日のまとめ

演習のまとめ

スタイルシートの目的を理解する。
スタイルシートを作成する方法を理解する。
スタイルシートを利用することの利点を理解する。

本日のミニレポート

かつては Web ページをデザインするために装飾用のタグ（font など）や属性（bgcolor など）が利用されていました。しかし、現在ではこれらに代わってスタイルシートを利用することが推奨されています。それはなぜでしょうか？　Web ページを制作する側と利用する側、両方の視点から答えてください。

本日の課題

先週の課題で作成した Web ページに独自のスタイルを設定してください。
〆切は次回（6/24）の授業開始時までとします。
データの提出は求めませんが、演習中に完成しているかをチェックします。
課題は前期末に個人で制作した Web に掲載してもらうため、完成したファイルは保管しておいてください。

▲TOPへ　 □ HOME