HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎29. 枠線のプロパティ(border)

      2017/07/11   hatano

borderプロパティ(ボーダー)

borderプロパティは要素(タグ)の枠線の指定です。borderプロパティは線の色(border-color)線の幅(border-width)線の種類(border-style)の3つのプロパティで構成されます。borderは要素の外側にできるので幅、高さに加算されます。設計の際は注意してください。

border-colorプロパティ

枠線の色の指定。値は主にカラーコードで指定します。

border-widthプロパティ

線の太さの指定。単位はpxで指定します。

border-styleプロパティ

線の種類の指定。値は直線(solid)破線(dashed)点線(dotted)が主に使われます。


/* 4方向に線を指定 */
div{
  /* 線の色 */
	border-color: #000000;
  /* 線の太さ */
	border-width: 1px;
  /* 線の種類 */
	border-style: solid;
}

borderのショートハンド

ショートハンドという省略記法で指定すると下記のようになります。各値は半角スペースで区切ります。boderは各プロパティごとに指定するとコードが長くなるためショートハンドが良く使用されます。


/* 直線で指定(ショートハンド) */
div{
	border: #000000 1px solid;
}
/* 破線で指定(ショートハンド) */
div{
	border: #000000 1px dashed;
}

/* 点線で指定(ショートハンド)*/
div{
	border: #000000 1px dotted;
}

ショートハンドで記述する場合、値の順番は特にありません。ただし3つの値(色、太さ、種類)を必ず指定する必要があります。


/* 値の順番は入れ替えても、結果は変わりません。 */
div{
	border: #000000 1px solid;
}
div{
	border: 1px #000000 dashed;
}
div{
	border: dotted #000000 1px;
}

方向で指定

borderプロパティは4方向(上下左右)それぞれで指定も可能です。


/* 上方向に指定 */
div{
	border-top-color: #000000;
	border-top-width: 1x;
	border-top-style: solid;
}

/* 上方向に指定(ショートハンド) */
div{
	border-top: #000000 1px solid;
}


/* 下方向に指定 */
div{
	border-bottom-color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

/* 下方向に指定(ショートハンド) */
div{
	border-bottom: #000000 1px solid;
}


/* 左方向に指定 */
div{
	border-left-color: #000000;
	border-left-width: 1px;
	border-left-style: solid;
}

/* 左方向に指定(ショートハンド) */
div{
	border-left: #000000 1px solid;
}


/* 右方向に指定 */
div{
	border-right-color: #000000;
	border-right-width: 1px;
	border-right-style: solid;
}

/* 右方向に指定(ショートハンド) */
div{
	border-right: #000000 1px solid;
}

まとめ

  • borderは線の色(border-color)線の太さ(border-width)線の種類(border-style)の3つで構成される
  • borderは幅、高さに加算される