スタイルシートの道具箱～手作りのホームページをスタイルシートで！～

スタイルシートは、簡単に言うとホームページのデザインをする技術と言えるでしょう。
ホームページを作成する時は、タグと呼ばれる一種の言語を使ったHTML文書を書いてゆきます。
ところがHTMLはページの基本的な構造、論理構造を定義するにとどまり、
ホームページの見た目やデザインまで含んだ記述は念頭にありません。

そこで、HTMLを補完するのがスタイルシートです。

スタイルシートは、テキスト、背景、位置、テーブル等に対して
HTMLでは表現出来ない様な見た目の細かいデザインが可能になります。
例えば背景を真っ白では無く、左上にアクセントとして小さい写真を一つ貼りたい・・
という時もスタイルシートが無いと設定出来ません。

スタイルシートを使わないと、例えば色や写真を駆使しても単純で画一的なデザインに終始してしまうのです。
ホームページが人に見てもらう事を目的にしている以上、運営者にとっては
スタイルシートとHTMLは同時に知るべき基本的な知識なのです。

スタイルシートとはそれだけでは機能する訳で無く、HTMLに組み込む形で利用します。
具体的にはHTMLタグにスタイルシートを埋め込む/適用するという形になります。
つまりTHMLタグに様々なパラメーターを与えるのがスタイルシートと言えるかもしれません。
以下の例が、最も基本的なスタイルシートの利用方法です。

<div>HTMLを補完するのがスタイルシートです</div>

　　　　↓ スタイルシートをタグに埋め込む

<div style="color:red">HTMLを補完するのがスタイルシートです</div>

メリット

ホームページ作成において、スタイルシートを使うからこそ得られる恩恵があります。
色々あるとは思いますが、とりわけ初心者のホームページ管理者にとっては

ソースがすっきりして見やすくなる（＝管理しやすくなる）
ファイルサイズを抑える事が出来る
デザイン表現の幅が増える
全ページで簡単に統一感を出す事が出来る
細かいレイアウトも思うがまま

といった所でしょうか。

今まで素人感覚でホームページを作ってきた人でも、スタイルシートに一足踏み入れば
非常に洗練されたレイアウトや構造が可能になり、ちょっとしたプロの感覚を味わえます。
やってみれば以外と簡単、そして驚くほどの表現力アップ。

いいことづくしです。

■書式

▲ページTOPへ

スタイルシートの実際の中身「設定の書式」は以下のような形です。

例：　body { margin : 10px; color : gray}

「body」の部分が、スタイルを適用する対象で、セレクタと呼ばれます。
セレクタはHTMLのタグの種別と思ってよいでしょう。例えばh1, div, tableといったものが入ります。

「margin」や「color」の部分がプロパティと呼ばれ、何のスタイルかを指定する大事な部分です。
ここには例えばfont-size, background-color, borderといったスタイルの種別が指定されます。

最後に「10px」や「gray」の部分が、プロパティに対する設定値でValue（値）等と呼ばれます。
この値・文字列は、当然ですがプロパティによって中身が異なってきます。

以上より、表記は以下のようにも表せます。
セレクタ｛　プロパティ：値　｝

この書式には以下のようなルールもあります。

プロパティと値の間はコロン「：」を入れます
値の後にはセミコロン「；」を置き、そのプロパティに対する設定が終わった事を示します
セミコロン「；」の後に次のプロパティを入れれば、一つのセレクタに複数のプロパティを設定出来ます
その後に続く設定が無い場合、値の後のセミコロンは省略する事が出来ます。
上記例でもgrayの後にはセミコロンがありません
スペースや改行は動作に関係ありません。見易さに配慮して自由に挿入しましょう。

次の項目で具体的な設定方法を示しますが、上記の書式例は
HTMLタグに直接書き込む場合は以下のようなフォーマットになります。

■設定方法

▲ページTOPへ

さて実際の設定方法ですが、上記に示した書式を用い、以下のような３種類の手段が用意されています。

１．タグに直接設定する

<セレクタ style="プロパティ：値">

有効範囲：そのタグ内

つまりHTMLのタグに直接書き足す・・という形です。これが最も単純でベーシックです。
「ちょっとこの部分だけ変更したい・・」の様に部分的にスタイルシートを適用したい時に利用します。

例：

２．ファイルの先頭で定義する

以下のような文を、HTMLファイル先頭にあるヘッダ部分（<head>....</head>で囲まれた部分）に記述します。

<style type="text/css">
	セレクタ  { プロパティ：値 }
	セレクタ,セレクタ,... { プロパティ：値 }
</style>

■有効範囲：そのファイル内

セレクタを「，」（カンマ）で区切る事により、一つのスタイルを複数のセレクタへ同時に設定する事も出来ます。

この文がヘッダの中に書かれる事で、このHTMLファイル内全体で有効な定義となります。
つまり同じセレクタ（タグ）がファイル内に現れれば、全てに同じ設定が反映されます。
従って同じ設定の繰り返しを回避でき、スタイルシートの設定がスリムになります。

例：

<head>

<style type="text/css">
	body  { margin:10px; color:gray }
	div   { border:1px solid; background-color:white;}
	h1,h2 { color:#606060;}
</style>

</head>
<body>...

３．外部ファイルで設定する

以下の一行を、スタイルを適用したいファイルのヘッダ部分に書き込みます。

■有効範囲：指定した全てのファイル

この設定では、スタイルシートの設定を外部ファイルにして
適用したいファイルにだけ上記の一行を加えるという方法です。

ここで言う「ファイルの場所」とは、スタイルシート設定を書き込んだ外部ファイルの場所を指します。
つまりURLや相対アドレス等で、同じ階層にあればファイル名だけでよいという事です。

そのスタイル設定を書き込んだファイルは、拡張子がcssとなります。例：top.css　　style.css
ファイルの中身は、2.のファイル先頭に設定する場合と同様

セレクタ　{ プロパティ：値 }

といった行を必要なだけ書き込む形になります。

この方法のメリットは、複数のページで同じ設定が容易に出来る事です。
つまり同じスタイルシートの設定をサイト全体に簡単に適用出来ます。
サイト全体の統一感を維持するのに役立ちます。

同じページで複数の設定ファイルを指定する事も出来ます。
この場合は<link rel="stylesheet" ...>の一行を必要なファイル数の分だけ書き込めばOKです。

例（外部ファイルの中身）：

body { margin:10px; color:gray }

div { border:1px solid; background-color:white;}

h1 { font-size:20px;color:blue;font-weight:bold;}

優先度

上記で示した３つのスタイル設定方法を同じHTML文書に同時に行った場合などは
スタイル設定が競合してしまう可能性があります。
このような時には各設定方法の優先度が適用され、優先度の高いものが有効となります。

◆優先度の高さ

タグに直接設定する場合
ファイルのヘッダに設定した場合
外部ファイルで設定した場合

つまり優先度の低い外部ファイルの設定は、タグ内に設定されたstyle設定によって上書きされ無効になります。
これは競合したセレクタのみで発生し、競合しなかったセレクタは外部ファイルの設定もそのまま適用されます。

従って、サイト全体の統一設定は外部ファイルで設定し、
必要な場合だけ個々にタグでstyleを設定するか、ファイルのヘッダで設定する事で
細かいチューニングを行えるという事です。