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

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

まずは、スタイルシートを適用するためのソース文書、つまりHTML文書を作成しよう。 ここでは、ファイル名"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>スタイルシート方法1</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

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

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

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

この3種類の方法のうち、1番目と2番目のものを「内部スタイルシート」と呼び、 3番目の方法を「外部スタイルシート」と呼ぶ。

このうち推奨される方法は、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">スタイルシート方法1</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

CSSを使用するためには、どの方法の場合でもhead部に次のmeta要素を記述することが、現在では推奨されている。(※ ただし、meta要素が有効に機能するかどうかは別問題である。)

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

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

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

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

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

では、実際のソースコードを見てみよう。

<!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>スタイルシート方法1</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

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

link要素によるスタイル指定(外部スタイルシート)

もっとも推奨される方法が、この「外部スタイルシート」である。 つまり、スタイル指定の部分をHTMLファイルとは独立した別のファイルとして記述する方法である。 今はファイル名を"sample.css"とし、文字エンコーディングを"UTF-8"としてファイルを作成してみよう。

h1 {color: #ff0000}

次にこのスタイルシート(sample.css)を使用するために、HTMLファイルを修正する。

<!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>スタイルシート方法1</h1>
<p>見出しの文字の色を赤にします。</p>
</body>
</html>

ここでlink要素の書式は、次のようなる。

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

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

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.