Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
スタイルシート

CSSリファレンス


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ 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>
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.