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”プロパティ | スタイルシート”

Leave a comment

↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“

人気ã®è¨˜äº‹