borderとは？
borderとは、一言で言うと「枠線」のことです。それぞれのタグやクラスなどにborderを設定することで色々なデザインを作ることが出来ます。
borderの基本的な設定方法
borederのCSS設定では、上下左右に個別に枠線の種類・太さ・色を設定することができます。枠線の位置の部分はそれぞれ「上=top」「下=bottom」「左=left」「右=right」と記入すればOKです。
＜各種設定方法＞
【枠線の種類の設定】
border-style:線種指定
【枠線の太さの指定】
border-width:数値入力
【枠線の色の設定】
border-color:色指定
枠線の種類の設定については、線種指定をするのに特殊な記述が必要です。それを下の表にまとめたので参考にしてみてくださいね。
| CSS記述 | 説 明 |
|---|---|
| none | 枠線表示無し(初期設定値です) |
| solid | 1本の直線で枠線が表示されます。一番ポピュラーかも |
| double | 2本線で枠線が表示されます。 |
| dotted | 点線の枠線が表示されます。 |
| dashed | 破線の枠線が表示されます。 |
| groove | 立体的に、くぼんだような枠線が表示されます。 |
| ridge | 立体的に、ふくらんだような枠線が表示されます。 |
| inset | 上と左の枠線は暗めに、下と右の枠線が明るめに表示され、全体的にくぼんだような感じで表示されます。 |
| outset | 上と左の枠線は明るめに、下と右の枠線は暗めに表示され、全体的にふくらんだような感じで表示されます。 |
それぞれの表示サンプルはコチラ。
これを「線種指定」と書いてある部分に記述すればOKです。
【記述例①】
<!--幅1px・solidの黒い枠線を表示--!>
.sample1{
border-style:solid;
border-width:1px;
border-color:#000000;
}
【記述例②】
<!--幅3px・doubleのオレンジ(#FFA500)を表示--!>
.sample2{
border-style:double;
border-width:3px;
border-color:#FFA500;
}
個別にborderを設定する
borderは上下左右に対して、それぞれ個別に設定することが出来ます。
<各種設定方法>
【枠線の種類の設定】
border-borderの位置-style:線種指定
【枠線の太さの指定】
border-borderの位置-width:数値入力
【枠線の色の設定】
border-borderの位置-color:色指定
全種指定のCSSの真ん中にborderを表示させたい位置を指定してあげます。
「上=top」
「下=bottom」
「左=left」
「右=right 」
これで個別にborderの指定をすることができます。
【記述例①】
<!--左に線種：solid・線幅：5px・色：#FFA500(オレンジ)のborder--!>
.sample1{
border-left-style:solid;
border-left-width:5px;
border-left-color:#FFA500
}
表示サンプルはこちら
【記述例②】
<!--上下に線種：double・線幅：3px・色：#008000(グリーン)のborder--!>
.sample2{
border-top-style:double;
border-bottom-style:double;
border-top-width:3px;
border-bottom-width:3px;
border-top-color:#008000;
border-bottom-color:#008000
}
表示サンプルはこちら
【記述例③】
<!--左に線種：solid・線幅：10px・色：#008000(グリーン)のborder
下に線種：double・線幅：3px・色：#003300(濃いグリーン)のborder--!>
.sample3{
border-left-style:solid;
border-bottom-style:double;
border-left-width:10px;
border-bottom-width:3px;
border-left-color:#008000;
border-bottom-color:#003300
}
表示サンプルはこちら
