「スタイルシート」とはフォント、テキスト、テーブルなどをそのスタイルの指定を パターン化し、まとまった形でドキュメントに適応させることができる機能です。

「スタイルシート」は「 Internet Explorer 」だけにサポートされていたものですが、「 Netscape Navigator4.0 」 よりサポートされました。

HTML	「文書の構造を定義」タイトル、見出し、段落、区切り線、表組、アドレスなど、文書内の役割（意味）づけをします。
スタイルシート	「配置や装飾などの文書の体裁を設定」文字サイズ、ウェイト、表示フォント等の文字の装飾、ポジション指定など「見た目」をコントロールします。

（１）スタイルシートの記述の基本

スタイルシートは「スタイルを『定義』しておいて、必要な個所に『適用』する」が基本です。

スタイルの「定義」の基本となるのが、次のスタイルの宣言と呼ばれるものです。

PROPERTY ： VALUE （定義するもの：その値）

複数指定する場合は、それぞれを「；」で区切り続けて記述することができます。

スタイルシートの定義方法には、大きく分けて３つあります。

• ヘッダー内での指定
• 外部ファイルでの指定
• タグに直接指定

（２）スタイルシートの定義方法（ヘッダー内での指定）

まず、ヘッダー（<head>～</head>）内で要素（タグ）ごとにスタイルを定義する方法は次のように記述します。

要素（タグ）名 { PROPERTY : VALUE }

これは、例えば次のように利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スタイルシートの練習</title>
<style type="text/css">
<!--
  h3 { color : #0066ff }
  p  { color : #666666; font-size : 10pt }

</style>
</head>

<body>

<h3>●スタイルシートでできること</h3>

<p>スタイルシートはスタイルを「定義」します。</p>
<p>定義されたものは文書全体に適用されます。</p>

</body>
</html>

「<!--　//-->」は無くても構いませんが、スタイルシート未対応ブラウザ を使った場合、スタイルシートの設置が設定がそのまま表示されてしまいます。

上記のソースをブラウザで表示すると、次のようになります。

ヘッダー内での定義によって、スタイルがページ全体に適用されていることが分かると思います。

（３）スタイルシートの定義方法（外部ファイルでの指定）

これは、スタイルを定義した外部ファイルをヘッダーで読み込み指定して、ページ全体に適用させるというものです。

これは、例えば次のように利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スタイルシートの練習</title>
<link rel="stylesheet" type=text/css href="sample.css">
</head>

<body>

<h3>●スタイルシートで出来ること</h3>

<p>スタイルシートはスタイルを「定義」します。</p>
<div class="t1">例えば、文字の装飾。</div>
<span id="c1">ページ全体に適用できます。</span>

</body>
</html>

スタイルを適用するためにスタイルシートをファイルとして保存し、href属性でスタイルシートファイル（.css）のURLを指定します。

スタイルシートファイル（.css）の中身は次のように記述します。

sample.css

   h3 { color : #0066ff }
    p { color : #666666; font-size : 10pt }
  .t1 { color : #ff0066; line-height : 25pt }
  #c1 { color : #33cc33; font-style : italic }

「．」や「＃」などで指定した場合は、それぞれ「ＣＬＡＳＳ」や「ＩＤ」を利用してスタイルシートを呼び出します。

ブラウザでは次のように表示されます。

このようにＨＴＭＬ文書に記述して読みこめば、 多くのページの体裁が統一されたページを作成することができます。

スタイルシートの定義方法（タグに直接指定）

汎用性は高くはありませんが、一部分にのみスタイルシートを適用したい場合に役に立つのが、この方法です。

これは、例えば次のように利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>スタイルシートの練習</title>
<meta http-equiv="content-style-type" content="text/css">
</head>

<body>

<h3 style="color : #0066ff">●スタイルシートで出来ること</h3>

<p style="color : #666666; font-size : 10pt">スタイルシートはスタイルを「定義」します。</p>

<div style="color : #ff0066; line-height : 25pt">例えば、文字の装飾。</div>

<span style="color : #33cc33; font-style : italic">ページ全体に適用できます。</span>

</body>
</html>

ブラウザでの表示は、上の例と全く同じになります。

注意としては、直接指定の場合はスタイルシートのタイプ（種類）の指定ができないため、<meta>タグを利用してヘッダーに以下を追加しなければならないことです。

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

ちなみに「div」要素は改行をともなうブロックとしてのまとまり、「span」要素は改行をともなわない行内レベルのまとまりを表すタグです。

この２つのタグは、それ自体には特定の意味を持たないため、スタイルシートの指定でよく使われます。

なお指定を合わせて利用する場合は、この直接指定が最も優先されます。

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る