Webサイトを作っていると、「文字やボックスの周りに枠線を付けたい」と思うことがあります。
そんなときに使うのが、CSSのborder（ボーダー）です。
CSSのborderを使えば、HTMLで作った要素に枠線を付けたり、線の色や太さ、種類を変更したりできます。
この記事では、CSSを勉強し始めた方に向けて、borderの種類や基本的な使い方を解説します。
CSSのborderとは？
borderとは、HTMLの要素の周囲に表示する「枠線」のことです。
たとえば、次のようなCSSを指定すると、文字を囲むように黒い枠線が表示されます。
.box {
border: 1px solid #333;
}この「border」には、主に次の3つの情報を指定できます。
1px：線の太さsolid：線の種類#333：線の色
つまり、borderは「太さ・種類・色」を組み合わせて設定するのが基本です。
CSS borderの基本的な書き方
borderの基本的な書き方は、「border: 線の太さ 線の種類 線の色;」で記述されます。
たとえば、2pxの赤い実線を表示したい場合は、次のように書きます。
.box {
border: 2px solid red;
}borderは1行でまとめて指定できるため、初心者の方にも覚えやすいCSSプロパティです。
border-styleで指定できる線の種類
borderの「線の種類」は、border-styleというプロパティで指定できます。
代表的な種類には、次のようなものがあります。
solid：実線
solidは、途切れることのない普通の線です。
Webサイトでは最もよく使われるborderの種類のひとつです。
見出しやボックス、画像の周囲など、さまざまな場所で利用できます。
.box {
border: 2px solid #333;
}dashed：破線
dashedを指定すると、線が一定間隔で途切れる「破線」になります。
通常の枠線とは少し違った見た目にしたい場合や、注意事項を囲むボックスなどに使われます。
.box {
border: 2px dashed #333;
}dotted：点線
dottedは、点が連続しているような「点線」を表示します。
控えめな区切り線や、装飾目的の枠線などに使用できます。
.box {
border: 2px dotted #333;
}double：二重線
doubleを指定すると、2本の線が並んだ「二重線」になります。
見出しや特別なコンテンツを目立たせたい場合などに利用できます。
なお、二重線を表示する場合は、ある程度の線の太さが必要です。
.box {
border: 4px double #333;
}groove：立体的なくぼんだ線
grooveは、枠線が立体的に見えるようなデザインです。
昔ながらのWebデザインで見かけることがありますが、現在のWebサイトでは使用頻度はそれほど高くありません。
.box {
border: 5px groove #999;
}ridge：立体的に盛り上がった線
ridgeは、grooveとは反対に、枠線が盛り上がって見えるようなデザインです。
こちらも立体的な表現ができますが、最近のシンプルなWebデザインではあまり使われない種類です。
.box {
border: 5px ridge #999;
}inset：内側にへこんだような線
insetを指定すると、要素が内側にへこんでいるような見た目になります。
.box {
border: 5px inset #999;
}outset：外側に盛り上がったような線
outsetは、要素が外側に盛り上がっているような見た目になります。insetとoutsetは立体感のある表現ができますが、ブラウザや色によって見え方が変わる点に注意しましょう。
.box {
border: 5px outset #999;
}border-styleの種類一覧
ここまで紹介したborderの種類をまとめると、次のようになります。
| border-style | 線の見た目 |
|---|---|
| solid | 実線 |
| dashed | 破線 |
| dotted | 点線 |
| double | 二重線 |
| groove | くぼんだような立体線 |
| ridge | 盛り上がったような立体線 |
| inset | 内側にへこんだような線 |
| outset | 外側に盛り上がったような線 |
初心者の方は、まずsolid、dashed、dotted、doubleの4種類を覚えておくとよいでしょう。
borderは上下左右で別々に指定できる
borderは、要素の4方向すべてに同じ枠線を付けるだけではありません。
「下だけ線を付けたい」といった指定もできます。
.title {
border-bottom: 2px solid #333;
}この場合は、要素の下側だけに実線が表示されます。
同じように、次のプロパティを使って方向を指定できます。
- border-top：上
border-right：右border-bottom：下border-left：左
たとえば、見出しの下に線を付けたい場合はborder-bottomが便利です。
borderの太さや色も変更できる
borderは線の種類だけでなく、太さや色も自由に変更できます。
.box {
border: 3px solid #3498db;
}この例では、3pxの青色の実線を指定しています。
線を細くしたい場合は1px、少し目立たせたい場合は3pxなど、デザインに合わせて調整できます。
CSS borderを使うときのポイント
初心者の方がborderを使うときは、まず「どこに、どんな線を付けたいのか」を考えるとわかりやすくなります。
たとえば、以下のように使い分けられます。
- ボックスを囲みたい：
border - 見出しの下だけに線を付けたい：
border-bottom - 控えめな区切りを作りたい
：dottedやdashed - シンプルな枠線にしたい：
solid
特にWebサイトでは、solidを使ったシンプルな枠線がよく利用されます。
まとめ
CSSのborderは、HTMLの要素に枠線を付けるための基本的なCSSプロパティです。
線の種類はborder-styleで指定でき、代表的なものには次の種類があります。
まずはsolid、dashed、dotted、doubleから覚えて、必要に応じてほかの種類も使ってみましょう。
borderはWeb制作で使用する機会が多いCSSなので、基本的な書き方を覚えておくと、Webサイトのデザインを整えるときに役立ちます。
