CSSについて（線）

フリーランスのWebデザイナーになろうとしている男

　今日は、CSSの設定について。
　表やボックスなどで表示される線の太さ、線の種類などの装飾もCSSで設定する。

１　線の種類

　線を引くには、border-styleプロパティを使用する。
　説明するより表示した方が分かりやすいので説明は省略する。

【HTML】

<body>
	<div class="solid">solid</div>
	<div class="double">double</div>
	<div class="dotted">dotted</div>
	<div class="dashed">dashed</div>
	<div class="groove">groove</div>
	<div class="ridge">ridge</div>
	<div class="inset">inset</div>
	<div class="outset">outset</div>
</body>

【CSS】

.solid{
	border-style:solid;
	}

.double{
	border-style:double;
	}

.dotted{
	border-style:dotted;
	}

.dashed{
	border-style:dashed;
	}

.groove{
	border-style:groove;
	}

.ridge{
	border-style:ridge;
	}

.inset{
	border-style:inset;
	}

.outset{
	border-style:outset;
	}
ブラウザで表示した結果

２　線の太さ

　線の太さと指定するには、border-widthプロパティを使用する。
　値は単位をつけた数値（例：5px）か、キーワードで指定する。
【キーワード】
・thin（細い線）
・medium（初期値、普通の線）
・thick（太い線）

３　線の色

　線の色を指定するには、border-colorプロパティを使用する。
　色の指定方法は、colorプロパティと同様に、色の名前、カラーコード、RGB値（RGBA値）がある。

４　線を引く場所

　線を引く場所を１辺にしたかったり、３辺にしたかったりする場合には、borderに辺を加えたプロパティにする。
・上に線を引きたい　　　　　⇨　　border-top
・右に線を引きたい　　　　　⇨　　border-right
・下に線を引きたい　　　　　⇨　　border-bottom
・左に線を引きたい　　　　　⇨　　border-left
・四片全てに線を引きたい　　⇨　　border

　そして、線の種類、太さ、色を一気に指定できる。
　一気に指定する際は、borderプロパティを使用し、線の種類、太さ、色を半角スペースを空けて記述する。

border:solid 2px red;  
/*指定は順不同*/
/*今回の場合は、四辺全てに２pxの赤い実線を引く設定になっている*/

いいなと思ったら応援しよう！