border-top-width,
border-top-style,
border-top-color,
border-bottom-width,
border-bottom-style,
border-bottom-color,
border-left-width,
border-left-style,
border-left-color,
border-right-width,
border-right-style,
border-right-color

続きや。

師匠

さらにborderの続きや。 (再)

弟子

まだ続くんですか? (再)

師匠

先は長いで~。 (再)
いや、違うな、今回で終わりや。たぶん。

師匠

borderプロパティの復習
いや、もう大丈夫やろから、省略。

師匠

今日は、いっきに12個のCSSプロパティをやるでー。

弟子

12個って言っても、同じようなプロパティですよね。

師匠

ま、そうやけどな。

本編

師匠

今日の話は、前の2ページ(ここここ)が理解できとれば、ページのタイトルを見て 推測できる話や。

弟子

えっとー。

border-top-width,
border-top-style,
border-top-color,
border-bottom-width,
border-bottom-style,
border-bottom-color,
border-left-width,
border-left-style,
border-left-color,
border-right-width,
border-right-style,
border-right-color

うん、分かるかな。

師匠

ほー。
言うてみ。

弟子

たとえば、一番上の border-top-width は、border-topborder-width を組み合わせたものじゃないですか?

師匠

ほー。
つまり?

弟子

つまり、border-top-widthは、「 上辺(top)の境界線(border)の太さ(width) 」を指定する。

師匠

ピンポ~ン!
正解や!
初めてやな、ワイのクイズに答えられたの!
めでたい!
赤飯(せいはん)()けー!

弟子

(バカにされてる。。。)

師匠

ついでに、そのままサンプルコードを挙げて、説明せー。

弟子

たとえば、こんな感じかな・・・

<!-- HTMLコード -->

<p class="aaa">段落</p>
/*  CSS : border-top-width を指定  */

.aaa {
	border-top-width:	5px;
}

段落

弟子

あれ?
表示されない。

師匠

style(種類)のデフォルト値は「 none 」なんや。

弟子

あっそうか。
じゃー、border-top-styleも指定する。

/*  CSS : border-top-style を指定  */

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

段落

弟子

あれ?
黒い線だ・・・

師匠

color(色)のデフォルト値は「 black 」なんや。。。

弟子

。。。じゃー、border-top-colorも指定する。

/*  CSS : border-top-color を指定  */

.aaa {
	border-top-width:	5px;
	border-top-style:	solid;
	border-top-color:	green;
}

段落

師匠

同じことをborder-topを使って書いてみ。

弟子

はい。

/*  CSS : border-top  */

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

段落

弟子

なんか、border-topを使った方が、シンプルでいいですね。

師匠

じゃ、border-top-widthとかは、どういう時に使えばええんや?

弟子

さー・・・。
あっ、設定を上書きするとき?

師匠

ピンポーン!
奇跡的に 2問連続正解 やー!
赤飯炊けー!

設定を上書きする例

師匠

設定を上書きするサンプルコードを書いて、説明してみ。

弟子

はい。
まず、borderプロパティでベースとなる線を設定。

<!-- HTMLコード -->

<p class="aaa">段落</p>
/*  CSS : border  */

.aaa {
	border:		5px solid green;
}

段落

弟子

これに加えて、
border-left-widthを指定。

/*  CSS : border-left-width を指定  */

.aaa {
	border:			5px solid green;
	border-left-width:	20px;
}

段落

弟子

border-top-styleを指定。

/*  CSS : border-top-style を指定  */

.aaa {
	border:			5px solid green;
	border-left-width:	20px;
	border-top-style:	dotted;
}

段落

弟子

border-right-colorを指定。

/*  CSS : border-right-color を指定  */

.aaa {
	border:			5px solid green;
	border-left-width:	20px;
	border-top-style:	dotted;
	border-right-color:	red;
}

段落

師匠

なかなか イカした美的センス をしとるな。
まぁ、説明としては、上出来や。

上書きで シンプルなコードを書く

師匠

追加で解説する。

師匠

境界線の引き方の鉄則は、まずborderプロパティでベースとなる線を指定して、
そこからborder-○○とかborder-○○-○○で、設定を上書きするんや。

師匠

その場合、上書きする範囲を最小限に絞り込むこと。
例えば、下の例や。

師匠

左辺の「太さ」と「種類」を変えるために、
border-leftで一括で指定した場合(例1)と、
border-left-widthborder-left-style に分けた場合(例2)。

どっちが保守性が高い

/*  CSS : (例1)  */

.aaa {
	border:			5px solid green;
	border-left:		20px ridge green;
}

段落

/*  CSS : (例2)  */

.aaa {
	border:			5px solid green;
	border-left-width:	20px;
	border-left-style:	ridge;	
}

段落

弟子

(例2)ですか?

師匠

そうや。
下のように 線の色を青に変えた場合、(例1)の場合、borderborder-leftの両方で変更が必要や。
(例2)の場合は、borderだけ変えればいいな。

/*  CSS : (例1)  */

.aaa {
	border:			5px solid blue;
	border-left:		20px ridge blue;
}

段落

/*  CSS : (例2)  */

.aaa {
	border:			5px solid blue;
	border-left-width:	20px;
	border-left-style:	ridge;	
}

段落

師匠

同じようなことが、下の例でも見られる。

師匠

下辺と左辺の境界線を出したい場合、border-bottomborder-leftで それぞれ指定する方法が普通の考えやな(例3)。

/*  CSS : (例3)  */

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

段落

師匠

でも、もっといいのは、(例4)のように、borderで全部の線を引いてから、border-○○-styleを「 none 」して非表示にすることや。
そうすると solid blue の設定は、1カ所で済むな。

/*  CSS : (例4)  */

.aaa {
	border:			3px solid blue;
	border-left-width:	7px;
	border-top-style:	none;	
	border-right-style:	none;	
}

段落

弟子

なるほど。

師匠

一応、言うとっけど、今後の説明でも、分かりやすさを優先するから、今の場合やと(例3)の書き方で説明していくで。
せやけど、自分らは 常に、 コードをシンプルに保つには どうしたら良いか という問題意識を常に持っとるべきや。

復習

  • borderでベースの線を引いて、最小限の設定を上書きして変更する。