border-top,
border-bottom,
border-left,
border-right

境界線を、上辺・下辺・左辺・右辺で、個別に指定する

師匠

borderプロパティの続きや。

弟子

まだ、何かあるんですか?

師匠

前のページは序ノ口や。
まだまだ続く。。。

師匠

前のページで書いたコードを復習。

<!-- HTMLコード -->

<p class="aaa">段落</p>
/*  CSS : borderプロパティ  */

.aaa {
	border:		7px solid red;
}

段落

師匠

CSSコードを、下のように変える。
(HTMLコードは、上と同じ)

/*  CSS : border-○○プロパティ  */

.aaa {
	border-top:	5px solid red;
	border-right:	7px double purple;	
	border-bottom:	9px dotted green;
	border-left:	11px dashed blue;
}

段落

弟子

上下左右で境界線が違いますね。

師匠

せやな。
だいたい分かると思うけど、一応 説明するで。

師匠

上のコードは、下のコードのように、4つに分解できる。

/*  CSS : border-topプロパティ  */

.aaa {
	border-top:	5px solid red;
}

段落

師匠

border-top属性は、上辺の境界線を引くための設定や。
border-right属性、border-bottom属性、border-left属性は 以下同文や。

/*  CSS : border-rightプロパティ  */

.aaa {
	border-right:	7px double purple;	
}

段落

/*  CSS : border-bottomプロパティ  */

.aaa {
	border-bottom:	9px dotted green;
}

段落

/*  CSS : border-leftプロパティ  */

.aaa {
	border-left:	11px dashed blue;
}

段落

師匠

こういう風に、「上だけ」とか「右だけ」とかでも ええわけや。

弟子

上下左右でなく、 上右下左 の順番に指定しているのは、意味があるんですか?

師匠

基本的に、順番は何でもええ。
しかし、後で、 上右下左の順番 で指定するものが、出てくる。
よって、そのための練習みたいなもんやな。

弟子

よく分かりませんが。。。

実用的な例

師匠

こういう「左と下だけ」っての は良くある。
この場合、同じ色と 同じ線の種類が カッコいい

/*  CSS : 左と下だけ  */

.aaa {
	border-bottom:	3px solid blue;
	border-left:	7px solid blue;
}

段落

師匠

線の種類を outsetにしてみる。

/*  CSS : 線の種類を outset にしてみる  */

.aaa {
	border-bottom:	3px outset blue;
	border-left:	7px outset blue;
}

段落

師匠

なお(ちょっと話はズレるが)、outsetを使うと、立体的なボタンみたいのもできるな。

/*  CSS : ボタンみたいに  */

.aaa {
	border:		7px outset navy;
	
	color:		white;
	background:	navy;
}

段落

師匠

ボタンみたいにするには、
1.borderの色と、backgroundの色を 同じにする
2.borderの種類を、outsetにする
3.borderの太さは、太目にする
と、できる。

師匠

あと、注意やけど、線の種類が dotted、dashed、doubleの場合、下地になる色は、backgroundの色やで。

<!-- HTMLコード -->

<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="double">double</p>
/*  CSS : dotted dashed double  */

p {
	background:	lightsteelblue;
}
       
.dotted {
	border:		7px dotted navy;
}

.dashed {
	border:		7px dashed navy;
}

.double {
	border:		7px double navy;
}

dotted

dashed

double

師匠

ま、これくらいにしとくか。

復習

  • 上辺 → border-top: (太さ) (種類) (色);
  • 右辺 → border-right: (太さ) (種類) (色);
  • 下辺 → border-bottom: (太さ) (種類) (色);
  • 左辺 → border-left: (太さ) (種類) (色);