border プロパティ

周りに境界線を引く、borderプロパティ

師匠

【注意】ここから先は、境界の補助線を引かんで。

師匠

まず、下のコードや。

<!-- HTMLコード -->

<p class="aaa">段落1</p>
<p class="aaa">段落2</p>
/*  CSS : 境界線を引く  */

.aaa {
	border:	5px solid red;
}

段落1

段落2

弟子

段落の周りに、赤い境界線が表示されました。

師匠

前にやったcolorbackgroundのプロパティの場合、値は「色だけ」やったな。

師匠

border プロパティには、「」の他に、「線の太さ」と「線の種類」も指定する。

師匠

3つを指定するとき、間に スペースを入れる
カンマと間違えることが多いな。 スペース や。

師匠

なお、この指定の順番は、決まってない。
そやから、下のように順番を変えただけやと、全部同じ結果になっとるやろ。
自分の好きな順番でええけど、間違えを防ぐためには 自分なりの順番は決めておいた方がええやろ。

<!-- HTMLコード -->

<p class="a1">段落1</p>
<p class="a2">段落2</p>
<p class="a3">段落3</p>
<p class="a4">段落4</p>
<p class="a5">段落5</p>
<p class="a6">段落6</p>
/*  CSS : 順番を変えた  */

.a1 {
	border:	5px solid red;
}

.a2 {
	border:	solid red 5px;
}

.a3 {
	border:	red 5px solid;
}

.a4 {
	border:	red solid 5px;
}

.a5 {
	border:	solid 5px red;
}

.a6 {
	border:	5px red solid;
}

段落1

段落2

段落3

段落4

段落5

段落6

師匠

このサイトでは、線の太さ線の種類線の色の順番に指定するで。
上のコードで「 .a1 」の並び順やな。

線の太さ

師匠

境界線の太さだけ、変えてみるで。

<!-- HTMLコード -->

<p class="a0">段落0</p>
<p class="a1">段落1</p>
<p class="a2">段落2</p>
<p class="a3">段落3</p>
<p class="a4">段落4</p>
<p class="a5">段落5</p>
<p class="a6">段落6</p>
<p class="a7">段落7</p>
<p class="a8">段落8</p>
<p class="a9">段落9</p>
<p class="a10">段落10</p>
/*  CSS : 境界線の太さ  */

.a0 {		border:	0px solid red;	}
.a1 {		border:	1px solid red;	}
.a2 {		border:	2px solid red;	}
.a3 {		border:	3px solid red;	}
.a4 {		border:	4px solid red;	}
.a5 {		border:	5px solid red;	}
.a6 {		border:	6px solid red;	}
.a7 {		border:	7px solid red;	}
.a8 {		border:	8px solid red;	}
.a9 {		border:	9px solid red;	}
.a10 {	border:	10px solid red;	}

段落0

段落1

段落2

段落3

段落4

段落5

段落6

段落7

段落8

段落9

段落10

師匠

「 10px 」までしか書いてないけど、「100px」でも「200px」でもええでー。
そんな太い枠は、普通 書かんけどな。

弟子

「 px 」って何ですか?

師匠

ここでは、長さ単位や。
画面の解像度を「 375 × 667 」みたいに表すな。
この単位はピクセルや。
で、pxはピクセル(pixel)の略やな。
つまり、画素の1本分の太さや。
10px は画素10本分の太さ。

弟子

0px だと線は見えないですね。

師匠

せやな。

あまり使わないけど、線の太さの 別の指定方法

師匠

線の太さの指定には、数値で指定する以外に、言葉で指定する方法もある。

師匠

使えるのは、
thin = 細い線
medium = 中ぐらいの線
thick = 太い線
の3種類

<!-- HTMLコード -->

<p class="thin">thin</p>
<p class="medium">medium</p>
<p class="thick">thick</p>
/*  CSS : 境界線の太さ  */

.thin {	border:	thin solid red;	}
.medium {	border:	medium solid red;	}
.thick {	border:	thick solid red;	}

thin

medium

thick

師匠

一般的なブラウザでは、
thin = 1px
medium = 3px
thick = 5px
と言われるが、必ずしても決まっていない。
だから、あんまり使う意味が分からない。

線の種類

師匠

境界線の種類だけ、変えてみるで。

<!-- HTMLコード -->

<p class="solid">solid</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="double">double</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="hidden">hidden</p>
<p class="none">none</p>
/*  CSS : 境界線の種類  */

.solid {	border:	5px solid red;	}
.dotted {	border:	5px dotted red;	}
.dashed {	border:	5px dashed red;	}
.double {	border:	5px double red;	}
.inset {	border:	5px inset red;	}
.outset {	border:	5px outset red;	}
.groove {	border:	5px groove red;	}
.ridge {	border:	5px ridge red;	}
.hidden {	border:	5px hidden red;	}
.none {	border:	5px none red;	}

solid

dotted

dashed

double

inset

outset

groove

ridge

none

師匠

線の種類は10種類や。

名前解説
solid実線
dotted点線
dashed破線
double二重線
insetへこんだ感じ
outset膨らんだ感じ
grooveへこんだ線
ridge膨らんだ線
hidden非表示
none非表示(デフォルト値)
師匠

このうち、「hidden」と「none」の場合、境界線は表示されない。
「none」がデフォルト値やから、デフォルトでは境界線は非表示やな。

線の色

師匠

線の色は、ここのページにある色の名前を適当に使えばええ。

<!-- HTMLコード -->

<p class="gold">gold</p>
<p class="olive">olive</p>
<p class="turquoise">turquoise</p>
<p class="rosybrown">rosybrown</p>
<p class="darkorange">darkorange</p>
<p class="darkviolet">darkviolet</p>
<p class="saddlebrown">saddlebrown</p>
<p class="midnightblue">midnightblue</p>
<p class="lightsteelblue">lightsteelblue</p>
<p class="mediumslateblue">mediumslateblue</p>
/*  CSS : 境界線の色  */

.gold {			border:	5px solid gold;			}
.olive {			border:	5px solid olive;			}
.turquoise {		border:	5px solid turquoise;		}
.rosybrown {		border:	5px solid rosybrown;		}
.darkorange {		border:	5px solid darkorange;		}
.darkviolet {		border:	5px solid darkviolet;		}
.saddlebrown {		border:	5px solid saddlebrown;	}
.midnightblue {		border:	5px solid midnightblue;	}
.lightsteelblue {		border:	5px solid lightsteelblue;	}
.mediumslateblue {	border:	5px solid mediumslateblue;	}

gold

olive

turquoise

rosybrown

darkorange

darkviolet

saddlebrown

midnightblue

lightsteelblue

mediumslateblue

師匠

以上を組み合わせて、好きな線を引けばええ。

復習

  • borderプロパティには、「太さ」「種類」「色」を指定する。
  • 太さ : 1px 以上
  • 種類(非表示以外): solid、dotted、dashed、double、inset、outset、groove、ridge