スタイルシートを使ってみよう
「スタイルシート」とはフォント、テキスト、テーブルなどをそのスタイルの指定を パターン化し、まとまった形でドキュメントに適応させることができる機能です。
「スタイルシート」は「 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=<!-- h3 { color : #0066ff } p { color : #666666; font-size : 10pt }"text/css"></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等の学習に役立つ書籍を紹介します。
