ホームページの基礎（2. CSS 編） - HITP 広島工業大学専門学校

2.2 スタイルシートを適用する

このページでは，CSS(スタイルシート)をXHTML(HTML)に適用する方法について説明します。

2.2.1 スタイルシート適用前のソース文書

まずは，スタイルシートを適用するためのソース文書，つまりXHTML文書を作成しましょう。例題として，ファイル名は"sample.html"とし，文字エンコーディングは"UTF-8"として作成することにします。

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>スタイルシート方法１</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

CSS総目次 | ページ先頭に戻る

2.2.2 スタイルシート適用の方法

スタイルシートを適用するための方法には３種類あります。

style属性によるスタイルシート適用
style要素によるスタイルシート適用
link要素によるスタイルシート適用

この３種類の方法のうち，１番目と２番目のものを「内部スタイルシート」と呼び，３番目の方法を「外部スタイルシート」と呼びます。

このうち推奨される方法は，３番目の外部スタイルシートです。しかし，その他の方法も稀に使用されることがある（ブログのカスタムスタイルを操作する場合など）ので，ここでは，一通りその使用方法について見ていくことにします。

CSS総目次 | ページ先頭に戻る

2.2.3 style属性によるスタイル指定

「style属性」は，多くの要素で指定できる汎用属性（コア属性）としてHTMLやXHTMLのDTDで定義されています。その指定方法は，スタイルを指定したい要素ごとに属性値としてCSSを記述していきます。

<要素名 style="CSSによるスタイル記述">

ここでは見出し（h1要素）の文字列を赤にすることを考えてみましょう。具体的なCSSの記述方法については，後から詳しく説明するので，今はソースコードを物まねでタイプして実際に表示を確認してみてください。

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>HTMLサンプル</title>
</head>
<body>
<h1 style="color: #ff0000">スタイルシート方法１</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

CSSを使用するためには，どの方法の場合でもhead部に次のmeta要素を記述することで，スタイルシート言語として「CSS」を使用することを明示することが推奨されています。

<meta http-equiv="Content-Style-Type" content="text/css" />

そしてスタイルを指定したい要素（ここでは h1要素）のstyle属性にスタイルを記述することになるわけです。この方法の最大の欠点は，複数の同じ要素に同一のスタイルを指定する場合でも，すべての要素にstyle属性を記述しなければならない点にあります。

CSS総目次 | ページ先頭に戻る

2.2.4 style要素によるスタイル指定

「style要素」は，HTMLやXHTMLのDTDで定義されている要素のひとつです。その指定方法は，head部に記述し，style要素の開始タグと終了タグの間にCSSを記述します。

<style type="text/css">
    CSSによるスタイル記述
</style>

では，先程の例と同様に h1要素を赤色にするソースコードを見てみましょう。

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>HTMLサンプル</title>
<style type="text/css">
    h1 {color: #ff0000}
</style>
</head>
<body>
<h1>スタイルシート方法１</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

この方法では，style属性による方法と違い，複数の同じ要素に同一のスタイルを指定することも容易です。ただし，指定されたHTMLファイル内にスタイルが限定されるので，他のHTMLファイルからの参照は不可能になります。(※ 他からの参照ができないので，"内部スタイルシート"とも言われます。)

CSS総目次 | ページ先頭に戻る

2.2.5 link要素によるスタイル指定（外部スタイルシート）

もっとも推奨される方法が，この「外部スタイルシート」です。つまり，スタイル指定の部分をHTMLファイルとは独立した別のファイルとして記述する方法です。例えばファイル名を"sample.css"とし，文字エンコーディングを"UTF-8"としてファイルを作成してみましょう（内容的にはこれまで通り h1要素を赤色にするものです）。

h1 {color: #ff0000}

次にこのスタイルシート（sample.css）を使用する（XHTMLとCSSを関連付ける）ために，XHTMLファイルを修正します。

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>スタイルシート方法１</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

ここでlink要素の書式は，次のようになります。

<link rel="stylesheet" type="text/css" href="CSSファイルへのURL" />

このように外部スタイルシートは，汎用性に富み，複数のHTMLからも参照することが可能です。そのため基本的にはXHTMLファイルを修正することなく，スタイルシートを修正するだけで，複数のXHTMLファイルのスタイルを変更することも可能になります。

CSS総目次 | ページ先頭に戻る