12.ボーダーを指定をするスタイルシート
 1)ボーダーをスタイルを一括で設定する。
  ①ボーダー枠を一括で指定する。
   <書式1>border:ボーダーの太さ△ボーダーのスタイル△ボーダーの色  順番は関係ない。
   <書式2>border-width:ボーダーの太さ;
        border-style:ボーダーのスタイル;
        border-color:ボーダーの色;

属性

機能

boeder-color #RRGGBB 色を16進数を2桁で指定する。
#RGB 色を16進数を1桁で指定する。
rgb(R,G,B) 色を10進数で指定する。
rgb(R%,G%,B%) 色を%で指定する。
カラーネーム 定義された色名で指定する。
システムカラー名 OSで定義された色名で指定する。
border-width ピクセル値 太さを指定する。
thin 細い線を指定する。
medium 中ぐらいの線を指定する。(初期値)
thick 太い線を指定する。
border-style none 表示しない。(他の値に優先される。初期値)
hidden 表示しない。
solid 1本線で表示する。
double 2本線で表示する。
groove へこんで見えるように表示する。
ridge 飛び出して見えるように表示する。
inset 枠の内側がへこんで見えるように表示する。
outset 枠の内側が飛び出して見えるように表示する。
dashed 破線で表示する。
dotted 点線で表示する。
<例1>
      <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>



<例2>
      <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>   ②ボーダーの枠の属性(スタイル、色、太さ)を枠の辺ごと(top、bottom、reght、left)に指定する。
   <書式>border-top:ボーダーの太さ△ボーダーのスタイル△ボーダーの色  順番は関係ない。枠の上の部分の指定をする。 border-bottom:ボーダーの太さ△ボーダーのスタイル△ボーダーの色  順番は関係ない。枠の下の部分の指定をする。 border-rightボーダーの太さ△ボーダーのスタイル△ボーダーの色  順番は関係ない。枠の右の部分の指定をする。 border-left:ボーダーの太さ△ボーダーのスタイル△ボーダーの色  順番は関係ない。枠の右の部分の指定をする。
   <例>
      <html>
       <head>
<title>ボーダーの枠の属性(スタイル、色、太さ)を枠の辺ごと(top、bottom、reght、left)に指定する。</title>
<style type="text/css">
<!--
.midasi{
border-left:orange 20px solid;
border-bottom:orange 1px solid;
color:crimson;
font-family:MS ゴシック;
font-size:24pt;
}
-->
</style>
</head>
<body>
<h1 class="midasi">創造(tsukuruzo.com)</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:MS ゴシック;
font-size;24pt;
text-align:center;
width:300pt
}
.bottom{
background-color:pink;
border-bottom-style:solid;
border-bottom-color:green;
color:crimson;
font-family:MS ゴシック;
font-size;24pt;
text-align:center;
width:300pt
}
.left{
background-color:pink;
border-left-style:solid;
border-left-color:green;
color:crimson;
font-family:MS ゴシック;
font-size;24pt;
text-align:center;
width:300pt
}
.right{
background-color:pink;
border-right-style:solid;
border-right-color:green;
color:crimson;
font-family:MS ゴシック;
font-size;24pt;
text-align:center;
width:300pt
}
-->
</style>
</head>
<body>
<h1 class="top bottom left right">今日も雨なんだね。</h1>
</body>
</html>  2)次の表示になるようにしなさい。
   
今日は、いい天気ですね。