ホームページをつくろう！

枠線

スタイルの指定方法

border-style : ☆ ;

枠線のデザインの指定をします。☆には次のような値が指定できます。none(なし)、solid(実線)、dotted(点線)、dashed(粗い点線)、double(二重線)、groove(谷線)、ridge(山線)、inset(内線)、outset(外線)

border-width : ☆ ;

枠線の太さを指定できます。

border-color : ☆ ;

枠線の色の指定ができます。カラーチャート

border : ○ △ □ ;

枠線のデザインを一括指定できます。○には、widthの値。△にはstyleの値。□にはcolorの値が入ります。

border-top : ;
border-bottom-style :  ;
border-right-width : ;
border-left-color : ;

上下左右を指定して枠線のデザインが指定できます。「border」の後に、top(上)、bottom(下)、right(右)、left(左)を加えることで指定できます。

サンプル

border-width : 1px ;
border-style : solid ;
border-color : black ;

border-width : 2px ;
border-style : solid ;
border-color : black ;

border-width : 3px ;
border-style : solid ;
border-color : black ;

border-width : 3px ;
border-style : double ;
border-color : black ;

border-width : 4px ;
border-style : double ;
border-color : black ;

border-width : 5px ;
border-style : double ;
border-color : black ;

border-width : 1px ;
border-style : dotted ;
border-color : black ;

border-width : 2px ;
border-style : dotted ;
border-color : black ;

border-width : 3px ;
border-style : dotted ;
border-color : black ;

border-width : 1px ;
border-style : dashed ;
border-color : black ;

border-width : 2px ;
border-style : dashed ;
border-color : black ;

border-width : 3px ;
border-style : dashed ;
border-color : black ;

border-width : 1px ;
border-style : groove ;
border-color : black ;

border-width : 2px ;
border-style : groove ;
border-color : black ;

border-width : 3px ;
border-style : groove ;
border-color : black ;

border-width : 5px ;
border-style : groove ;
border-color : black ;

border-width : 1px ;
border-style : ridge ;
border-color : black ;

border-width : 2px ;
border-style : ridge ;
border-color : black ;

border-width : 3px ;
border-style : ridge ;
border-color : black ;

border-width : 5px ;
border-style : ridge ;
border-color : black ;

border-width : 1px ;
border-style : inset ;
border-color : black ;

border-width : 2px ;
border-style : inset ;
border-color : black ;

border-width : 3px ;
border-style : inset ;
border-color : black ;

border-width : 1px ;
border-style : outset ;
border-color : black ;

border-width : 2px ;
border-style : outset ;
border-color : black ;

border-width : 3px ;
border-style : outset ;
border-color : black ;

枠線の色を変える

border-color : black ;

の部分を好きな色に変えてください。カラーチャート

border-width : 3px ;
border-style : dashed ;
border-color : red ;

好きな部分の枠線のデザインを変える

上下左右の部分ごとにデザインを変えることもできます。

border-left-style : solid ;
border-left-color : red ;
border-left-width : 10px ;

border-right-style : solid ;
border-right-color : red ;
border-right-width : 5px ;

border-top-style : solid ;
border-top-color : blue ;
border-top-width : 5px ;

border-bottom-style : solid ;
border-bottom-color : blue ;
border-bottom-width : 5px ;

border-left-style : solid ;
border-left-color : red ;
border-left-width : 10px ;
border-right-style : solid ;
border-right-color : red ;
border-right-width : 5px ;
border-top-style : solid ;
border-top-color : blue ;
border-top-width : 5px ;
border-bottom-style : solid ;
border-bottom-color : blue ;
border-bottom-width : 5px ;