<< 罫線が1ピクセルのtable | TOP | 横線・斜線の入った画像 >>

2006年06月22日

罫線の種類について

スタイルシート〜罫線の種類

スタイルシートで指定できる罫線の種類を紹介します。



sq.gifスタイルシート〜罫線の種類

スタイルシートで指定できる罫線の種類はそんなに多くはありません。「罫線なし」を除くと8種類で、そのうち立体系の罫線はほとんど使用されません。通常使われるものは一本線、二重線、破線、点線の四種類。ちなみに、罫線を使わずに、画像でデザインした方が見栄えがするので、そちらを好む人も多いです。

また、別記事で「罫線が1ピクセルの表を作る方法」も紹介していますので、こちらもどうぞ。


■罫線の種類（border-style:）

none
:　ボーダーの非表示。初期値になります。
hidden
:　ボーダーの非表示。
solid
:　1本のラインが表示されます。
double
:　二重線が表示されます。
dashed
:　破線。
dotted
:　点線。
groove
:　枠が立体的に窪んだ感じになります。
ridge
:　枠が立体的に浮上った感じになります。
inset
:　全体が立体的に窪んだ感じになります。
outset
:　全体が立体的に浮上った感じになります。



solid
一本線		double
二重線
dashed
破線		dotted
点線
inset
窪み		outset
浮上り
groove
枠の窪み		ridge
枠の浮上り

↓↓↓
以下ソースです。コピー＆ペーストでご利用下さい。
<table cellspacing="10" cellpadding="10">
<tr>
<td style="border:solid 5px #999999;background-color:#ffffff;" width="100" height="50">solid<br>一本線</td>
<td style="border:double 5px #999999; background-color:#ffffff;" width="100" height="50">double<br>二重線</td>
</tr>
<tr>
<td style="border:dashed 5px #999999;background-color:#ffffff;" width="100" height="50">dashed<br>破線</td>
<td style="border:dotted 5px #999999;background-color:#ffffff;" width="100" height="50">dotted<br>点線</td>
</tr>
<tr>
<td style="border:inset;" width="100" height="50">inset<br>窪み</td>
<td style="border:outset;" width="100" height="50">outset<br>浮上り</td>
</tr>
<tr>
<td style="border:groove;" width="100" height="50">groove<br>枠の窪み</td>
<td style="border:ridge;" width="100" height="50">ridge<br>枠の浮上り</td>
</tr>
</table>

posted by hiro at 23:50| Comment(0) | TrackBack(0) | スタイルシート（CSS）
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/884538
この記事へのトラックバック