12月
4

枠線のスタイル、太さ、色をまとめて指定する”border”プロパティ | スタイルシート

By admin // CSS, 枠線 // 1 Comment

要素の周囲に枠線を表示させることが出来ます。
“border”プロパティは、枠線のスタイル・太さ・色をまとめて指定する際に使用します。
用途に応じてプロパティの値を変えて枠線を使い分けましょう。

枠線のスタイル、太さ、色をまとめて指定する”border”プロパティ

テーブルのセルと内部の要素との間隔を指定する

none	太さが0になりボーダーは表示されません。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
hidden	ボーダーは表示さません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
solid	1本線の枠線
double	2本線の枠線
groove	窪んだような立体的な枠線
ridge	隆起したような立体的な枠線。
inset	ボーダーで囲まれた領域全体が立体的に窪んだような枠線。
outset	ボーダーで囲まれた領域全体が立体的に隆起したような枠線。
dashed	破線で表示される枠線
dotted	点線で表示される枠線

数値で指定	数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位、emとはフォントの高さを1とする単位、exとは小文字の｢x｣の高さを1とする単位です。
キーワードで指定	thin（細い）、medium（普通）、thick（太い）のうち、いずれかを指定。

色	#000000などの記述やカラーネームで色指定をします。
transparent	ボーダーの色を透明にします。

div.border
{
	border:5px solid #0000ff;
}

<div class="border">枠線の表示例です</div>

borderプロパティではいろいろな枠線を表示することが出来ます。
それぞれどのような表示になるか以下で確認してください。

none

hidden

solid

double

groove

ridge

inset

outset

dashed

dotted

点線を使った下線を引いてノートのようにデザインするCSS | 初心者でもわかるホームページの作り方 2010年12月4日 5:22 PM

[...] 点線を使った下線を引いてノートのようにデザインするCSS By admin // デザイン // No Comments 本来、リファレンスよりこういったものの方が読んでいて楽しいと思うし書くほうも書き甲斐がある。さて、CSSだけでもきれいなデザインはできます。今回は下線を点線にしてノートのような感じにデザインするためのCSSを紹介します。全く難しいものではなく、CSSのborderというプロパティを使うだけの簡単な方法です。 [...]