１２．ボーダーを指定をするスタイルシート
　１）ボーダーをスタイルを一括で設定する。
　　①ボーダー枠を一括で指定する。
　　　＜書式１＞border:ボーダーの太さ△ボーダーのスタイル△ボーダーの色　　順番は関係ない。
　　　＜書式２＞border-width:ボーダーの太さ;
　　　　　　　　border-style:ボーダーのスタイル;
　　　　　　　　border-color:ボーダーの色;

  

    
属性

    
値

    
機能

  

  

    ｂｏｅｄｅｒ－ｃｏｌｏｒ
    ＃RRGGBB
    色を１６進数を２桁で指定する。
  

  

    ＃RGB
    色を１６進数を１桁で指定する。
  

  

    ｒｇｂ（Ｒ，Ｇ，Ｂ）
    色を１０進数で指定する。
  

  

    ｒｇｂ（Ｒ％，Ｇ％，Ｂ％）
    色を％で指定する。
  

  

    カラーネーム
    定義された色名で指定する。
  

  

    システムカラー名
    ＯＳで定義された色名で指定する。
  

  

    ｂｏｒｄｅｒ－ｗｉｄｔｈ
    ピクセル値
    太さを指定する。
  

  

    ｔｈｉｎ
    細い線を指定する。
  

  

    ｍｅｄｉｕｍ
    中ぐらいの線を指定する。（初期値）
  

  

    ｔｈｉｃｋ
    太い線を指定する。
  

  

    ｂｏｒｄｅｒ－ｓｔｙｌｅ
    ｎｏｎｅ
    表示しない。（他の値に優先される。初期値）
  

  

    
    ｈｉｄｄｅｎ
    表示しない。
  

  

    
    ｓｏｌｉｄ
    １本線で表示する。
  

  

    
    ｄｏｕｂｌｅ
    ２本線で表示する。
  

  

    
    ｇｒｏｏｖｅ
    へこんで見えるように表示する。
  

  

    
    ｒｉｄｇｅ
    飛び出して見えるように表示する。
  

  

    
    ｉｎｓｅｔ
    枠の内側がへこんで見えるように表示する。
  

  

    
    ｏｕｔｓｅｔ
    枠の内側が飛び出して見えるように表示する。
  

  

    
    ｄａｓｈｅｄ
    破線で表示する。
  

  

    
    ｄｏｔｔｅｄ
    点線で表示する。
  



     ＜例１＞
　　　　　　<html>
            <head>
            <title>ボーダー枠を一括で指定する。</title>
            <style type="text/css">
            <!--
              .all{background-color:red;
                   border:8px dashed olive;
                   width:300pt;
                   color:crimson;
                   text-align:center;
                  }
            -->
            </style> 
            </head>
            <body>
            <h1 class="all">今日も雨なんだね。</h1>
            </body>
            </html>


     ＜例２＞
　　　　　　<html>
　　　　　　<head>
　　　　　　<title>ボーダー枠を一括で指定する。</title>
　　　　　　<style type="text/css">
　　　　　　<!--
　　　　　　　.all{background-color:red;
　　　　　　　　　 border-width:8px;
                   border-style:dashed;
                   border-color:olive;
                   width:300pt;
                   color:crimson;
                   text-align:center;
                  }             
            -->
            </style> 
            </head>
            <body>
            <h1 class="all">今日も雨なんだね。</h1>
            </body>
            </html>


　　②ボーダーの枠の属性（スタイル、色、太さ）を枠の辺ごと（ｔｏｐ、ｂｏｔｔｏｍ、ｒｅｇｈｔ、ｌｅｆｔ）に指定する。
　　　＜書式＞border-top:ボーダーの太さ△ボーダーのスタイル△ボーダーの色　　順番は関係ない。枠の上の部分の指定をする。
              border-bottom:ボーダーの太さ△ボーダーのスタイル△ボーダーの色　　順番は関係ない。枠の下の部分の指定をする。
              border-rightボーダーの太さ△ボーダーのスタイル△ボーダーの色　　順番は関係ない。枠の右の部分の指定をする。
              border-left:ボーダーの太さ△ボーダーのスタイル△ボーダーの色　　順番は関係ない。枠の右の部分の指定をする。
　　　＜例＞
　　　　　　<html>
　 　　　　 <head>
            <title>ボーダーの枠の属性（スタイル、色、太さ）を枠の辺ごと（ｔｏｐ、ｂｏｔｔｏｍ、ｒｅｇｈｔ、ｌｅｆｔ）に指定する。</title>
            <style type="text/css">
            <!--
              .midasi{
                      border-left:orange 20px solid;
                      border-bottom:orange 1px solid;
                      color:crimson;
                      font-family:ＭＳ ゴシック;
                      font-size:24pt;
              }
            -->
            </style> 
            </head>
            <body>
            <h1 class="midasi">創造（ｔｓｕｋｕｒｕｚｏ．ｃｏｍ）</h1>
            </body>
            </html>
　
　　③ボーダーの枠をそれぞれ個別に指定する。
　　　＜書式＞border-top-style:ボーダーのスタイル   上辺のボーダーのスタイル
              border-top-color:ボーダーの色　　上辺のボーダーの色
　　　　　　　border-top-width:ボーダーの太　　上辺のボーダーの太さ

　　　　　　　border-bottom-style:ボーダーのスタイル   下辺のボーダーのスタイル
              border-bottom-color:ボーダーの色　　下辺のボーダーの色
　　　　　　　border-bottom-width:ボーダーの太　　下辺のボーダーの太さ

　　　　　　　border-left-style:ボーダーのスタイル   左辺のボーダーのスタイル
              border-left-color:ボーダーの色　　左辺のボーダーの色
　　　　　　　border-left-width:ボーダーの太　　左辺のボーダーの太さ

　　　　　　　border-right-style:ボーダーのスタイル   右辺のボーダーのスタイル
              border-right-color:ボーダーの色　　右辺のボーダーの色
　　　　　　　border-right-width:ボーダーの太　　右辺のボーダーの太さ

　　　＜例＞
　　　　　　<html>
　 　　　　 <head>
            <title>ボーダー枠を辺ごと指定する。</title>
            <style type="text/css">
            <!--
              .top{
                   background-color:pink;
                   border-top-style:solid;
                   border-top-color:green;
                   color:crimson;
                   font-family:ＭＳ ゴシック;
                   font-size;24pt;
                   text-align:center;
                   width:300pt
              }

              .bottom{
                      background-color:pink;
                      border-bottom-style:solid;
                      border-bottom-color:green;
                      color:crimson;
                      font-family:ＭＳ ゴシック;
                      font-size;24pt;
                      text-align:center;
                      width:300pt
              }

              .left{
                    background-color:pink;
                    border-left-style:solid;
                    border-left-color:green;
                    color:crimson;
                    font-family:ＭＳ ゴシック;
                    font-size;24pt;
                    text-align:center;
                    width:300pt
              } 

              .right{
                     background-color:pink;
                     border-right-style:solid;
                     border-right-color:green;
                     color:crimson;
                     font-family:ＭＳ ゴシック;
                     font-size;24pt;
                     text-align:center;
                     width:300pt
              } 
            -->
            </style> 
            </head>
            <body>
            <h1 class="top bottom left right">今日も雨なんだね。</h1>
            </body>
            </html>

　２）次の表示になるようにしなさい。


　　　
今日は、いい天気ですね。