CSS borderプロパティについてのまとめ

CSS borderプロパティについてのまとめ

CSSで枠線を指定する場合にこのborderプロパティを使うわけなんですが、指定の記述方法はいろいろあるわけなんですよ...。

自分は「border」で一括指定か。「border-top」「border-right」「border-bottom」「border-left」の上下左右個別に一括指定する方法しか使いませんので、今回はこの方法で説明したいと思います。
(これが一番記述が短くて済みますし楽だと思いますよ)

…ここからが続き

borderプロパティ記述例

divの周りに黒い枠線を入れる

div {
	border: 1px solid #000000;
}

divの上のみ黒い実線を入れる

div {
	border-top: 1px solid #000000;
}

divの右のみ黒い実線を入れる

div {
	border-right: 1px solid #000000;
}

divの下のみ黒い実線を入れる

div {
	border-bottom: 1px solid #000000;
}

divの左のみ黒い実線を入れる

div {
	border-left: 1px solid #000000;
}

border-styleプロパティの種類・表示例

種類

none
枠線なし(ボーダーの幅の値は強制的に0になる)
dotted
点線(丸い点線)
dashed
破線(四角い点線)
solid
実線
double
二重線
groove
立体枠(窪み)
ridge
立体枠(隆起)
inset
立体枠(内側全体が窪み)
outset
立体枠(内側全体が隆起)

表示例

.sample1	{
	border: none;
}
.sample2	{
	border: 5px dotted #000000;
}
.sample3	{
	border: 5px dashed #000000;
}
.sample4	{
	border: 5px solid #000000;
}
.sample5	{
	border: 5px double #000000;
}
.sample6	{
	border: 5px groove #000000;
}
.sample7	{
	border: 5px ridge #000000;
}
.sample8	{
	border: 5px inset #000000;
}
.sample9	{
	border: 5px outset #000000;
}

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article