ボーダー・枠線
ここでは、ホームページの要素に枠線を表示する方法を紹介します。
border[ボーダー]
ボーダーでは、線の太さ・線のスタイル・色を指定することが出来ます。
CSSでボーダーを指定するにはborderを指定します。
また、太さ・スタイル・色を別々に指定することも可能です。
ボーダーの太さを指定するにはborder-width、スタイルを指定するにはborder-style、色を指定するにはborder-colorを指定します。
線の太さ
| 指定可能値 | 数値＋下記単位, thin(細線), medium(中), thick(太線) |
|---|---|
| 対応単位 | em, ex, px, cm, mm, in, pt, pc |
| [補足]単位説明 | |
線のスタイル
| 指定可能値 | none(線無し), hidden(線非表示), solid(実線), double(二重線), dotted(細かい点線), dashed(荒い点線), groove(谷線), ridge(山線), inset(内線), outset(外線) |
|---|
線の色
| 指定可能値 | カラーコード(#＋16進数3桁 又は #＋16進数6桁), 色名称 |
|---|---|
| [補足]色見本(カラーコード,色名称一覧) | |
また、「上だけにボーダーを表示したい」「左だけに…」というのも出来ます。
CSSで上だけにボーダーを表示するにはborder-top、下だけはborder-bottom、左だけはborder-left、右だけはborder-rightを指定します。
borderと同じく、太さ・スタイル・色を指定できます。
さらに、上ボーダーの太さだけを指定するにはborder-top-width、上ボーダーのスタイルだけはborder-top-style、上ボーダーの色だけはborder-top-colorを指定します。
top部分をbottom, left, rightに変えれば、それぞれの太さ・スタイル・色のみを変えることが可能となります。
記述方法
| CSS記述 | 意味 |
|---|---|
| border:1px solid red; | 上下左右に太さ1pxで実線の赤い枠 |
| border-top:1px solid red; | 上に太さ1pxで実線の赤い線 |
| border-bottom:1px solid red; | 下に太さ1pxで実線の赤い線 |
| border-left:1px solid red; | 左に太さ1pxで実線の赤い線 |
| border-right:1px solid red; | 右に太さ1pxで実線の赤い線 |
| border-width:5px; | 上下左右に太さ5pxの枠 |
| border-style:solid; | 上下左右に実線の枠 |
| border-color:red; | 上下左右に赤い枠 |
| border-top-width:5px; | 上に太さ5pxの線 |
| border-top-style:solid; | 上に実線の線 |
| border-top-color:red; | 上に赤い線 |
| border-bottom-width:5px; | 下に太さ5pxの線 |
| border-bottom-style:solid; | 下に実線の線 |
| border-bottom-color:red; | 下に赤い線 |
| border-left-width:5px; | 左に太さ5pxの線 |
| border-left-style:solid; | 左に実線の線 |
| border-left-color:red; | 左に赤い線 |
| border-right-width:5px; | 右に太さ5pxの線 |
| border-right-style:solid; | 右に実線の線 |
| border-right-color:red; | 右に赤い線 |
[例1]テーブルの各tdセルに太さ1pxの黒い枠を表示する
table td {border:1px solid black;}
[例2]h1タイトルの上下にのみ太さ1pxの灰色点線を表示する
h1 {border-top:1px dotted gray; border-bottom:1px dotted gray;}