外部スタイルシートについて
HTML文書とは別にスタイルシート用のファイルを作り、そこへスタイルの設定をまとめて記述します。
この方法で設定されたスタイルは、複数の文書で共有することができます。
外部スタイルシートのメリット
外部スタイルシートの最大のメリットは、デザインを一括管理できるというところです。
例えば、サイト全体の背景色を変更しようとした場合、
- HTML文書内でスタイルが設定されている場合
- → 文書ごとに設定内容を書き換える必要があります。（ページ数が多い場合は作業が大変です）
- 外部スタイルシートでスタイルが設定されている場合
- → 1ヵ所を書き換えるだけで、全ページの背景色を変更できます。
スタイルの設定を外部ファイル化することで、メンテナンス性が格段に向上することになります。
外部スタイルシートファイルの作成
外部スタイルシートファイルは、メモ帳などのテキストエディタで簡単に作成することができます。
- 外部スタイルシートファイルの拡張子は .css です。ファイル名は半角英数字で任意の名前を指定します。
- 外部スタイルシートファイルにスタイルの設定を記述する時は、style要素（
<style type="text/css">～</style>）やコメント（<!--～-->）は使用しません。スタイルの設定内容のみを記述します。
/* 外部スタイルシートの記述例 */
body { margin: 0; padding: 0; }
h1 { color: #ff0000; }
p { line-height: 140%; }
#header { background-color: #c0c0c0; }
.copy { color: #808080; }
HTML文書への読み込み方法
head要素内にlink要素を配置して、対象となる外部スタイルシートファイルを指定します。
<link rel="stylesheet" type="text/css" href="example.css">
| 属性 | 値 |
|---|---|
rel="" |
stylesheet を指定 |
type="" |
text/css を指定 |
href="" |
読み込むスタイルシートファイルのURIを指定 |
media="" |
メディアタイプ を指定 （初期値は screen） |
- 具体的な指定方法については、外部スタイルシートを読み込むをご覧ください。
この指定を行なうことで、外部スタイルシートで設定されたスタイルがHTML文書内に適用されることになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
</body>
</html>
media属性を使用すると、そのスタイルをどのメディアに対して適用させるかを指定することができます。
この属性の値（メディアタイプ）は、カンマ（ , ）で区切って複数指定することが可能です。
例えば、次のように指定した場合は、style1.cssはコンピュータ（screen）とテレビ（tv）で、style2.cssはプリンタ（print）で使用されることになります。
<link rel="stylesheet" type="text/css" href="style1.css" media="screen, tv">
<link rel="stylesheet" type="text/css" href="style2.css" media="print">
複数の外部スタイルシート
全てのスタイルを1つのファイルに記述していくと、サイトの規模やデザインによっては、その記述が非常に長いものになっていまいます。
そのような場合には、用途別（レイアウト別）にスタイルシートファイルを用意して、スタイルの記述を分散しておくと管理が楽になります。
以下は、3つの外部スタイルシートを2つのHTML文書で使用したイメージです。
- 1. 共通スタイル （
body.css） - 全てのページで共通するスタイルを設定 （例えばページの背景色やマージン、ヘッダやフッタのデザインなど）
→ list.html と details.html で使用 - 2. リスト用スタイル （
list.css） - リスト表示に関連するスタイルを設定
→ list.html で使用 - 3. 詳細用スタイル （
details.css） - 詳細ページで使用するスタイルを設定
→ details.html で使用
複数の外部スタイルシートファイルを読み込む場合、HTML文書内の記述は次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="list.css">
</head>
<body>
</body>
</html>
画像の相対URIについて
画像の場所を相対URIで指定する場合は、外部スタイルシートファイルの位置を基準として指定することになります。
例えば次のような構成で、
http://www.tagindex.com/image/example.gif
http://www.tagindex.com/demo/index.html
index.html の背景画像を body.css で設定する場合は、画像の相対URIは次のようになります。
- index.html の位置が基準となるわけではないので注意してください。
スタイルシートの切り替え
link要素に次のような設定を行うと、適用させるスタイルシートを切り替えられるようになります。
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="basic.css" title="優先スタイル">
<link rel="alternate stylesheet" type="text/css" href="alt.css" title="代替スタイル">
詳しくは、固定・優先・代替のスタイルシートをご覧ください。