HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● 境界(ボ−ダー)

画像でも使ったプロパティborderを使って境界線の太さ、形状、色を設定します。
ボーダーは要素の廻りにある境界線で、通常は太さが『0』で見えませんが、スタイルの設定で見えるようになります。

<P style="border:5px dotted silver;background-color:cornsilk">

上の四角い灰色の点線がボーダー領域です。 『border』プロパティに『0.5em dotted silver』というように、 スペースで区切りながら、太さ、スタイル、色の順で値を設定します。
これらのプロパティ、適用範囲は個別で設定でます。

・ボーダーのスタイル

ボーダーのスタイルは『border-style』プロパティで設定でき、 以下のような値が用意されています。

dotted(点線)

dashed(粗い点線)

solid(実線)

double(二重線)


ridge

groove

inset

outset

none(無し)

これらの値は、上下左右を別々に設定することも可能です。

○ボーダースタイルのプロパティとその値
スペースで区切りながら・・・
border-style:[上下] [左右]
border-style:[上] [左右] [下]
border-style:[上] [右] [下] [左]
それぞれを単独で設定する場合は以下のプロパティを使います(順に上/下/左/右)。
border-top-style border-bottom-style border-left-style border-right-style

border-style:solid double

border-style:solid none double

border-style:solid dotted none double

・ボーダーの色

ボーダーの色は『border-color』プロパティで設定でき、HTMLの色定義に従って色を決められます。
ただし、ボーダースタイルのデフォルト値が『none』なので、ボーダーのスタイル設定が必要になります。

border-style:solid;border-color:gray

これらの値は、上下左右を別々に設定することも可能です。

○ボーダーカラーのプロパティとその値
スペースで区切りながら・・・
border-color:[上下] [左右]
border-color:[上] [左右] [下]
border-color:[上] [右] [下] [左]
それぞれを単独で設定する場合は以下のプロパティを使います(順に上/下/左/右)。
border-top-color border-bottom-color border-left-color border-right-color

border-style:solid;border-color:Gray Red

border-style:solid;border-color:Gray Red Blue

border-style:solid;border-color:Gray Red Blue Green

border-style:solid;border-color:transparent
transparent』は透明で、幅は存在しています。(未対応?

・ボーダーの太さ

ボーダーの太さは『border-width』プロパティで設定でき、 以下のような値が用意されています。
ただし、ボーダースタイルのデフォルト値が『none』なので、ボーダーのスタイル設定が必要になります。

thin(細)

medium(中)

thick(太)

5px(数値)

これらの値は、上下左右を別々に設定することも可能です。

○ボーダーの太さ設定のプロパティとその値
スペースで区切りながら・・・
border-width:[上下] [左右]
border-width:[上] [左右] [下]
border-width:[上] [右] [下] [左]
それぞれを単独で設定する場合は以下のプロパティを使います(順に上/下/左/右)。
border-top-width border-bottom-width border-left-width border-right-width

border-style:solid;border-width:medium thin thick 5px

・ボーダーの個別簡略設定

最初の簡略設定を上下左右個別に設定することが可能です。
border-top border-bottom border-left border-right
(順に上/下/左/右)を利用すれば、このような設定も可能になります。

border-left:10px double Black;border-top:5px dotted Maroon;border-bottom:3px solid Fuchsia

◎なお、ボーダーはBODY要素に対しても設定可能です。

○ボーダーのプロパティ一覧
・各ボーダーの簡略設定(一括/上/下/左/右)
border border-top border-bottom border-left border-right
・各ボーダーの太さ設定(一括/上/下/左/右)
border-width border-top-width border-bottom-width border-left-width border-right-width
・各ボーダーのスタイル設定(一括/上/下/左/右)
border-style border-top-style border-bottom-style border-left-style border-right-style
・各ボーダーの色設定(一括/上/下/左/右)
border-color border-top-color border-bottom-color border-left-color border-right-color

<<前へ  |上へ|  次へ>>
1234567891011121314151617

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/09