境界線
(border)
上の黄色地の「境界線(border)」のように、境界線で周囲を囲うことができます。境界の幅や、線の色・形などを指定することができます。
border:値;
境界線の指定する属性には border と border-xxx のようにして細かく設定する方法の二種類があります。先ずは border から説明をします。このページの周囲に薄い境界線が引かれています。この記述は
border:1px solid #DDDDDD;
となっています。border には width style color を同時に指定できます。各指定の間は半角スペースで分けてください。
1px は 1ピクセルの線の太さ
solid は、実線
#DDDDDD は 二桁の16進数で色を表しています。
border:10px solid #DDDDDD;
上は境界線の太さを10ピクセルに指定しました。
境界線のスタイル
下はこのように書かれています。
<span style="border:10px 罫線種;">
罫線種 solid
罫線種 double
罫線種 groove
罫線種 ridge
罫線種 inset
罫線種 outset
罫線種 none
境界線の太さ
下はこのように書かれています。
<span style="border:太さ solid;">
太さ thin
太さ medium
太さ thick
境界線の太さ(単位指定)
下はこのように書かれています。単位は「
長さの単位」を参照してください。
<span style="border:単位 solid;">
単位 2px
単位 2mm
単位 2ex
境界線の色
下はこのように書かれています。単位は「
色の指定」を参照してください。
<span style="border:色 solid;">
色 #FF0000
色 #0F0
色 blue
border-xxx:値;
先ほどまではborder:1px solid #DDDDDD;のように、線の太さや種類、色を一度に指定をしていました。この方法以外にも境界線の指定方法があります。
(1)境界線の種類 (2)左を太く右を細く
border だけではできなかった、細かい指定ができます。(1)では上下左右の境界線の色を変えて、境界線の外にも更に境界線を指定してみました。
(2)は上下左右の境界線の太さを変えてみました。各々は下のように書かれています。
(1)<span style="border-width:8px; border-style:solid; border-top-color:black; border-left-color:yellow; border-right-color:red; border-bottom-color:blue;"><span style="border-width:5px; border-style:solid; border-top-color:red; border-left-color:blue; border-right-color:yellow; border-bottom-color:black;">境界線の種類</span></span>
(2)<span style="border-left-width:20px; border-right-width:1px; border-top-width:5px; border-bottom-width:3px; border-style:outset; border-left-color:red;">左を太く右を細く</span>
境界線のスタイル(位置指定) border-style
境界線のスタイルを現す属性には次のものがあります。
位置 border-style(上下左右指定)
位置 border-top-style(上辺指定)
位置 border-left-style(左辺指定)
位置 border-right-style(右辺指定)
位置 border-bottom-style(下辺指定)
このように書かれています。
<span style="border-bottom-style:solid;">
スタイルの種類は border の「境界線のスタイル」を参照してください。
また border-style は四辺を個別に指定することもできます。指定の順序は[上]から時計廻りに[右][下][左]です。半角スペースで区切ってください。
太さの指定 border(上下左右指定)
<span style="border-width:4px; border-style:solid double solid double; border-color:#AAAAFF;">
境界線の太さ(位置指定) border-width
境界線の境界線の太さを現す属性には次のものがあります。
太さ border-width(上下左右指定)
太さ border-top-width(上辺指定)
太さ border-left-width(左辺指定)
太さ border-right-width(右辺指定)
太さ border-bottom-width(下辺指定)
このように書かれています。
<span style="border-bottom-width:thin; border-bottom-style:solid;>
太さの種類は border の「境界線の太さ」「境界線の太さ(単位指定)」を参照してください。
また border-width は四辺を個別に指定することもできます。指定の順序は[上]から時計廻りに[右][下][左]です。半角スペースで区切ってください。
太さの指定 border(上下左右指定)
<span style="border-width:1px 3px 5px 7px; border-style:solid; border-color:#AAAAFF;>
境界線の色(位置指定) border-color
境界線の境界線の色を現す属性には次のものがあります。
太さ border-color(上下左右指定)
太さ border-top-color(上辺指定)
太さ border-left-color(左辺指定)
太さ border-right-color(右辺指定)
太さ border-bottom-color(下辺指定)
このように書かれています。
<border-width:thick; border-style:solid; border-bottom-color:red;>
色の種類は border の「境界線の色」を参照してください。
また border-color は四辺を個別に指定することもできます。指定の順序は[上]から時計廻りに[右][下][左]です。半角スペースで区切ってください。
境界線 border(上下左右指定)
<span style="border-width:thick; border-style:solid; border-color:#f00 #0f0 #00f #000;">
境界線の一括指定(位置指定) border
border では、境界線の太さ、スタイル、色を半角スペースを空けてまとめて指定することができました。下の属性を使うと、上下左右の線に対して、各々まとめて指定することができます。4pxの太さで赤い二重線を表示してみます。
境界線 border(上下左右指定)
太さ border-top(上辺指定)
太さ border-left(左辺指定)
太さ border-right(右辺指定)
太さ border-bottom(下辺指定)
このように書かれています。
<span style="border-bottom:4px double red;>