TITLE:枠線のスタイルの設定 *枠線のスタイルの設定 [#y5213302] TITLE:枠線関係をまとめた設定 *枠線関係をまとめた設定 [#y5213302] 枠線のスタイルを設定するには、 ''border-???-style''プロパティを設定します。 枠線関連のプロパティをまとめて設定するには、 ''border-???''プロパティを設定します。 #pre(novervatim){{ COLOR(red):border-top-style: COLOR(blue):上の枠線のスタイル COLOR(red):border-bottom-style: COLOR(blue):下の枠線のスタイル COLOR(red):border-left-style: COLOR(blue):左の枠線のスタイル COLOR(red):border-right-style: COLOR(blue):右の枠線のスタイル COLOR(red):border-style: COLOR(blue):上下左右の枠線のスタイル COLOR(red):border-top: COLOR(blue):上の枠線のプロパティ COLOR(red):border-bottom: COLOR(blue):下の枠線のプロパティ COLOR(red):border-left: COLOR(blue):左の枠線のプロパティ COLOR(red):border-right: COLOR(blue):右の枠線のプロパティ COLOR(red):border: COLOR(blue):上下左右の枠線のプロパティ }} 指定できるスタイルには、 次のような種類があります。 -none(枠線を消す) -hidden(枠線を消す) -solid(直線) -double(二重線) -dashed(破線) -dotted(点線) -groove(右下から光が当たったような枠) -ridge(左下から光が当たったような枠) -inset(ボタンが押されたような線) -outset(ボタンが浮き出たような線) 次のプロパティをまとめて設定することができます。 -[[枠線の太さの設定>../border_width]] -[[枠線の色の設定>../border_color]] -[[枠線のスタイルの設定>../border_style]] border-styleプロパティを使えば、 上下左右の枠線のスタイルを一度に指定できます。 その場合は、値を半角スペースで区切ります。 値の個数によって、次のように枠線が設定されます。 -値が1つ: 「上下左右」を指定 -値が2つ: 1つ目の値は「上下」、2つ目の値は「左右」 -値が3つ: 1つ目の値は「上」、2つ目の値は「左右」、3つ目は「下」 -値が4つ: 1つ目の値は「上」、2つ目の値は「右」、3つ目は「下」、4つ目は「左」 設定したい値を、任意の順序で、半角スペースで区切って設定します。 設定しなかった場合は、初期値が指定されたことになります。 ***設定の例 [#nf3c0400] 次のような設定をすると、 -h1要素の枠線のスタイルが、上下と右は点線、左が実線 -h2要素の枠線のスタイルが、上が実線、左が破線(のこりは設定されず) -h3要素の枠線のスタイルが、上下左右ともボタンが押されたような状態 となります。 なお、 borderプロパティで、 上下左右の枠線を別々に設定することはできません。 注意してください。 #pre(novervatim){{ h1{ COLOR(red):border-style: COLOR(blue):dotted dotted dotted solid; h2 { COLOR(red):border-top: COLOR(blue):dotted 3px #ffcc00; COLOR(red):border-left: COLOR(blue):dotted 3px #ffcc00; COLOR(red):border-right: COLOR(blue):dotted 3px #ffcc00; } h2{ COLOR(red):border-top-style: COLOR(blue):solid; COLOR(red):border-left-style: COLOR(blue):dashed; h3 { COLOR(red):border: COLOR(blue):double 6px #339966; } h3{ COLOR(red):border-style: COLOR(blue):inset; } }} &br; &navi2(Lecture/JouhouC2010/6th,next);進んでください。 ---- #navi2(Lecture/JouhouC2010/6th,prev,toc,next) |