枠  線

枠線の設定も、ページ全体又は表(テーブル)のみと思われがちですが、CSSにてボックスとみなした各タグの装飾にも指定可。
カラーリスト(ブラウザ対応色名)
線種リスト 
サイズ指定単位リスト

1.枠線(border)とは


 
※マージン、パディングは、それぞれ四隅(left、right、top、bottom)

各タグは上図のようにボックススタイルを取っていて、そのボックスの中身を囲む境界線を指す。
表のみと思われがちだが、普通に見た感じでは、枠線とは関係ないような見出し(h1,h1,タグ)や水平線(hr)タグ、段落(ptタグ)にも使用可。
表の表示スタイルで大活躍することは確か。

サイズ指定単位リスト

2.枠線で囲む

●四角で囲む
タグ名 {
border-color: 色名;
border-style: solid;
border-width: 太さ(単位);
padding-left: 余白(単位);
padding-right: 余白(単位);
}
タグ名
線の色
線種(スタイル)
線の太さ
中身から左側の余白
中身から右側の余白
}
●使用例

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
padding-right: 2em;
}

※参照:単位リスト
 (太さ、余白の指定数値)

3.四方(上下左右)の枠線を別々に指定

例:左のみ指定
タグ名 {
border-left-color: red;
border-left-style: solid;
border-left-width: 20px;
}

※leftのところを、上の時は、top、下のときは、bottom、右のときは、rightに変えて指定。

※左側の枠線のみ表示&太くして下のようにアイコンのようにみせかけることも可能。(上の指定例がこれです)

 見出し