枠線をつける

01 / 04

枠線は3つの情報でできている

枠線をつけるプロパティは border。値には太さ・種類・色の3つを、スペースで区切って並べて書くよ。

順番は入れ替えても効くけれど、この順で書くのが読みやすい。

.box {  border: 2px solid #333333;}

02 / 04

真ん中の値で線の見た目が変わる。

迷ったら solid。いちばんよく使うよ。

.box {  border: 3px dashed #0066cc;}

03 / 04

4辺ぜんぶではなく1辺だけに引きたいときは、プロパティ名に辺の名前を足す。

見出しの下線は border-bottom で作るのが定番だよ。

.title {  border-bottom: 4px solid #ff6600;}

04 / 04

ここが引っかかりやすいところ。幅 200px の箱に 4px の枠線をつけると、画面上の見た目は 208px になる。左右に 4px ずつ足されるからだよ。

横に並べた箱がはみ出したときは、たいてい枠線のぶんを忘れている。ここから書いてみよう。

.box {  width: 200px;  border: 4px solid #333333;}