前節でスタイルシートの雰囲気は解ってきたね。
　　ところでスタイルシートの言葉なんだけど、
　　「スタイル」はデザインする事から、想像もできるんだけど、
　　「シート」の方はどこから来たのかな？
　　この節でスタイルシートの基本が見えて来るようだ！
　　もう少し頑張って、スタイルシートをモノにしましょう！

---

�@　スタイルシートの私的概念 　�A　ボーダー（枠線）の指定 　�B　マージンとパディングを指定 　�C　スタイルシートの大きさの指定

�D　座標による位置の指定 　�E　重ね合わせる順序の指定 　�F　クラス指定 　�G　スタイル指定ファイルを作る

冒頭のコメントでも話したけど、「スタイルシート」の「スタイル」はわかるけど、何故「シート」が付くんだろう？
どうも、タグに張り付いた、デザインを設定した長方形の「シート」を想像すればいいようです。

スタイルシートのイメージを図にしたのが下図です。

一番外側が、ブラウザのウインドウ（スクロールして見える全範囲）とします。
この色の部分が、スタイルシート全体です。
この色の部分が、スタイルシート内容部分（要素）です。
スタイルシートの形状に関する説明をします。 次にスタイルシートの性質をを説明します。

デザインの指定	タグを補助してデザインを付け加える。
形状・大きさ	長方形で、幅・高さ共に指定可能。
背　景	背景無指定の場合は透明。　色・画像共に指定可能。
配　置	自由に指定できる。
重ね合わせ	何枚でも重ねられ、その順序も指定可能。

スタイルシートは「タグを補助する」という性質上、タグの持つ本来の性質を受け継ぎます。
そしてタグは、その性質上で、２つに分類されます。　「インライン要素」と「ブロック要素」です。 共に何も指定しないタグで span タグと div タグがありましたが、これらの差は「インライン要素」と「ブロック要素」の違いなのです。

当然、 span タグと div タグのどちらを使うかで、デザインが違ってきます。
私的な区分ですが、この２タグの使用上の違いを揚げてみました。

　　span と div の違い

タグ名	要素名	改　行	特　徴
span	インライン要素	前後で改行しない	高さ（行数）が１の長方形。 幅は任意幅を使用 範囲はポイント単位で指定。
div	ブロック要素	前後で改行する	高さがある長方形。 幅は行幅全部を使用。 範囲は行単位で指定。

私的定義文だけではわかりにくいので、例を示して説明しましょう。
スタイルシートの範囲を見るため、ボーダーを付け、文字を赤にします。

これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。
赤枠で囲われた部分が、スタイルシートを設定した部分です。
また、コメントも状況に即して入れられています。
改行の様子や、使用幅について前述した性質は、例を見て戴ければ一目瞭然ですね。

注目して欲しいのは、途中で改行を入れ、２行になった時です。
div では、内部で改行して、高さが２行のスタイルシートになりました。
一方 span では、スタイルシートごと、途中で改行されて、その高さ（行）は１行のままです。

インライン要素の span と、ブロック要素の div の違いのニュアンスを掴んで戴けましたか。
これからは、状況に応じて使い分けしながら、徐々に慣れて行きましょう。



まずは、スタイルシートのボーダー（枠線）に関する、属性の一覧を揚げます。

属　性	属性名	属性値	デザインの種類
枠線の種類	border-style	none	枠線なし
		dotted	点　線
		dashed	粗い点線
		solid	直　線
		double	二重線
		groove	谷　線
		ridge	山　線
		inset	凹　線
		outset	凸　線
枠線の太さ	border-width	太さを指定	枠線の太さを、ピクセル値等で指定
枠線の色	border-color	色を指定	枠線の色を、色名やＲＧＢ値で指定

枠線の種類の指定には、「 border-style 」属性を使います。
次例は、谷線のボーダーを指定する場合です。 この枠線の種類は、デザイン性が強いので、実例で見ましょう。
枠幅を 8 ピクセル、色は#d0d080で表示します。

dotted	dashed	solid	double
あいうえお かきくけこ	あいうえお かきくけこ	あいうえお かきくけこ	あいうえお かきくけこ
groove	ridge	inset	outset
あいうえお かきくけこ	あいうえお かきくけこ	あいうえお かきくけこ	あいうえお かきくけこ

枠線の太さの指定には、「 border-width 」属性を使います。
一方、枠線の色の指定には、「 border-color 」属性を使います。 次例は、山線で、太さが５ピクセル、緑のボーダーを指定する場合です。 定型の指定ルールに付き、一目瞭然ですね。
最後に、ボーダー（枠線）関連属性の一括指定を説明します。 次例は、２重線で、太さが３ピクセル、青のボーダーを指定する場合です。 この一括指定では、随分簡単に指定できますね。




�@項で出てきた、残りのマージンとパディングの指定法を説明します。

　スタイルシートの内外の隙間に関する、属性一覧

属　性	属性名	属性値	デザインの種類
枠線の外の隙間	margin	幅を指定	隙間の幅を、ピクセル値等で指定
枠線の内の隙間	padding	幅を指定	隙間の幅を、ピクセル値等で指定

この２つは、共に隙間を設定するものですが、�@項の表で解るように、マージンは枠線の外の隙間で、これはスタイルシートの配置に使えますね。
一方パディングは枠線の内の隙間で、見た目のバランスを調整に役立ちます。

マージン、パディングの属性は margin 、 padding を使い指定します。 次例は、マージンを２０ピクセル、パディングを５ピクセルで指定する場合です。 前項の、ボーダーと、マージン・パディングは、スタイルシートの上下左右の４方向で、違う値を設定できます。
その指定法に２つがあります。

属性名に場所名を追加して位置を特定し、属性値を指定します。 次例は、下の枠線が点線で、太さが３ピクセル指定法 上記の指定を、一括指定した場合の指定法 次例は、左のマージンを、２０ピクセル空け、下側のパディングを５ピクセル空ける場合の指定法
次に、方向毎に違う属性値を一度に指定する方法を説明します。 　枠線の種類を、上下が直線で、左右は枠線なしの指定法 　枠線の外側の隙間（マージン）を、上下が１０ピクセル、左右が２０ピクセル空ける場の指定法 　枠線の内側の隙間（パディング）を、左を５ピクセル、他を２ピクセル空ける場合の指定法 上→右→下→左の順番は決まり事です。　上から始まり右回りと覚えましょう。


それでは border , margin , padding の使用練習をします。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。 margin 属性は、配置に有効に使えますね。



スタイルシートの大きさ、および、内容がその大きさより、あふれる場合の処理の属性の指定法を説明します。

まずは、この関連の属性の一覧を揚げます。

属　性	属性名	属性値	デザインの種類
シートの横の幅	width	横幅を指定	横の幅、ピクセル値等で指定
シートの縦の高さ	height	高さを指定	縦の高さ、ピクセル値等で指定
内容があふれる場合	overflow 方向限定 overflow-x overflow-y	visible	シートを広げ、全てを表示　（規定値）
		hidden	あふれる部分は表示しない
		scroll	スクロールバーを付ける
		auto	ブラウザが自動処理

スタイルシートの幅・高さは、「 width 」、「 height 」属性で指定します。 幅が６００ピクセル、高さが４００ピクセルのシートで、左のマージンが３０ピクセルの例です。 次に内容があふれる場合ですが、両方同時指定なら overflow 属性を使います。
それでは、内容があふれる場合の練習をしてみましょう。
シートの高さは４００ピクセル、幅は９０ピクセルにしました。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。
文字の大きさは、あらかじめ 16pt に設定してあります。 付属する属性は、上が背景色を付け、中は枠線が緑の２重線、下は枠線が谷線です。
これでわかるように、スクロールバーは、指定された大きさの内部に付きます。



スタイルシートの位置を決める手法は、先項で出てきた margin でも出来ますが、ダイレクトに座標を指定して位置を指定する方法を紹介しましょう。　但し、ブラウザが「 Internet Explorer 」の場合です。（ Netscape も Ver.7 は対応してるようです ）

まずは座標による位置の指定と、次項で説明する重ね合わせを一緒に、その属性の一覧を揚げます。

属　性	属性名	属性値	デザインの種類
座標による 　　位置の指定	position	static	本来の位置を示す
		relative	本来の位置からの、相対座標を示す
		absolute	絶対座標を示す
重ね合わせの順序	z-index	0 以上の整数	小さいほど、下になる

座標による位置の指定は、「 position 」属性を使います。
これらは、「相対座標」または「絶対座標」を指定しているだけで、これだけでは位置が決定できません。
これらの指定に続いて、座標を指定する必要があるわけです。
現在カーソルより、下へ３０ピクセル、右へ１００ピクセルの例 画面の、下端から３００ピクセル、右端から２００ピクセルの例
それでは練習ですが、３枚のシートを作り、その位置を少しずつずらしてみましょう。
大きさは、横３００ピクセル、縦２００ピクセルで、太さ１の直線で枠線が付いています。
１枚目は、カーソル位置で、規定の文字色（黒）で書かれています。
２枚目はそれより、横に５０、縦に２０ピクセルづつずらして、青の文字色で書かれています。
３枚目はブラウザ左より１５０、上より５０ピクセルの位置に、赤の文字色で書かれています。
書いてある文字の大きさは、あらかじめ 25pt に設定してあるものとします。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。 ２枚目のシートの座標で、「 top:-180 」となっているのは、カーソルは、１枚目のシートを表示した後、そのシートの「次の行」の「左端」に移動しているため、シートの高さ分を上に戻して
　　　top:-180 ( = 20-200 )　　と言う訳です。
３枚目のシートは、そのままブラウザの左上隅からの距離だから、解りやすいですね。

各シートは透明で、「posision」の値に「absolute」か「relative」を指定した場合は他のシートに影響なく、内容をダブらせる事が出来ます。
これらの性質を上手に使う事により、自由に配置できるわけです。
また、書いたシートの順に、上に重なっているのを覚えておいて下さい。



前項では、書いたシートの順に、上に重なっていくのが解りましたが、この順番を変える事が出来ます。
重ね合わせの順序を指定する属性「 z-index 」を使います。 次の例は、シートを一番下に持って来る場合の指定です。
前項の例で、シートの重なりの順番を変えてみましょう。
２番目のシートを一番上に持ってきます。（z-index の値を順番に、 0 , 2 , 1 に設定）
重なりがよく分かるよう、同色系の背景色を付けます。
１シート目が「static」が「relative」に変えているのは「static」では、重ね合わせが出来ないからです。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。 このように body タグだけでなく、スタイルシートにも背景関連の指定が出来、背景色を付けると、透明なシートが不透明になります。　背景画像を付けても同様です。
上の例では分かりやすいよう、下を少し透けて見せてますが、実際は全く透けません。
重ね合わせ順の応用例として、画像をバックにして、文字を前に出したい時がありますが、 このように画像を指定すれば、画像が前面に来て文字を隠します。
この例では、文字と画像の両者をスタイルシートに貼り付け、両者の重ね合わせ順を z-index で指定すればOKですね。
さっそく、これを実際にやってみましょう。

普通に文字を書いた場合です。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。
文字はあらかじめ 16pt に、文字色を「 black 」に設定してあるとします。 次に文字を段落タグ「 p 」に付けたスタイルシートに貼り付け、 z-index を 1 にして、画像の z-index を 0 にします。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。
文字はあらかじめ 16pt に、文字色を「 black 」に設定してあるとします。 文字が前に来て、うまく出来ましたね。　まるで背景画像と同じように使えますね。

スタイルを付けているタグが「 p 」なので、前後で「改行」＋「空白行」がある事も注目してください。
ただ、段落がスタイルシートの１行目から始まる場合は、何故かその前の行に、空白行は出ないようです。
これらの点が、ただ改行だけする「 div 」タグを使った時と違うところです。

「position:absolute」や「position:relative」を指定したスタイルシートは、重ね合わせと共に、スタイルシートの入れ子の状態をうまく利用すれば、自由自在にホームページをレイアウト出来ます。（逆に言えば、ここがしっかり把握出来てないとチンプンカンプンです。）
また簡単な JavaScript と組み合わせる事で、さらに自在なレイアウトが可能になります。　そのイントロの部分は、いずれまた紹介する事としましょう〜（笑）



ホームページを作っていれば、頻繁に使うオリジナルのデザインがあります。
たとえば、この学習室で、太字で薄黄色で引かれている、下記のようなマーカーですが

（例）　あいうえおかきくけこさしすせそ

これは次の様に書かれています。 そこで、スタイル指定の部分 これをオリジナルのスタイルとして登録出来、簡単に呼び出せれば便利ですよね。
このように使えるのが、これから説明する「クラス指定」です。
まず、このスタイル指定に名前（クラス名）を付けます。　ここでは「 marker 」にします。

次に、前節で習った「タグの共通指定」と同じ <head> 〜 </head> の中に「クラス指定」を宣言します。 今回の場合なら次のようになります。 このようにクラス指定があれば、先程の「薄黄色のマーカー入り太字」は次の様に書けます。 これが「クラス指定」のしくみです。　多くのスタイル指定がある場合に効果的ですね。


このクラス指定を利用して、メニューの選択用のスイッチを作ってみましょう。

スイッチを指定するクラス名は「 switch 」にします。
スイッチは枠線を「 outset 」で太さ 2 ピクセル、文字は太字で中央寄せ、パディングは 5 ピクセル、幅が 100 ピクセル、背景色は #cccc66 にします。　これらをクラス指定しておきます。
このスイッチを、２行３列のテーブルで仕切り、それぞれの間隔は cellspacing 属性で 10 ピクセル空けます。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。
画像バナーを使わなくても、かなりのデザインが作れますね。
他にも、文字の大きさ、書体などもクラス指定の内容を変えるだけで、簡単に変更出来ます。
背景に画像を指定すれば、楽しいものが出来そうですね。



複数のホームページで、同じデザインを使う場合がありますね。
その場合ヘッダー部に同じ事を書くのも大変ですし、変更の際には全部のファイルを修正することになり、数が多くなれば大変ですね。
そんな時に、共通のスタイル設定をファイルにして、これを読み込めばＯＫ・・こうなれば便利です。
実はＨＴＭＬには、このような機能が備わっています。

スタイル設定ファイルのルールを揚げます。 実例として、リンクのデザインと、body table 内の文字の大きさ、背景の設定、ここで練習したクラス指定を、共通のスタイル設定をファイルにまとめましょう。
ファイル名を「style.css」として、その内容を見ましょう。（復習を兼ねてます） cssファイルでは、「 /* 」 〜 「 */ 」はコメント文（何も処理されない部分）を意味します。

次に、ＨＴＭＬソースファイルの実例です。　復習を兼ねて内容を読みとってください。
style.css ファイルはＨＴＭＬファイルと同じフォルダにあるとします。 これをＨＴＭＬファイルにして、ブラウザで表示すると，次のようになります。