ボックスの構造
みいと
おじさんのWEBデザイン学習まとめ
ボーダーは線種、太さ、色を上下左右それぞれに対して設定することができます。
ボーダーの線種を設定するには下記のプロパティを使用します。
border-style | ボックスの上下左右のボーダーの線種を設定できます。 |
---|---|
border-top-style | ボックスの上のボーダーの線種を設定できます。 |
border-bottom-style | ボックスの下のボーダーの線種を設定できます。 |
border-left-style | ボックスの左のボーダーの線種を設定できます。 |
border-right-style | ボックスの右のボーダーの線種を設定できます。 |
値には下記のキーワードを設定します。
none | ボーダーを非表示にします。 table要素と線種が競合した場合は他の値が優先されます。 |
---|---|
hidden | ボーダーを非表示にします。 table要素と線種が競合した場合はこの値が最優先されます。 |
solid | 実線 |
double | 二重線 |
dotted | 点線 |
dashed | 破線 |
groove | 溝っぽい線 |
ridge | 盛り上がって見える線 |
inset | 内側が低く見える線 |
outset | 内側が高く見える線 |
実際の使用例は下記のようになります。
div.sample{border: solid;}
ボーダーの太さを設定するには下記のプロパティを使用します。
border-width | ボックスの上下左右のボーダーの太さを設定できます。 |
---|---|
border-top-width | ボックスの上のボーダーの太さを設定できます。 |
border-bottom-width | ボックスの下のボーダーの太さを設定できます。 |
border-left-width | ボックスの左のボーダーの太さを設定できます。 |
border-right-width | ボックスの右のボーダーの太さを設定できます。 |
単位付きの数値とキーワードが指定できます。
キーワードは下の表の3つがあります。
thin | 細い線 |
---|---|
medium | 普通の線 |
thick | 太い線 |
実際の使用例は下記のようになります。
div.sample{border-width: 1px;}
単位付きの数値についてはこちらの記事で説明しています。
ボーダーの色を設定するには下記のプロパティを使用します。
border-color | ボックスの上下左右のボーダーの色を設定できます。 |
---|---|
border-top-color | ボックスの上のボーダーの色を設定できます。 |
border-bottom-color | ボックスの下のボーダーの色を設定できます。 |
border-left-color | ボックスの左のボーダーの色を設定できます。 |
border-right-color | ボックスの右のボーダーの色を設定できます。 |
実際の使用例は下記のようになります。
div.sample{border-color: red;}
色の指定方法はこちらの記事でまとめています。
ボーダーの線種、太さ、色を一括で設定するには下記のプロパティを使用します。
border | ボックスの上下左右のボーダーの線種・太さ・色を設定できます。 |
---|---|
border-top | ボックスの上のボーダーの線種・太さ・色を設定できます。 |
border-bottom | ボックスの下のボーダーの線種・太さ・色を設定できます。 |
border-left | ボックスの左のボーダーの線種・太さ・色を設定できます。 |
border-right | ボックスの右のボーダーの線種・太さ・色を設定できます。 |
線種、太さ、色は半角スペースで区切って、必要なものだけを順不同で指定することができます。
div.sample{border: solid 1px red;}
今回はボーダーの設定方法をまとめました。
基本的には線種・太さ・色を一括で設定するプロパティを使うことができれば問題ないと思います。