これは CSS Getting Started チュートリアルの第2章です。ここでは、CSSと文書の関係について説明します。エクササイズの中であなたは、第1章で作ったサンプル文書にCSSを適用する方法について学びます。
解説: CSSをなぜ用いるか
CSSを使うことで、文書にスタイルを定義することができます。スタイルはデザイン、レイアウト、またはデバイスや画面サイズの変化による表示の変更などを含みます。CSSは埋め込みスタイルシートとして文書の<head>内に直接記入することもできますし、外部スタイルシートとしてスタイルを定義した別のファイルを文書に適用することもできます。外部スタイルシートを文書に紐付けるためには、文書の<head>内にそのスタイルシートへのリンクを追加するだけです。
外部スタイルシートの利点は数多くあります。スタイルをHTML構造と分離しておくことで以下のことが実現できます:
- 重複を避けるのに役立つ
- メンテナンスが簡単になる
- 一つの部分を変更するだけで複数のページを変更できる
CSSを使うと、あなたはすべてのページに用いられるスタイル情報を共通のファイルに保存しておくことができます。例えば、 h2見出しの色を定義した共通のスタイルシートに複数の文書が紐付いている時、あなたは一つのCSS属性を変更するだけでそれらすべてのh2見出しにスタイルを適用することができます。
ユーザーがwebページを画面に表示するとき、ブラウザはページの内容と共にスタイル情報を読み込みます。
ユーザーがwebページを印刷するとき、あなたはプリントされたページがより見やすくなるような別のスタイル情報をユーザに提供することができます。
HTMLとCSSはどのように併用されるのでしょうか？一般に、HTMLは文書のスタイルではなく、内容を記述するために用いられます。CSSは文書の内容ではなく、スタイルを記述するために用いられます。しかしながらこのチュートリアルの後半で、あなたはこの取り決めのいくつかの例外に触れます。
HTMLのようなマークアップ言語もスタイルを指定する方法を提供しています。
例えば、HTMLではテキストを太字にするために<b> タグを用いることができますし、<body>タグの中でページの背景色を指定することができます。
しかしCSSを用いる時、文書のスタイル情報を一つの場所にまとめるために、普通マークアップ言語のこれらの特性を使うことは控えます。
実例: スタイルシートを作成する
- １章で作成した doc1.html 文書と同じディレクトリに別のテキストファイルを作成してください。
- これ をstyle1.css と名付けて保存します。このファイルがスタイルシートとなります。
- CSSファイルの中に以下の一行をコピー&ペーストして、ファイルを上書き保存してください:
-
strong {color: red;}
文書をスタイルシートと結びつける
- 文書をスタイルシートと結びつけるために、HTMLファイルを編集しましょう。以下にハイライトされた行を追加してください。
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - ファイルを保存し、ブラウザのディスプレイを更新してください。このスタイルシートは以下のように最初の文字を赤色に変更します:
Cascading Style Sheets
次は？
次のセクション :
How CSS works.あなたはここで外部スタイルシートにサンプル文書を紐付けられました。 次は、ブラウザが文書を表示するとき、どのようにしてブラウザがこれらを組み合わせているかについてさらに学習します。