LemonteaのUnity部屋

C#とかのお話です~

CSS 枠で囲む・線を引く borderタグ

こんにちは。レモンティーです。

今回は、

こんなの

とか

こんなの

とか

こんなの

みたいに、枠をつけたり線を引いたりします。

使うのはCSSのborderプロパティです。

これは

boder:線の種類 太さ 色;

のように使います。

例えば

サンプル

↑の場合は

HTML

<p class="sample">サンプル</p>

CSS

.sample{border:solid 1px black;}

となっています。

・線の種類は

solid 実線

dotted 点線

dashed 破線

double 二重線

groove 窪んだ線

ridge 隆起した線

inset 中を窪んで見せる線

outset 中を隆起して見せる線

などから選べます。
(細いとsolidに見えるやつは太くしています)

・線の太さはピクセル単位で指定します。

・線の色は
例のように色の名前で指定するか
#ffffffのようにRGBで指定します。


また、borderの部分を
border-topなどに変えると↓のように
指定した部分だけに枠をだすことで線が引けます。

border-top

border-bottom

border-left

border-right





今回はこれでおしまいです
sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com