12月
4

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

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

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

border

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

ボーダースタイル
none太さが0になりボーダーは表示されません。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
hiddenボーダーは表示さません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
solid1本線の枠線
double2本線の枠線
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

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

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

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事