「スタイルシート」を使おう(使ってみよう)
H16年3月1日
ホームページのスタイルを制御する規格の一つに「スタイルシート」があります。
スタイルシートではページの基本部分である次の部分を指定することが出来ます。
 @ 「フォント」 フォントの種類(windowsの標準の物)・サイズ・色・行間
          特に行間の指定は「スタイルシート」のみです。
 A 「リンク文字色」 標準時・訪問済み・クリック時・カーソル通過時の指定が出来ます。
 B 「背景設定」  背景色・背景画像の指定が出来ます、特に背景画像は「固定」することが出    来ます。
 C 「スクロールバー」に色を付けることが出来ます。 
 D 「マウスカーソル」の形状を、通常時・リンク文字上でそれぞれ指定できます。

「スタイルシート」の作成はHPB上にも既製品がありますが、フリーソフトで「Easy CSS」と
言うソフトが便利なので、今回はこれで説明します。 
   「EasyCSS」は此処をクリックして下さい、「css101.lzh」と言うファイルですので、任意の
   場所に「フォルダー」を作りそこで解凍して下さい。
 生成された「EasyCSS.EXE」が実行ファイルですのでショートカットを画面上にまず作りましょう。

 続いて作成した「EasyCSS.EXE」をダブルクリックして起動してみましょう(^_-)
これが起動画面です、必要とするそれぞれの項目に数値や色を指定していきます。
そして最後に、「ソース生成」をクリックすると、ソースが画面に表示されますので「コピー」
ボタンを押して、使いたい「HTML」の</head>の直前に貼り付けて完了となります。
作成編
「スタイルシート」で最初に基本的な部分を指定します、指定した都度右上の
「BrowserPreview」にプレビュー表示されます、未入力は「ディフォルト」が使用されます。
1 「文字」
 @ 「文字色」の直ぐ右側の□にマウスを置くと、マウスポインターが「スポイト」に変わりま
   すのでその状態でクリックで「色の指定画面」が表示されます、此処で任意の色を指定し
   て「OK」をクリックします、直ぐ右側に「6桁の色コード」が表示されます。
 A 「フォント」の右側にある▼ををクリックして表示されるフォント(これWINDOWS標準
   フォントのみです)から使用するフォントを選択します、画面に使用するフォントが表示
   されます。
 B 「大きさ」 右側の▼をクリックして指定します、プレビューで確認して決めて下さい。
 C この行間の指定が「スタイルシート」のポイントです(^_-)
   数値が大きくなるほど行間が広がります、「25」から「30」程度ではないでしょうか??

2 「リンク文字」 
   Windowsの標準では「標準時=青」・「訪問済み=エンジ」です。
 @ 「通常時」 □をクリックして文字色を指定します。
 A 「訪問済み」  上に同じ
 B 「クリック時」  上に同じ
 C 「カーソル通過時」  上に同じ   それぞれプレビューで確認して下さい

3 「背景設定」
 @ 「背景色」 □をクリックして、表示される色の指定画面から色を指定して下さい、
   右側にカラーコード番号が表示されます。
 A 「背景画像」を使用する場合は、「参照」をクリックして、背景に使用する画像ファイル
   を指定します。
   背景画像を指定すると、その下の「背景画像の繰り返し」・「背景画像の固定」・
   「背景画像の位置指定」が行えます。

4 「スクロールバー」 画面右側のスクロールバーに色々な色を指定できます。
 @ 「バーの左端と上端の色」 □をクリックして色を指定します。
 A 「矢印の色」           上に同じ
 B 「バーのベース色」       上に同じ
 C 「バーの右端と下端の色」   上に同じ
 D 「バーの表面の色」       上に同じ
 E 「バーのハイライトの色」    上に同じ
 F 「バーの陰の色」        上に同じ

5 「マウスカーソルの形状」
 @ 「画面上」 ▼をクリックしてカーソルの形状を指定します。
 A 「リンク文字上」        上に同じ

6 もし指定が間違えたならば「クリア」をクリックして下さい、但し全部クリヤーされてしまい
  ますので最初からやり直しとなります(@_@)


7 これで完成となりましたならば、「ソース生成」をクリックします、次の画面が表示されます。
此処で画面下部にある「コピー」をクリックします、そしてスタイルシートを適用したい「HTM」をホームページビルダー等でソース部分を表示させ、</head>の直前にコピーして下さい。

 但しホームページビルダーでは「プレビュー」画面でないと確認は出来ませんので
 ご注意下さい。


  以上で終わりです、このページにもスタイルシートを適用してあります(@_@)

  
「サンプル」へ