■ border
ボーダーの指定 <border-width> <border-style> <border-color>
ボーダーとは枠の線の事ですが、table,td,div,span, など全てのタグの4辺に枠を付ける事ができ、
そのボーダーの線の幅・スタイル・色を border で指定する事ができます。
ボーダー指定の書き方は下のようになり、幅・スタイル・色 の間に半角スペースを入れます。
border:幅 スタイル 色
従って border:3px solid #ffa000 なら下のように表示されます。
border:3px solid #ffa000
4辺が同じボーダーで表示される。
4辺のボーダーを各々指定する
ボーダー属性には 上・右・左・下 それぞれ指定する属性もあります。
・ border-top
・ border-right
・ border-left
・ border-bottom
|
border-top ↓
|
|
border-left →
|
border-top:3px solid #ff0000;
border-right:3px double #0000ff;
border-left:3px dotted #00aa00;
border-bottom:3px dashed #ff00ff
|
← border-right
|
|
↑ border-bottom
|
|
■ border-width
ボーダーの幅を指定 thin medium thick none <lenght>
■ 値を4つ入れる場合
border-width:1px 3px 5px 7px
ボーダーの幅の指定は上・左・下・右の
順で1周するように指定される。
■ 値を3つ入れる場合
border-width:1px 3px 5px
4辺の幅の指定は、上・左右・下の順で
ボーダーが指定される。
■ 値を2つ入れる場合
border-width:1px 5px
4辺の幅の指定は、上下・左右の順で
ボーダーが指定される。
■ 値を1つ入れる場合
border-width:1px
4辺の幅の指定は、上下左右全部の
ボーダーが指定される。
実際に border-width を使う場合は border-style と border-color の指定が必要です。
ボーダーの幅をキーワードで指定 thin medium thick none <lenght>
border-width:thin medium thick
キーワードによるボーダーの幅の指定。
thinは細い mediumは中太 thickは太い
上下左右のボーダーの幅を指定 thin medium thick none <lenght>
border-width の仲間に以下があります。
・border-width-top
・border-width-bottom
・border-width-right
・border-width-left
上下左右のボーダー幅の専門に指定する属性です。
■ border-style
ボーダーのスタイルを指定 solid double dotted dashed outset inset groove ridge
ボーダーのスタイルは8種類あります。
border-style:solid
border-style:double
border-style:dotted
border-style:dashed
border-style:outset
border-style:inset
border-style:groove
border-style:ridge
border-style:solid double dotted dashed
実際に border-style を使う場合は border-width と border-color の指定が必要です。
上下左右のボーダーのスタイルを指定
border-style の仲間に以下があります。
・border-style-top
・border-style-bottom
・border-style-right
・border-style-left
上下左右のボーダーのスタイルを専門に指定する属性です。
■ border-color
ボーダーの色を指定 <color>
ボーダーの色を指定します。
■ 色を4つ指定した場合
border-color:#ff0000 #00ff00 #0000ff #000000
■ 色を3つ指定した場合
border-color:#ff0000 #00ff00 #0000ff
■ 色を2つ指定した場合
border-color:#ff0000 #00ff00
■ 色を1つ指定した場合
border-color:#ff0000
実際に border-width を使う場合は border-width と border-style の指定が必要です。
上下左右のボーダーの色を指定
border-color の仲間に以下があります。
・border-color-top
・border-color-bottom
・border-color-right
・border-color-left
上下左右のボーダー色を専門に指定する属性です。
■ 違う属性で同じボーダー
ボーダーは結構重要なもので、例えばテーブルなどのデザインに良く使われます。
逆にボーダーを使いこなす事で自分なりのテーブルデザインも可能になります。
で、ボーダーには複数の属性があるのでややこしく感じますが、この複数の属性は使い方次第で中々便利になります。
また属性の組み合わせが違っても同じ表示に出来るので、なるべく簡単な記述を考えて使うと良いでしょう。
border-top:3px solid #ff0000;
border-right:4px double #00aaff;
border-bottom:5px dotted #00aa00;
border-left:6px dashed #ff00ff
border-width:3px 4px 5px 6px;
border-style:solid double dotted dashed;
border-color:#ff0000 #00aaff #00aa00 #ff00ff;
■ 飾り付けテーブル
スタイルシートを使えば、こんなテーブルが簡単に出来ちゃいます!
site news
|
<table border="0" cellpadding="2" cellspacing="3" style="background-color:#00c5ff; border-width:2px; border-style:solid; border-color:#88ddff #88ddff #00aaff #00aaff;">
<tr>
<td style="width:500px; height:20px; color:#ffffff; font-size:14px; font-weight:700;">
site news
</td>
</tr>
<tr>
<td style="height:200px; padding:7px; color:#000000; font-size:13px; background-color:#eaf5ff; border-width:2px; border-style:solid; border-color:#00aaff #00aaff #88ddff #88ddff;">
</td>
</tr>
</table>
|
|