★ スタイルシート・・・CSS >> Cascading Style Sheetの頭文字
★ Cascading・・・カスケードの日本語訳：階段状に水が落ちる滝
参考文献はこちら HTMLクイックリファレンス様
★ CSSはレイアウトを定義する規格＝フォントサイズ、余白、行間etc
◇---本題に入る前に前置きです。
HTML仕様の標準化を提唱しているW3Cという団体があります。
▼
■W3CのHTML定義 【DTD HTML 4.01】
テキストなどの論理的な設定はHTMLに記述し、レイアウト（文字サイズ、文字の装飾）や余白・行間などの見栄えに関する物理的な設定は、スタイルシート（正式にはカスケーティングスタイルシート、通称CSS）の設定を推奨しています。
▼
■DTD HTML 4.01非推奨要素群（abc順）
<basefont> <center> <font> <s> <strike>
<u>・・・など
■DTD HTML 4.01非推奨属性群（abc順）
<align> <border> <bgcolor> <background> <clear> <color> <face>
<height> <nowrap> <size> <text> <width> ・・・など
■DTD HTML 4.01非推奨属性の例外利用
（要素別属性指定の可否）
TABLE要素にborder属性を指定できますが、TABLE要素以外での指定は非推奨扱いです。
TABLE要素内の<tr> <th> <td>にheight属性とwidth属性の指定は非推奨扱いです。
TABLE要素にalign属性の指定は、非推奨ですが、
TABLE要素内の<tr> <th> <td> <col>にalign属性の指定は、例外として使用できます。
▼
例えば、フォントカラーの変更は、<FONT>タグにフォントカラーを指定する方法が、HTML読本などで紹介されています。
未知の苦HTML解道 >> 未知の苦HTML解道
▼
<FONT COLOR="#FF0000">未知の苦HTML解道</FONT>
作例のFONT要素と属性（color face size）のような視覚的構造は、W3CによるHTML定義「HTML 4.01 Transitional」では、非推奨とされ、スタイルシートの設定を推奨しています。
FONT要素とその属性のほかにも、非推奨要素属性は多数存在しますが、HTMLから非推奨の記述をスタイルシートに移行した場合、あるいは、初期段階における
スタイルシートの基本文型は、次のような構造になっています。
▼
- スタイルシートの基本文型 -
▼
★フォントカラーのスタイルシート設定をBODY全体に反映させると仮定した場合
body { color : #FF0000 ; }
▼
本章冒頭作例のFONT要素と属性に関するスタイルシートの設定を、HTML文書内に、直接記述することができます。
インラインスタイルシートと呼ばれ、スタイルシートの括弧 { } 内の文型を、HTML文書のタグ要素に、スタイルシートを指定するSTYLE属性を使い、直接記述します。
スタイルシートの文型を、タグ要素に記述する際は、タグ要素に追加するHTMLタグの属性値と同様に、二重引用符" "で括ります。
<SPAN STYLE="color:#FF0000;">未知の苦HTML解道</SPAN>
具体的なスタイルシートの設定例
◆例１HTML文書全体にスタイルシートの設定を反映
>>BODY・・・フォントカラー、フォントサイズ、背景色など
当サイトの<BODY>は、次のように設定しています。
body {
font-size:12px;color:#3F3F3F;
font-family:Verdana,suns serif;
}
◆例２CLASS属性の呼び出し
★その１★ 全ての要素（タグ）に、スタイルシートを適用
全ての要素（タグ）に、スタイルシートを適用させる設定は、クラス名の前にピリオド（．）を付けます。
▼
外部スタイルシート設定の一例
.irop { color : #CCCCCC ; }
記述制限なし=CLASS属性 < > 1ページに1度だけ可=ID属性
▼
▼
HTML文書内にスタイルシートを呼び出すCLASS属性を使い、特定部分のスタイル変更の作例です。
外部スタイルシートに設定したクラス名称は、上枠のiropです。
▼
◇スタイルシート適用前と適用後の比較サンプル
▼
本章冒頭の前置きにもありますが、ブロック要素内における特定部分のドキュメント変更はインラインレベル要素を用います。
作例は、インラインレベル要素にCLASS属性＝"任意のクラス名"を記述し、スタイルシートを呼び出しています。
CLASS属性にクラス名を指定するときは、クラス名の前のピリオドは、付けません。
◇ソース表示
<P><SPAN CLASS="irop">丸・三角・四角</SPAN></P>
注釈： 例１により、BODY全体のフォントカラーは"#3F3F3F;"を設定しています。
当サイトにおける色に関する設定の中から、クラス名称.iropのフォントカラーは#CCCCCCです。
★その２★ 特定の要素（タグ）に、スタイルシートを適用
特定の要素（タグ・・・例えば、P要素やDIV要素など）に、スタイルシートを適用させるときは、ピリオド（．）クラス名の前に、クラスセレクタ（P要素やDIV要素など）を指定します。
クラスセレクタ ．クラス名 { 属性 : 値 ; }
▼
外部スタイルシート設定の一例
p.centering {
font-size:12px;
font-family: ＭＳ Ｐゴシック;
text-align:center;
}
特定要素にスタイル適用の作例です。CLASS属性を使い、クラス名を呼び出しています。
外部スタイルシートに設定したクラスセレクタ．クラス名称はp.centering（上枠）です。
◇スタイルシート適用前と適用後の比較サンプル
▼
作例は、P要素（ブロックレベル要素）にCLASS属性＝"任意のクラス名"を記述し、スタイルシートを呼び出しています。
CLASS属性にクラス名を指定するときは、クラス名の前のクラスセレクタとピリオドは付けません。
◇ソース表示
<P CLASS="centering">丸・三角・四角</P>
また、クラス名は、複数指定が可能です。クラス名とクラス名を半角スペースで区切ります。
▼
複数指定のアイテムとしたスタイルシートのソース
.bsc2 { background-color : #FFCCCC ; }
▼
クラス名"p.centering"と"bsc2"を適用した作例
◇ソース表示
<P CLASS="centering bsc2">丸・三角・四角</P>
応用：スタイルシートのクラス名をP要素とSPAN要素に適用
>◇ソース表示（クラス名"bsc"のソース省略）
<P CLASS="centering bsc">
<SPAN CLASS="bsc2">丸・三角・四角</SPAN></P>
■当サイトの至る所に出没する赤いテキスト文字の設定紹介
（カラー・サイズ・フォント名・太さ・フォント周りの領域をまとめて設定しています。）
.aka {
color : #FF6699 ;
font-size :12px ;
font-family : 'ＭＳ Ｐゴシック', Verdana, sans-serif ;
font-weight : normal ;
padding : 0px ;
}
▼
未知の苦HTML解道 >> 未知の苦HTML解道
◇ソース表示
<P><SPAN CLASS="aka">未知の苦HTML解道</SPAN></P>
▼
|←←←←←←←←← 要 素 →→→→→→→→→→|
↓ブロックレベル要素（P要素） ↓要素内容
<P><SPAN CLASS="aka">未知の苦HTML解道</SPAN></P>
↑インラインレベル要素（span要素）
|←←属 性→→|
|←値→|
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 |
インターネットやコンピュータの話 | HTMLの説明 >>
簡単なHTMLの説明 | ２文書の骨格となる基本要素 >>
文書の骨格をかたちづくる基本要素 | ブロックとインライン >>
ブロックレベル要素とインライン要素
|
