スタイルシートの概要
スタイルシートとは、文字やテキストのサイズ、位置、色等レイアウトに関する情報を
幾つか設定して置き、それをＨＴＭＬのドキュメントのページ全体や一部に適応させようと
するものです。スタイルシートを使いこなす事により、ＨＴＭＬテキストの作成効率が
上がるとともに、HTMLのタグだけでは指定できなかった、細かな設定も可能になり、
ホームページの見栄えが格段によくなります。
また見栄えをよくする為に、だんだんとHTMLドキュメントの記述が複雑になり、「本来伝えようと
した情報、との見栄えを良くしようとした記述との分離が難しくなってしまう。」などの弊害を
排除するために、スタイルシートの使用が推奨されています。

スタイルシートの基本
単純なスタイルシートをデザインすることは簡単です。
スタイルシートで文字を青く表示する設定を書いて見ましょう。
div　{　color:　blue　}
これがスタイルシートの記述です。これを例にスタイルシートの記述について説明します。
最初に言葉の定義を少し厳密にしてみます。
まずタグとは何でしょう、「Tag」とは英語で、「荷札」のことです。
つまり<div>はdivと書いてある荷札なのです。
この荷札に書き込んだ文字divを要素と呼びます。
「要素」は英語でelementと言います、elementの意味には「これ以上分解できない構成分子」という意味が有ります。
<div>を要素divの開始タグ （divエレメントのスタートタグ）
</div>を要素divの終了タグ (divエレメントのエンドタグ)と呼びます。
<div>ねろ</div>と記述することは、「ねろ」に適応する要素と、その要素の適応範囲を示しているのです。
さてスタイルシートの場合 divを要素とは呼ばずに要素divのセレクターと呼びます。
セレクターはHTMLのテキスト(ドキュメント)とスタイルシートを結びつける役目をします。
又｛　｝の部分を宣言と呼びます。
更に全てのHTMLの要素がセレクターになることが出来ます。
｛　｝の中には<BR>プロパティとバリューを：で区切って書きます。
プロパティ(properity)　　---　　性質とか、属性とか言う意味です。
バリュー(value)　　 　　　---　　値と言う意味です。
すなわち言葉で書くと、 要素divのcolorプロパティをblueバリューにします 、ということになります。 'color'プロパティは約５０有るプロパティの一つで、HTMLドキュメントの色の表示方法を決定します。
設定出来るプロパティとバリューのリストは、規格によって決められています。

ここを抑える
HTMLドキュメントの中使用されるタグの<div></div>や<P></P> など '<' や '>' で囲まれた部分を要素(element)と言います。
スタイルシートはこれらの要素のプロパティ(性質)を定義します。
基本的なスタイルシートの記述方法は
　　　　　　　　　　　　要素　｛　プロパティ　：　バリュー　｝
と書きます。

プロパティって何？
「私はねろが好きだ」と言うとあなたは驚くでしょう、'ねろ'って何？　ローマの皇帝？
そこで私は「ねろは猫です」と説明する、あなたは少し安心して「どんな猫なの？」と聞くでしょう。
そこで私は'ねろ'を説明する幾つかの特徴を話します。
　　　　　　　動植物　＝　動物
　　　　　　　種別名　＝　猫
　　　　　　　雌雄　　＝　オス
　　　　　　　名前　　＝　ねろ
　　　　　　　年齢　　＝　４歳
　　　　　　　住所　　＝　波田町
そーです、私は　'ねろ'　のプロパティーを列挙したのです。プロパティーとは、性質なのです。
'ねろ'　はオブジェクト（物）と呼ばれます。物だって、動物じゃないかとあなたは、
言うかも知れません。
プログラムの世界では　'ぽち'　も　'たま'　もオブジェクトです、そればかりか、'人間'も、
'空気'も、'自動車'も、形の無い '名前' も '文字'　も　'フォント'　もそればかりか
'プロパティ'そのものも皆オブジェクトです。そしてプロパティーはオブジェクトの性質
を表すものなのです。
上のプロパティをスタイルシート風に書いてみましょう。
　　　ねろ　{
　　　　　　　動植物　:　動物;
　　　　　　　種別名　:　猫;
　　　　　　　雌雄　　:　オス;
　　　　　　　名前　　:　ねろ;
　　　　　　　年齢　　:　４歳;
　　　　　　　住所　　:　波田町
　　　　　　}
となります。「；」の様に、文字と文字を分ける「；」「：」「,」は総称して
デリミタ(delimiter=区切り記号）と呼ばれます。
プロパティとバリューは「：」で区切ります。プロパティどうしは「；」で区切ります。
行を変えることは自由に出来ます。
１つのプロパティによっては、複数のバリューを設定する事も出来ます、この場合は各バリューを
' , 'で区切って記述します。
もし動植物のところに'猫'というバリューを設定したらどうでしょうか？それは出来ません。
プロパティは設定するバリューのルールが決まっているのです。
決められたルールの中で設定する 必要があるのです。

ここを抑える
上の例では一行ずつにプロパティが記述されていますが、続けて書くことも出来ます。
ねろ　{動植物:動物 ; 種別名:猫 ; 雌雄:オス ; 名前:ねろ ; 年齢:４歳 ; 住所:波田町}

「HTML忠太」ではどのようにしてプロパティを調べるの？
それではプロパティの設定出来る項目にはどのような物があるのでしょうか？
「HTML忠太」のプルダウンメニューのスタイルシート(S)
の中の「CSSビルダー」を開き、その中の「項目」にプロパティの設定出来る項目が
列挙されています。
「フォントの設定」「テキストの設定」などがそれにあたります。更に列挙された項目を選択すると
その下に、その項目の設定可能な、プロパティが列挙されます。プロパティの名前は'color'とか
'font-size'の様に比較的わかり易い名前になっています。更にそのプロパティを選択すると、
その右に、プロパティとして設定出来る値がこれも列挙されます。そしてその下に簡単な説明と
使用例が示されます。
又「ヘルプ(H)」-＞「CSSプロパティ・バリューの説明」を開くとCSSで使用するプロパティの一覧と
説明及び使用例が載っています。ここからコピーしてHTMLに貼り付けることなども可能です。
プロパティの記述の仕方が解からなかったり、どんなプロパティが有るか調べる時に使います。

例を上げて見ましょう
例としてフォントのプロパティについて考えて見ましょう。
フォントには沢山のプロパティがあります、たとえば
font-family　　----　フォントの種類を表します。
font-size　　　----　フォントの大きさを設定します。
font-style　　----　　斜め文字、イタリック文字を設定します。
line-height　　----　行送りを設定します。
color　　　　　----　　色を設定します。
padding-lef　　----　左からの位置。

これをcssに記述する場合は
p {
font-family　:　ＭＳ 明朝;
font-style　:　italic;
font-size　　:　large;
line-height　:　120%;
color : #ff0000;
padding-left : 5%
}
こんな具合になります。
<P>ねろは猫です、ねずみを取る猫です。</P>
とすれば要素Pに上で宣言されたプロパティが適応されます。
実際に表示してみましょう。

グルーピングについて
異なった要素に対して一度にプロパティを設定する方法があります。
たとえば<div>、<P>、<H1>、<H2>、<H3>の全ての文字の色を赤に設定します。
div , p , h1 , h2 , h3 { color : red }
こんな風に ' , ' カンマで区切って記述します。

スタイル設定の置き場所
さて上のようなスタイルの設定はどこに書き込むのでしょうか。
　　１、別のファイルに書き込んでそのファイルを、ＨＴＭＬファイルにリンクする方法。
　　２、そのファイルのヘッダーの部分に書き込む方法。
　　３、スタイルを適応する文の部分に書き込む方法。
の３種類があります。

リンクによるスタイルシートの適応
１、css専用のファイルを作る
リンクによるスタイルシートを適応させる為には、先ずcssの専用のファイルを作成する 必要があります。
「ＨＴＭＬ忠太」では次のようにして'*.css'ファイルを挿入することが出来ます。
「HTML忠太」「スタイルシート」メニューの 「CSS定義ファイルを挿入する」 を選択すると新しいタが開き名前挿入ボックスが開きます、名前を入れると'名前.css'
ファイルが挿入されます。'名前'は既にある名前と区別します、同じ名前を付けると
'名前.css'ファイルは上書きされます。注意しましょう。
２、HTMLファイルの中に作成したccsファイルのリンク
を書きこむ。
次に挿入したCSSのファイルをHTMLのテキストファイルとリンクさせます。
リンクはHTMLテキストファイルのHEADERの中に記述します。
上記の操作をした時、既にHTMLのファイルが開かれている場合は、自動的にHTMLテキストに
リンク情報を書きこむか否かのメッセージボックスが現れ、「はい」を選択すると、挿入した
CSSファイルのリンク情報が自動的に書き込まれます。
また既に作成したCSSファイルを読み込んで現在のHTMLテキストにリンクさせたい場合や、
後からリンク情報を書きこむ場合は、
「HTML忠太」では次の様に簡単にリンクが書き込めます。
「HTML忠太」「スタイルシート」メニューの 「リンクを設定しよう」
このファンクションを実行すると現在編集中の全てのHTMLのファイルのヘッダーの部分
　　　に現在開いているcssファイルのリンク情報が次の様に書き込まれます。
<LINK REL=stylesheet TYPE="text/css" HREF="tutor.css">
ただしCSSのファイルが無い場合は
<LINK REL=stylesheet TYPE="text/css" HREF=" *.css">
が挿入されます。「*」の場合はファイルを挿入し時点で、正式のファイル名を入れます。
この状態でもし「tutor.css」のスタイルシートがＨＴＭＬテキストに適応されます。
tutro.cssのファイルの中に、
div{font-family:ＭＳ 明朝;font-style:italic;font-size:large
;line-height:150%;color:#f0f8ff}
と書いて
HTMLテキストの文字列を<div>と</div>で挟んで見ましょう。
「tutor.css」で設定したプロパティーが適応される事がわかるでしょう。

　　　　　　　　　　　　　　ここを抑える
<HEAD>と</HEAD>の間に書き込こまれたリンクが読み込まれないと、
ブラウザーは正確に表示が出来ません。リンクは正確に書きましょう。
CSSファイルのリンクのパスの設定は画像などのパスの設定と同じです。
パスの設定が良く判らないうちはCSSファイルもHTMLファイルと同じフォルダーに置きます。

２、ページ情報としてスタイルを記述する方法
ページのヘッダーの中にスタイル情報を記述する方法は、基本的に別ファイル
に記述する方法と変わりません。CSSファイルに記述したものと同じ物をヘッダーの中に
記述します。
<!--
　　<STYLE TYPE="text/css">
P{font-family:ＭＳ 明朝;font-style:italic;font-size:large;line-height:120%; color:#ff0000;padding-left:5%} </STYLE>
--&gt
こんな感じになります、もちろん行を変えても構いません。
これでページ全体にわたるdivのプロパティーが設定されます。
スタイル全体をコメントで囲ったのは、スタイルシート未対応のブラウザーの為です。
スタイルシート未対応のブラウザーではこの部分が全てコメントになります。
スタイルシート対応のブラウザーではコメントの中に書き込まれたスタイル情報も
スタイル情報と判断します。
（注意)
CSSファイルの中にコメントを記述する場合は /* と　*/で挟みます。
/* と */ の間はコメントとして無視されます。
div { color:red; } /* 赤い色 */
こんな具合に記述します。HTMLテキストファイルのコメントとは違います。
注意しましょう。

　　　　　　　　ここを抑える
別のファイルにスタイル情報を書き込むと、複数のHTMLファイルから参照が可能となります、
HTMLのファイルが複数あり同じ様式で書きたい場合は便利です。
ヘッダーにスタイル情報を書きこむ場合は、スタイルの情報をそのページだけ適応したい場合
に使います。どちらが良いかはケース・バイケースとなります。

３、個別スタイルの設定
１）インラインスタイルの設定
インラインスタイルは個別のタグの中に、スタイル情報を書き込みます。
このようにすると、設定されたスタイルは、そのタグの中だけに適応されます。
<div STYLE="font-family:ＭＳ 明朝;font-size:large;line-height:150%;color:#f0f8ff">
　　ねろは猫です
<div>
とすると<div>〜</div>の部分のスタイルが設定されます。
２）範囲指定のスタイル設定
文字のある部分だけ強調したいとか、文章のある部分の色を変えたい時があります
この特は <SAPN　STYLE="設定">を使用します。<span STYLE="
設定">変えたい文章　</span>
とすると一部の文章だけ設定を変える
ことが出来ます。
<span STYLE="font-family:ＭＳ 明朝;font-size:large;line-height:150%;color:#f0f8ff">
　　　ねろは猫です
</span>
とすると〜の部分のすタイルが設定されます。

４、クラスによる設定
これまでの例ではdiv{.......}と言う風にスタイルを設定してしまうと
全てのdivに同じスタイルが設定されてしまいます。
又同じ設定を<div>だけではなく <P>にも<H2>
にも設定したい場合があります。こんなときクラスを使います。
cssファイルの中か又はヘッダーでスタイルを指定している場合は、
ヘッダーのスタイルの設定の中に
.red { color : red; }
と書き込みます。ドットが一番先にあることに注意してください、又始めのredはクラス
の名前で何でもかまいません、わかる易い名前にします。
そして
<div class="red">ねろは猫</div>
としてみて下さい。カラーのプロパティが設定されます。
<P class="red">でも<H2 class="red">
でもかまいません。任意のタグにプロパティが設定できます。便利ですね。さらに
任意の要素にクラスを設定できます。たとえば
div.class1{ color:red;}
div.class2{ color:green;}
div.class3{ color:blue;}
と設定しておいて、下の様に記述すると。
<div class="class1">ねろは猫です</div>
<div class="class2">ネズミを取る猫です</div>
<div class="class3">ねろは雄ねこです。</div>
実際に表示してみましょう。

５、ＩＤによる設定
ID による設定はクラスによる設定とほとんど同じ方法です。
クラスと違うのは、クラス名の前に書いたピリオド（．）をシャープ（＃）
に変えることだけです。
ただし、同じ名前のID は、１つの HTML 文書内（ページ）では１回しか使ってはいけません。
#red{ color:red;}
#blue{ color:blue;}
等と設定します。
<div id="red">ねろは猫です</div>
<div id="blue">ネズミを取る猫です</div>
等と記述します。

４、プロパティの設定項目とバリュー
さてプロパティの設定出来る項目はどんな項目があるのでしょうか。
「HTML忠太」の本骨頂はこれからです！

「HTML忠太」のプルダウンメニュー
の「スタイルシート(S)」を選択します
スタイルシートの「ＣＳＳビルダー」が現れます。
「ＣＳＳビルダー」の「項目」にはプロパティが設定できる
項目が並んでいます、その中の１つを選択すると、その下の「プロパティ」
に設定できるプロパティが表示され、その下の解説と設定例が表示されます。
さらに設定可能なプロパティを選択すると、プロパティに設定できるバリューが
表示されます。
バリューをクリックすると「挿入する文字」の中に「プロパティ:バリュー」の
形で文字列が挿入されます。
更に、挿入されたバリューが「フォント名」になっているものはフォント名のリストが、
カラーネームや#rgb,rgb(n,n,n),rgb(n%,n%,n%)等のものはカラーテーブルが
cm,px,pt等のものは値を入れるテキストボックスが表示されます。
これらのテキストボックスに値を入れると、挿入されたテキストに値が入ります。
こうして出来た「挿入する文字」をHTMLテキストの挿入したい場所を選択して
「挿入」ボタンを押す事により挿入します。

５、スタイルを設定してみよう ヘッダーや、別シートに設定されたスタイルを各項目に適応させようとした時
ヘッダーや別シートにどんな名前のスタイルが設定されているかすぐにわからない
時があります。
このような時は、「HTML忠太」の「スタイルシート(S)」-＞「左クリックでスタイル候補」
をクリックするとその
メニューの始めに「レ」が付きます、この状態でＨＴＭＬテキスト文の上で右クリック
をすると、通常の「編集」のポップアップメニューの代わりに「スタイルヘルプ」が
ポップアップします、この中の「項目リスト」を選択すると、スタイルシートで
設定されたスタイルの項目の一覧が表示されます。
ＨＴＭＬテキストのある文字列を<H2>や<div>に設定したい場合は、それらの文字を選択して
「項目リスト」の中から<H2>や<div>を選択すると　<div>の場合は
<div>選択文字</div>、<H2>の場合は
<H2>選択文字</H2>の様になります。
選択されたスタイルがクラスやIDの場合は、クラスを設定したいタグの
<P>や<div> 等を選択しますこうすると<P class="red">等と置き換わります。

　　　　　　　ここを抑える
文字列をスタイルで設定したタグに設定したい場合は文字列を選択して、リストの中から設定したい
タグを選択する。
あるタグのクラスを設定したい場合は'<タグ>'を選択して、リストの中からクラスを選択するんだね。
クラスって何？
ねろは波田中学校の３年生、クラスは３年Ｃ組です。
ねろの教室は２階の西から３番目、時間割はＣタイプ、クラス担当は山口先生。
ぽちの教室は２階の西から２番目、時間割はＢタイプ、クラス担当は後藤先生。
ミケの教室は２階の西から１番目、時間割はＡタイプ、クラス担当は吉田先生。
'たま'　や　'とら'　や　'のら'や.......... 全て書くのは大変ですね。
そこでクラスを宣言します。 .３Ｃ {教室:２階の西から３番目 ; 時間割:Ｃタイプ ; クラス担当:山口先生}
.３Ｂ {教室:２階の西から２番目 ; 時間割:Ｂタイプ ; クラス担当:後藤先生}
.３Ａ {教室:２階の西から１番目 ; 時間割:Ａタイプ ; クラス担当:吉田先生}
そしてクラスを設定します。
<ねろ class="３Ｃ">
<ぽち class="３Ｂ">
<ミケ class="３Ａ">
どうですかこれなら、'たま'や'とら'も'のら'もすぐにクラスが設定可能ですね。
クラスはプロパティを一まとめにして、宣言します。そしてそれを割り当てます。
クラスって便利ですね。

スコープについて
スタイルシートを使い始めるとこんな疑問を持ちます。"たとえば<H1>なんかをCSSの別
ファイルでスタイルを定義して、それを又ページのヘッダーで定義し、更に個別のタグで
定義したらどうなるのか？　そんなことをしてはいけないのか？"と
答えは　「定義をしていいのです」それではいったいどの定義が適応されるのでしょう。
仮にこんなスタイルの定義が有ったとします。
<div style="corol:red">赤い文字を表示します</div> これは
赤い文字を表示します
となります、つまり赤い字は<div style="corol:red">と</div>とに挟まれた
文章に適応されます。このことをstyle="corol:red&quotの定義は<div>と</div>の間の
スコープ(scope)を持つと言います。スコープとは'範囲'と言う意味です。
すなわちスコープを持つとは<div>と</div>の範囲に適応されるということです。
スタイルを別ファイルで宣言した場合のスコープは、そのファイルをリンクした全てのHTMLのページです。
スタイルをヘッダーで定義するとその定義はそのページ全体のスコープを持ちます。
スタイルをある特定のタグの中で定義すると、スコープはそのタグの中だけになります。
更に同じプロパティが別のスコープで定義されている場合、より狭い範囲の定義が優先されます。
別ファイルでの定義より、ページのヘッダーで定義した方が、更に個別のタグで定義した方が、優先
順位は高くなるのです。どうしても優先順位を上げたい場合は、
H1 { color:red ! important }
の様に'! important'　宣言を使いますが、余り使用しない為、詳しい説明はしません。
また同じスコープの範囲で重複してスタイルが定義されている場合は、最後の定義が優先されます。
「国際法より、その国の法律が、その国の法律より、都道府県の条例が、都道府県の条例より、
市町村の条例が、市町村の条例より、その家のルールが優先されます。スタイルシートの世界のお話です。」

継承について
スタイルの定義を<H1 style="color:red">とした場合文字の色は赤になりますが、
その他のプロパティ はいったい何が適応されるのですか？　　こんな疑問が出ます。
答えは「定義されていないプロパティは親のプロパティが継承されます。」となります。
言い換えると、親のスタイルは子供に継承され、その上に子供で定義された要素が上書きされるのです。
それでは親とは何でしょうか？　たとえば、このように定義してみましょう。
<div style="color:blue">
継承とは<span style="font-weight:bold">親</span style>の プロパティを受け継ぐものです。
</div>
これを表示すると。
継承とは親のプロパティを受け継ぐものです。 となります。
<span style="font-weight:bold">の親は
<div style="color:blue">です。
すなわち<span style="font-weight:bold">は親である<div style="color:blue">のプロパティを継承します。
その結果、<span style="font-weight:bold">
では定義されていない "color:blue" は継承されて、<span>の中の文字の色も'青'となっています。
それでは何処でも宣言されていない要素はいったい何が親になっているのでしょうか、通常はそのHTMLを表示する
ブラウザーの設定が親になっています。
ただし全ての親のプロパティーが継承されるとは限りません。継承されないプロパティもあるのです。
どのプロパティーが継承されるかは、「CSSビルダー」の説明の中に記載されています。

ボックスの説明
文字や画像の上や左側を空けたりする場合、スタイルシートにはボックスと言う概念を使います、
これを簡単に説明しましょう。たとえば

最後に
これで一応簡単なスタイルシートの説明を終わります。
初心者の方がこれを一回読んだだけでスタイルシートを理解することは難しいでしょう。
ご安心下さい、「HTML忠太」はスタイルシートを２日でマスターしていただく為に
「CSSチュートリアル」機能が付いています。
この機能を使って、実際にスタイルを設定して見ることにより
スタイルシートの使い方が身に付くと思います。
メニューの「スタイルシート(S)」−＞「CSSチュートリアル」を実行下さい。
その後又この説明をお読みください。

HTML忠太から一言
HTMLのエディターの中には、全くcolorやfontや'background-color:#800000;'
こんな言葉を使わずに、HTMLテキストを作る機能を持ったものがあります。
これらのエディターは簡単にテキストに色をつけたり、バックグラウンドに
画像を挿入したりします。しかしHTML忠太はその方式は採用しません。
タグやスタイルの設定を覚えないからです。タグやスタイルの設定を覚えないと
他のHTMLを見たときにその中身が理解できません。すばらしいホームページが
有って、自分もそのホームページと同じようなホームページを作ろうとしても、
作ることが出来ないのです、そればかりか、自分の作ったホームページでも、
ほんの簡単な修正さえ出来ません。
HTML忠太を使いながら簡単なタグやスタイルシートのプロパティを覚えましょう、
HTML忠太がお手伝いします。