エアロビのインストラクターはスタイル抜群。羨望のまなざしで見つめるエアロビ教室の生徒たち。
生徒たちは全員、体脂肪、体内脂肪がタップリの見事なBODY。
それがあっという間に、スリムな美しいプロポーションに。▼もうお解りですネ！

エアロビのインストラクター＝CSS（スタイルシート）
エアロビ教室の生徒たち＝サイト内複数ページ
生徒たちのBODY＝HTML構文内にすべてを記述
あっという間にスリム＝重複する設定をCSSに移行

トップページだけのホームページなら、HTML構文内にすべての設定を記述するでしょうが、通常はサイト内を複数のページで
構成しています。サイト内ページの「表題は赤色にする」「TABLEの枠は青色にする」等の設定をまとめて記述する方法がCSSです。
例えば「表題は赤色」の設定を "a" という名称にしたとします。HTML構文内にその設定を読み込むときは "CLASS属性"を使って
<・・・CLASS= "a">表題は赤色</・・・>と記述します。「・・・」は用途により「SPAN、DIV、 P」等のタグ。

▼当サイトにおける文字色のCSS設定（抜粋）▼

　.iro2
　{color:#FF6699;
　 font-size:10pt; 　 font-family: "Verdana","Chicago", "Arial";
　 padding:0px;}

▼当サイトの至る所で出没する赤文字は▼のように"iro2"のCLASS名称にしています。▼

・・・キーワードは「エアロビのインストラクター」・・・

文字周り（サイズ、太さ、色）等の設定をHTML構文内に記述してもいいのですが、当サイトは外部CSS
（スタイルシート）にまとめています。外部からの読み込みを、リンキングスタイルシートと呼びます。
HTMLヘッダに<LINK REL="STYLESHEET" TYPE="text/css" HREF="半角英数字のファイル名.css">と記述します。
このページをソース表示にすると判りますが、当サイトは "css1.css" としています。

　◆　当サイトの場合　◆

文字周りのCSS設定	説　明　と　補　足
body{
background-color:#FFFFFF;	テキストの背景色
color: #4A76A2;	基本とする文字色
font-family: Verdana;	フォントの種類　serif=Times New Roman等、sans-serif=MS Verdana、平成角ゴシック等
font-size: 12px;	文字サイズ
font-weight: lighter;	文字の太さ　bolder　<<　bold　 <<　normal　>>　lighter
}

　▲のように設定していることを前提に、ひとつ前のページは所々装飾を加え▼のようになります。

HTMLの基準となるフォントサイズ（文字の大きさ）の指定には
「絶対値指定」・x-small ・small ・medium ・large ・x-large ・xx-large
「相対値指定」・larger ・smaller
「1から7」までの「数値指定」
「pt ・mm ・％」等の「単位措定」
の方法があり、例えば数値指定の場合、サイズ指定がなければ「標準値＝3」です。フォント（書体）はユーザーが任意に設定。
ユーザーが設定したフォントがない場合は、ブラウザに設定されたデフォルトのフォントで表示されます。▼作例は数値指定です。▼

フォントサイズ＝1の場合▼
HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

ソース表示（▼記述のポイントを赤文字にしています▼）

HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

フォントサイズ指定なし（標準値=3）の場合▼
HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

ソース表示（▼フォントサイズの指定がないのでタグは不要▼）

HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

フォントサイズ＝5の場合▼
HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

ソース表示（▼記述のポイントは赤文字。ソース表示の記述は、比較の意味で「FONT SIZE="2"」としています。▼）

HTML Rule Memor@ndum ** HTMLルール備忘録　スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え・・・「未知の苦HTML解道」つまず紀行！

当サイトの場合、フォントサイズは外部CSS （スタイルシート）に「font-size: 12px;」とピクセル単位にしています。
改行タグ を所々に入れ、文章の体裁を直してみます。▼

HTML Rule Memor@ndum **
HTMLルール備忘録
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え
・・・「未知の苦HTML解道」つまず紀行！

ソース表示（▼フォントサイズの指定がないので改行タグ 以外のタグは不要▼）

HTML Rule Memor@ndum **  
HTMLルール備忘録 
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え 
・・・「未知の苦HTML解道」つまず紀行！

次に、フォントカラーをブルー系に、サイト名を太字で大きく、サブタイトルを他の色に変え、コメントを斜体にしてみます。▼

HTML Rule Memor@ndum **
HTMLルール備忘録
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え
・・・「未知の苦HTML解道」つまず紀行！

▼最初にタグを分別して説明します▼

文頭から文末までのフォントカラーの指定

　・・・"#3366FF" はカラーコード名・・・

文字の装飾指定

<BIG>文字を強調して大きく</BIG>

文章途中の文字色

文字色を変えたい箇所の色

　・・・"#CC3366" はカラーコード名・・・

文字の書体指定（作例の"EM"タグは本来強調タグですが「斜体」になります。）

斜体の場合、論理的タグは"EM"　
　・・・"I"は物理的フォントタグ

▼ソース表示▼

<BIG>HTML Rule Memor@ndum **</BIG> 
HTMLルール備忘録 
スクリプトエラー警告雨嵐、テーブル迷路で右往左往、手探り書き分けその先は、スタイルシートで難所越え 
・・・「未知の苦HTML解道」つまず紀行！

スタイルシートの成果により、ひとつ前のページに比べ、だいぶ読みやすくなったと思いませんか？

<<　BACK　　NEXT　>>TABLEとBORDER

　Home　