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

まず上記の絵で青い線が「ボーダー」と呼ばれる枠線です。
ボーダーは初期設定では表示されないようになっていますが
この線が領域の内と外を分ける線と考えればいいでしょう。
ボーダーの詳しい設定に関してはこちらをご覧下さい。

ボーダーの中に「内容領域」というものがあり、ここが要素の中心部分となります。
ここに絵や文字などが入ります。

ボーダーと内容領域の間に空間を作っているのが「パディング」です。
文字列などはここが狭すぎるとデザインによって見にくくなる事があります。
要素内部に余裕をつくる為の空間と思えばよいでしょう。
パディングの詳しい設定に関してはこちらをご覧下さい。

そして最後に「マージン」とは、隣接する要素との間隔を指します。
マージンがゼロだと隣の要素とぴったりくっつき、逆に一定の距離を設定する事もできます。
要素間の距離もきちんとコントロールすると、しっかりとしたデザインが可能になります。
マージンの詳しい設定に関してはこちらをご覧下さい。

■ブロック要素とインライン要素

▲ページTOPへ

HTMLのタグは、ブロック要素とインライン要素と呼ばれる二種類の要素にわかれます。

二つの要素の違いは、その要素の前後に改行が入るか入らないかが異なります。
例えばpやdivといったHTMLタグを挿入すると前後で強制的に改行が発生します。
ところがaやfontといったタグは改行が伴わず、文中にそのまま挿入されます。

具体的には以下のように要素が分類されます。

■ブロック要素：要素の前後に改行が発生する

blockquote, dir, center,form, h1,h2...h6,hr,p,table,ol,ul...

■インライン要素：改行は発生しない（文中にそのまま挿入）

a,b,br,font,i,img,input,span,strong,u...

例：

ブロック要素、例えばdivなどは

この様に前後に強制的に

改行が入ってしまいます。

ブロック要素、例えばdivなどは<div>この様に前後に強制的に</div>改行が入ってしまいます。

ところが、例えばbの様なインライン要素は改行が入らずにそのままです。

ところが、例えばbの様なインライン要素は<b>改行が入らずに</b>そのままです。

スタイルを適用するにあたっては、この概念がデザイン上関わってくるので
基本事項として両要素の働きを理解しておきましょう。
なお、このブロック要素⇒インライン要素といった変更するプロパティにdisplayがあります。

■クラスとID

▲ページTOPへ

目的

HTMLファイルの中の特定のタグにだけスタイルを与えたい時に利用する手段がクラスとIDと呼ばれるものです。
つまりスタイルの適用対象を、タグ種別などに関係なく好きなものにだけ絞る事が出来るという事です。
例えば同じh1というタグでも、重要なテーマのh1にだけスタイルシートを与えて色を変える・・等です。

基本的にはタグに直接書き込んで適用すれば同じ事ですが、スタイルの内容が多い時は見づらい上に
同じスタイルを何度も適用する事でファイルサイズにも悪影響を及ぼします。
ソースの管理面から言っても、クラスやIDは利用すべきです。

書式

■定義する時（head内や外部ファイル）

クラス：セレクタ．クラス名 {プロパティ：値 }
ID：セレクタ＃ID名 {プロパティ：値 }
※「セレクタ」部分は省略可

■適用する時（body内）

<セレクタ class="クラス名">....</セレクタ>
<セレクタ id="クラス名">....</セレクタ>

上記のように適用するセレクタ種別を限定した上で、更にクラス（又はID）を任意のタグに設定しスタイルを適用します。
定義する時にセレクタを省略すると、セレクタ種別に関係無くクラス（ID）を指定したタグ全てにスタイルが適用されます。

識別子として、クラスには「．」（ピリオド）を、IDには「＃」（シャープ）を設定時につけます。
クラス名とID名は英数字で自由に名前を設定出来ます。
ただし先頭文字を数字にする事は禁止されています（実際にはブラウザでは動作するようですが）

くどくど説明してもわかりにくいでしょうから、以下のサンプルを参考にして下さい。

例：

<html>
<head>
<style type="text/css">
	h1.gray { color:gray }
	h2#size { font-size:18px }
	.blue 	{ color:blue }
</style>
</head>
<body>

<h1>ここは普通のH1です。</h1>

<h2 id="size">IDを適用したH2です。</h2>

<h1 class="gray">このH1にはクラスを適用しました。</h1>

文中で<span class="blue">ここの部分だけ</span>色を青に変えてみました。

<h1 class="blue">blueのクラスはどのタグにも適用出来ます。</h1>

....

クラスとIDの違い

厳密には幾つか異なる意味があるようですが、

・クラスは文書内で何回でも適用出来る
・IDは文書内で一回だけ適用出来る

という点が違いと覚えればよいでしょう。ところが実際ブラウザではIDでも数回適用できてしまうようです。
つまり利用上はあまり大きな違いを感じないのが実際のところです。

■条件を加える

▲ページTOPへ

ある条件が整った場合のみスタイルを適用する事も出来ます。

要素の親子関係で決める

スタイルを適用したい要素の親要素との関係によって適用するかどうか決めます。
ここで言う親要素とは、対象の要素の上位にあるタグ、囲まれているタグの事を指します。

子要素に適用	：親要素子要素 {プロパティ：値 }
直下の子要素のみに適用	：親要素＞　子要素 {プロパティ：値 }

単純に、子要素であればすべて対象とする場合は、親要素と子要素を並べてスタイルを設定します。
一方、親要素の直下にある要素のみ対象とする場合は、＞を間に入れてその関係を指定します。

例：

<html>
<head>
<style type="text/css">
	p a { font-weight:bold }
	p > b { color:red }
</style>
</head>
<body>

<p>
ここの部分の親要素はpです。

ここで<a>リンクを設定すると</a>、このタグはpの子要素なのでスタイルが適用されます。

また<b>bを設定しても</b>p直下の子要素なのでやはりスタイルが適用されます。

<span style="border-bottom:solid 2px">
しかしここはpとspanの下にあるので、pからみると子孫にあたります。

子孫の要素にも<a>スタイルは適用されます</a>が、

p直下では無いので<b>bのスタイルは適用されません</a> 

</span>
</p>

....

要素の前後関係で決める

タグの前後関係によって、スタイルの適用を決める事も出来ます。
前述の親子関係とは異なり、スタイルを適用したい要素の前の要素を適用の条件にします。

前要素　＋　後要素 {プロパティ：値 }

例：

<html>
<head>
<style type="text/css">
	p + b { color: red }
</style>
</head>
<body>

<p>
ここの部分の親要素はpです。

ここはpの内部なので、<b>bを設定しても</b>スタイルは適用されません。

</p>

ところがpが閉じたので、ここで<b>bを設定すれば</b>スタイルが適用されます。

....

属性によって決める

スタイルを適用したい要素が、指定した属性や値を使った場合にのみ適用させる事も出来ます。

要素 [属性] {プロパティ：値 }
要素 [属性="値"] {プロパティ：値 }

指定した属性をもつ要素、または指定した属性と値を両方持つ要素に適用されます。

例：

<html>
<head>
<style type="text/css">
	div [align]  { color: red }
	div [align="center"] { color: blue }
</style>
</head>
<body>

<div>
普通のdivタグです。alignの設定が無いので、スタイルは適用されません。
</div>

<div align="left">
一方ここではalignという属性を使ったので、スタイル（color:red）が適用されました。
</div>

<div align="center">
ここではさらに align="center"という属性とその値が使われたので、
別のスタイル（color:blue）が適用されます。
</div>

....

■擬似クラス・擬似要素

▲ページTOPへ

通常のスタイルシートの表記では表現出来ない状態や場所に対してスタイルを適用するために
擬似クラスや擬似要素というものが定義されています。

■擬似クラス

:link	訪れたページへのリンク
:visited	訪れて無いページへのリンク
:hover	カーソルがリンクと重なった時
:active	リンクをクリックした時

擬似クラスはaにつけるクラスとして考えればよいでしょう。
この設定をすればユーザーのブラウザ設定に関わらずリンク色をコントロール出来ます。
なお擬似クラスを有効にするには上記の説明順

１．a:link
２．a:visited
３．a:hover
４．a:active

で設定する必要があるので、注意しましょう。

例：

<html>
<head>
<style type="text/css">
	a:link { color: blue }
	a:visited { color: #9966FF }
	a:hover { color: red }
	a:ative { color: #FFFF00 }
</style>
</head>
<body>

<a href="index.html">リンクの色はスタイルに従います</a>

・・・

■擬似要素

:first-line	最初の一行
:first-letter	最初の一文字
:before	要素の直前
:after	要素の直後

IE4.0未対応、IE5.5はfirst-lineとfirst-letterにのみ対応しています。Netscape6.2は全て対応。
擬似要素のうちbeforeとafterはcontentプロパティと併用する事で機能します。
要素の直前や直後に何の文字を出力するかをcontentプロパティで指定します。

例（擬似要素）：

<html>
<head>
<style type="text/css">
	p:first-line { color: #993300 }
	div:first-letter { color:red;font-size:24;font-weight:bold;float:left; }
	a:before { content:"▼"; color:blue;}
	div:after { content:"by Yusuke"; color:gray;  }
</style>
</head>
<body>

<p>いろはにほへとちりぬるをわかよたれそつねならむ
うゐのおくやまけふこえてあさきゆめみしゑひもせす</p>

<div>いろはにほへとちりぬるをわかよたれそつねならむ
うゐのおくやまけふこえてあさきゆめみしゑひもせす</div>

<a href="index.html">リンクの先頭</a>に文字を出力します（netscapeのみ）

<div>対応はnetscapeだけですが、このように擬似要素のbeforeやafterを設定する事で
スタイルシートで文字の出現を設定出来ます。珍しい機能ですね。</div>


・・・

表示例：

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす

リンクの先頭に文字を出力します（netscapeのみ）

対応はnetscapeだけですが、このように擬似要素のbeforeやafterを設定する事でスタイルシートで文字の出現を設定出来ます。とても珍しいですね。

■スタイルの継承

▲ページTOPへ

プロパティによっては、親要素の設定値がそのまま引き継がれる場合があります。これを継承と呼びます。
ポピュラーな例で言うと、背景色や文字色は、特に指定をしない限り親要素のプロパティから引き継がれます。

従ってスタイルを設定する場合は、ある程度この継承の動作も念頭におかねばいけません。

例：

DIVで文字色を青にしたので、たとえDIVの中で新たにスタイルを設定しても
文字色を指定しなければ青が継承されます。

しかし設定をすれば当然その範囲はスタイルは継承されません。

<div style="color:blue">
DIVで文字色を青にしたので、たとえDIVの中で新たにスタイルを設定しても<br>
<span style="font-weight:bold;">文字色を指定しなければ</span>青が継承されます。<br><br>
しかし設定をすれば当然<span style="color:red">その範囲</span>はスタイルは継承されません。
</div>

■長さの単位

▲ページTOPへ

スタイルシートで長さを指定する時に、その単位の表現には幾つかの種類があります。
その手法は、指定方法によって相対単位と絶対単位にわかれます。

■相対単位
px	：１ピクセル（画面の１ドット）を１　ex: font-size:13px margin-top:28px padding:5px
em	：その要素で指定されたfont-sizeを１　ex: margin:2em; height:3em, padding:0.5em
ex	：その要素のx-height（小文字ｘの高さ）を１　ex: padding:1ex; margin:2ex; border-width:0.8ex
％	：親要素の長さや初期設定・継続値を100％とする　ex: width:50%; font-size:150%
■絶対単位
in	：インチ　ex: line-height:1in
cm	：センチメートル ex: margin:2cm
mm	：ミリメートル ex: font-size:8mm
pt	：ポイント ex: font-size:13pt
pc	：パイカ ex: font-size:1pc

単位を省略すると、通常はpx（ピクセル）と捉えられるようです。

利用のポイントですが、絶対単位を使用するとどのパソコンでも同じ大きさになりますが
画面の小さいパソコンだと相対的に表示が大きくなってしまい、あまり好まれません。

一方相対単位だと画面の大きさや解像度によって大きさは変わってしまいますが、
画面に対して常に一定の比率で大きさが指定されるので、閲覧者の環境にあった表示になるでしょう。

▲ページTOPへ