文字をデザインする

スタイルシートを使って文字装飾を行います。

　　この文字をクリックするとサンプルダウンロード出来ます。

文字コンテンツを入力する　←　｜　→　トップメニューを作成する

ここからスタイルシートが登場します。
名前はstyle-css.cssです。　メモ帳で入力して保存して下さい。

●　先ず、参照するスタイルシート名をhtmlソースに追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
　<head>
　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
　　<title>野辺山高原の四季おりおりをお伝えします</title>
　　<link rel="stylesheet" type="text/css" href="style-css.css" media="screen,tv" />
　　↑この１行を追加します。スタイルシート名は緑色の部分です。

　</head>

●　スタイルシートに入力します。

装飾する文字は　「見出し」　「本文」×２箇所　「コピーライト」　です。

スタイルシートに以下を記述します。入力が終わったらstyle-css.cssを上書き保存して下さい。

h1　　　{　font-size: 1.5em; 　←　文字の大きさ
　　　　　　font-family: Verdana, Helvetica, sans-serif; 　←　文字の種類
　　　　　　color: #000000; 　←　文字の色
　　　　　　margin-bottom: 0;　}　←　下境界からの距離

p　　　　　{　font-size: 0.75em;　}　←　文字の大きさ

address　{　font-size: 0.75em;　←　文字の大きさ
　　　　　　　font-style: normal;　}　←　文字のスタイル

左端のh1、p、addressは、html中のこのタグ全てに適用される事を表します。
pタグはhtml中に何回も使われますが、この例では全てのpタグに適用されます。

①　デザイン設定のルール

　　

　・セレクタはデザイン設定の適用先を表します。

　・デザイン設定は｛　｝　で囲む。
　・デザイン設定の終了マークは　；　
　・プロパティは後ろに　：　を付け、その後に　値　を記述する。
　・デザイン設定を複数記述する場合には区切り記号として半角ブランクを使う。
　
セレクタ、プロパティ、値　や　｛　、｝　の前後に半角ブランクはいくつ有ってもかまいません。
又、１つ１つ改行を何個入れても構いません。
通常は見やすくする為、半角ブランク、改行を多用します。

デザイン設定の種類、プロパティ・値は、膨大な数になる為、説明し切れません。
第３章のリファレンス、本で調べて下さい。

②　例題の説明

　・font-size　文字の大きさを指定します。
　　em（割合）　px（ピクセル数、ドット数）や、small、largeを値で指定します。
　　デフォルトは16pxです。

　・font-family　文字の書体を第１候補から、第n候補まで指定します。
　　ＭＳ　Ｐゴシック、ＭＳ　Ｐ明朝　などを値で指定します。

　・color　文字色を指定します。
　　値は色名称や16進数の色コードで指定します。
　　red、green、cyanなどの色名称、色コードは＃RRGGBBで指定します。
　　＃　：　１６進数の宣言
　　RR　：　RGBの赤を０～255の数値を16進数で表現したもの
　　GG　：　RGBの緑を０～255の数値を16進数で表現したもの
　　BB　：　RGBの青を０～255の数値を16進数で表現したもの

　・margin-bottom　下にあるコンテンツ境界と自コンテンツの境界までの距離を指定。（略）

　・font-style　文字のスタイル指定です。値の代表は
　　italic　イタリック体
　　oblique　斜体
　　normal　通常の形

　　
サンプルの表示イメージです。まだまだこれからですね。

　　ルール