枠線の設定も、ページ全体又は表(テーブル)のみと思われがちですが、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に変えて指定。
※左側の枠線のみ表示&太くして下のようにアイコンのようにみせかけることも可能。(上の指定例がこれです)