border-width,
border-style,
border-color

境界線の太さ・種類・色を個別に指定する

師匠

さらにborderの続きや。

弟子

まだ続くんですか?

師匠

先は長いで~。

師匠

borderプロパティの復習

<!-- HTMLコード -->

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

.aaa {
	border:	7px solid red;
}

段落

師匠

上のCSSコードは、下のように書き換えても、全く同じや。
(HTMLコードは同じもの)

/*  CSS : borderプロパティを使わない  */

.aaa {
	border-width:	7px;
	border-style:	solid;
	border-color:	red;
}

段落

師匠

つまり、1行で指定してたものを、3行に分解したんやな。

師匠

border-widthには、線の太さを指定する。
border-styleには、線の種類を指定する。
border-colorには、線の色を指定する。

師匠

設定可能な値は、borderプロパティで説明した内容と同じだから、説明しない。

デフォルト値の確認

弟子

これは、それぞれ1つだけ指定することもできるんですか?

師匠

実験してみよう。

師匠

border-widthだけ指定。

/*  CSS : border-width  */

.aaa {
	border-width:	7px;
}

段落

師匠

border-styleだけ指定。

/*  CSS : border-style  */

.aaa {
	border-style:	solid;
}

段落

師匠

border-colorだけ指定。

/*  CSS : border-color  */

.aaa {
	border-color:	red;
}

段落

弟子

border-styleだけの場合、黒い境界線が表示されましたね。
border-widthborder-colorに至っては、まったく境界線が表示されてない。

師匠

border-styleデフォルト値は、「 none = 非表示 」やから、border-widthだけ、またはborder-colorだけ、やと表示されない。

師匠

border-widthのデフォルト値は「 medium 」、border-colorのデフォルト値は「 black 」やから、border-styleだけでも表示される。

弟子

ふーん。

使う場面

弟子

どういう場面で、border-widthborder-styleborder-colorを使うのですか?

師匠

どういう場面?

弟子

前のページでやったborder-topborder-leftは、使う場面が分かります。

師匠

どういう場面で使うんや?

弟子

えっ、たとえば、上だけに境界線を引きたいときとか。。。

師匠

そうやな。
border-topとかは、1行で意味があったな。
それだけで機能として完結しとったな。
一方・・・。

弟子

一方、border-widthborder-styleborder-colorは、単体では役に立たないので、下のコードみたいに、3つのプロパティをまとめて使う必要がある。

/*  CSS : borderプロパティを使わない  */

.aaa {
	border-width:	7px;
	border-style:	solid;
	border-color:	red;
}
弟子

これなら、下のコードのように、1行で書いた方が、シンプルですよね。

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

.aaa {
	border:	7px solid red;
}
師匠

なかなか ええ質問や。
どういう場合に使うか・・・。
それは設定を上書きするときや。

弟子

設定を上書き??

設定を上書きする

師匠

下の例を考えるで。

<!-- HTMLコード -->

<p class="				egg	">ミジンコ</p>
<p class="sekitsui			egg	">金魚</p>
<p class="sekitsui	mammal	egg	">カモノハシ</p>
<p class="sekitsui	mammal		">イルカ</p>

ミジンコ

金魚

カモノハシ

イルカ

師匠

まず、ここでは脊椎動物だけを考える。
よって、脊椎動物( sekitsui )に赤い境界線を引くで。

/*  CSSコード  */

.sekitsui {
	border:		3px solid red;
}

ミジンコ

金魚

カモノハシ

イルカ

師匠

ワイは、脊椎動物以外に興味はない。
ミジンコに境界線を引いたらアカン
ミジンコは無視(虫)や。

師匠

次、哺乳類(mammal)は、線を太くする。
border-widthを使うで。

/*  CSSコード  */

.sekitsui {
	border:		3px solid red;
}

.mammal {
	border-width:	7px;	
}

ミジンコ

金魚

カモノハシ

イルカ

師匠

脊椎動物に共通の線(3px solid red)の特徴を継承する。
ただし、線の太さだけを、上書きしたんや。

師匠

上のCSSコードを、下のようにborderプロパティで書くこともできる。
そやけど、この場合、「 solid red 」を2カ所に書くことになるな。
脊椎動物の線のスタイルを「 dotted blue (青い点線) 」に変えた場合、2カ所ともに変える必要が出てくる。
こういうのは、プログラミングにおいては「 保守性が低いコード 」と呼ばれて、良くないんや。

/*  CSSコード  */

.sekitsui {
	border:		3px solid red;
}

.mammal {
	border:		7px solid red;
}

ミジンコ

金魚

カモノハシ

イルカ

師匠

次、卵から生まれる動物(egg)は、線を太くする。
border-colorを使うで。

/*  CSSコード  */

.sekitsui {
	border:		3px solid red;
}

.egg {
	border-color:	green;	
}

ミジンコ

金魚

カモノハシ

イルカ

師匠

ミジンコも卵から生まれるけど、無視(虫)や。

師匠

次、mammalクラス(太線)eggクラス(緑線)を、同時に適用してみる。

/*  CSSコード  */

.sekitsui {
	border:		3px solid red;
}

.mammal {
	border-width:	7px;	
}

.egg {
	border-color:	green;	
}

ミジンコ

金魚

カモノハシ

イルカ

師匠

今、気分が変わって、境界線は「 outset 」に変更や!
どうすれば良い?

弟子

えっとー、これでいいですか?

/*  CSSコード  */

.sekitsui {
	border:		3px outset red;
}

.mammal {
	border-width:	7px;	
}

.egg {
	border-color:	green;	
}

ミジンコ

金魚

カモノハシ

イルカ

師匠

そうや。
こういう感じで、border-widthborder-styleborder-colorは、線の特徴を部分的に上書きするときに使うことが多いな。
CSSコードを 簡潔 に書いて、 保守性を高める ことが大事や。

復習

  • border-width : 線の太さ
  • border-style : 線のスタイル ( solid、dotted、dashed、double、inset、outset、groove、ridge、hidden、none)
  • border-color : 線の色
  • borderプロパティで指定した基本となる設定を上書きするために 使われることが多い。