1. スタイルを指定する方法
    1. HTMLファイル内にスタイルを記述
      <HTML>
      <HEAD>
      <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
      <META http-equiv="Content-Style-Type" content="text/css">
      <style type="text/css">

      スタイルの指定

      </style>
      <TITLE>ホームページのタイトル</TITLE>
      </HEAD>
      <BODY bgcolor="000000" text="ffffff" link="008000" vlink="008000" alink="ff0000">

      ホームページに表示する内容


      </BODY>
      </HTML>

    2. スタイル・ファイル（名前.css）を使用する
      <HTML>
      <HEAD>
      <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
      <META http-equiv="Content-Style-Type" content="text/css">
      <LINK href="スタイルファイル.css" rel="stylesheet" type="text/css">
      <TITLE>ホームページのタイトル</TITLE>
      </HEAD>
      <BODY bgcolor="000000" text="ffffff" link="008000" vlink="008000" alink="ff0000">

      ホームページに表示する内容


      </BODY>
      </HTML>

    3. タグ毎に指定する
      <HTML>
      <HEAD>
      <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
      <META http-equiv="Content-Style-Type" content="text/css">
      <TITLE>ホームページのタイトル</TITLE>
      </HEAD>
      <BODY bgcolor="000000" text="ffffff" link="008000" vlink="008000" alink="ff0000">

      ホームページに表示する内容

      <タグ style="項目;項目;…;">

      </BODY>
      </HTML>
    4. a〜cを組み合わせる
  2. スタイルの記述（a〜bの場合）
    1. タグについて指定する
      タグ
      {
      スタイルの指定
      }
      タグを記述すれば、スタイルが反映される
      下の例では<P>〜</P>の部分
      P
      {
        text-align:left;/* 表示エリア内のテキストの配置 */
        font-family:"ＤＦ行書体";/* フェイス（書体） */
        font-size:14pt;/* フォントの大きさ */
        line-height:20pt;/* テキストの高さ */
      }

    2. タグに共通して、スタイルを指定する
      .スタイル名
      {
      スタイルの指定
      }
      使用時はタグに class="スタイル名"を付ける
      下の例では<P>〜</P>の部分
      <HEAD>
      <META http-equiv="Content-Type" content="text/html; charset=x-sjis">
      <META http-equiv="Content-Style-Type" content="text/css">
      <style type="text/css">
       .large
      {
        font-size:24pt;/* フォントの大きさ */
        line-height:36pt;/* テキストの高さ */
      }
      </style>
      </HEAD>
      <BODY>
       　　：
      <font class="large">
      この部分の文字が　24pt　になる
      </font>
      　　：
      <p class="large">
      この部分の文字も　24pt　になる
      </font>
      　　：
      </BODY>

  3. スタイルの指定項目（抜粋）
    1. 共通の項目
      周囲の余白（上下は反映しないものもある）
      margin-left左マージン
      margin-right右マージン
      margin-top上マージン
      margin-bottom下マージン
      絶対単位指定10in／10cm／10mm／10pt／10pc
      相対単位指定10px／10ex／10em
      割合指定30%
      10em ... 文字の高さを基準とした1文字分の長さ（emは文字Mの大きさに由来）
      10ex ... 文字xの高さ
      10px ... 10ピクセル

      10in ... 10インチ（1in=2.54cm）
      10cm ... 10センチメートル（1cm=10mm）
      10mm ... 10ミリメートル（10mm=1cm）
      10pt ... 10ポイント（1pt=1/72in）
      10pc ... 10パイカ（1pc=12pt）
      ポジショニング
      positionポジショニングの方法
      static（既定値：本来の位置）
      relative（本来の位置からの相対位置指定）
      absolute（絶対位置指定）
      fixed（絶対位置に固定）
      inherit（継承）
      top
      left
      bottom
      right      		上端、左端、下端、右端からの距離
      絶対単位指定10in／10cm／10mm／10pt／10pc
      相対単位指定10px／10ex／10em
      割合指定30%
      自動（既定値） auto
      継承inherit
      <img src="momo.gif" style="position:relative; top:100px; left:400px">
      背景
      background-color背景色
      このセルは、style="background-color : ffaaff;"
      background-image背景画像の使用
      url(背景画像)
      none（既定値：画像なし）
      inherit（継承）を指定
      background-repeat背景画像の並べ方
      repeat（既定値：敷き詰める）
      repeat-x（横方向のみ並べる
      repeat-y（縦方向のみ並べる）
      no-repeat（ひとつだけ表示する）
      inherit（継承）
      background-attachmentスクロールを動かした時の背景の動作(BODYタグ）
      scroll（既定値：一緒にスクロール）
      fixed（スクロールしない）
      inherit（継承）
      このセルは、
      style="background-image : url(./bk03.jpg) ; background-repeat : repeat;"
      background背景をまとめて設定
      このセルは、style="background : url(./bk03.jpg) repeat-y ;"
      注）黒はこの表のデフォルトの背景色
      このセルは、style="background : url(./bk03.jpg) repeat-y aaffcc ;"
      注）水色は<TD>のデフォルトの背景色
      このセルは、style="background : aaffcc ;"
      注）水色は<TD>のデフォルトの背景色
      フォント・テキスト
      font-familyフェイス（書体）
      font-sizeフォントの大きさ
      line-heightテキストの高さ
      絶対指定xx-small／x-small／small／medium（既定値）／
      large／x-large／xx-large
      相対指定larger／smaller
      絶対単位指定10in／10cm／10mm／10pt／10pc
      相対単位指定10px／10ex／10em
      割合指定120%
      text-decorationテキストの装飾
      none（何もなし）
      underline（下線）
      overline（上線）
      line-through（打ち消し線）
      blink（点滅）
      inherit（継承）
      text-alignテキストの配置
      left（既定値：左寄せ）
      right（右寄せ）
      center（センタリング）
      justify（両端揃え）
      inherit（継承）

    2. リンク（LINK)
      a:link リンクテキスト
      a:visited 訪問済みリンクテキスト
      a:activeマウスでクリック中のリンクテキスト
      a:hoverマウスをその上に乗せた時
      a:link 
{
  text-decoration : none   ; /* テキストの装飾なし */
  color           : 0000ff ;
}

a:active 
{
  text-decoration : underline ;/* 下線 */
  color           : ff0000 ;
}

a:visited 
{
  text-decoration : line-through ; /* 打ち消し線 */
  color           : 00ff00       ;
}

a:hover 
{
  text-decoration : none ;
  color           : ff00ff    ;
}


      リンクのテスト用ページ

    3. BODYのスクロールバー(Internet Explorer 5.5 以降)
      scrollbar-base-color基本色
      scrollbar-face-color表面の色
      scrollbar-arrow-color▲の色
      scrollbar-shadow-color影の色
      scrollbar-darkshadow-color深い影の色
      scrollbar-3dlight-color3D部分の色
      scrollbar-highlight-color明るい部分の色
      scrollbar-track-colorトラックの色
        scrollbar-base-color       : 000000 ;
  scrollbar-track-color      : 0000ff ; 
  scrollbar-face-color       : 00ff00 ;
  scrollbar-shadow-color     : 00ffff ; 
  scrollbar-darkshadow-color : ff0000 ;
  scrollbar-highlight-color  : ff00ff ;
  scrollbar-3dlight-color    : ffff00 ;
  scrollbar-arrow-color      : ffffff ;




フォントの比較
サンプル・ファイル