CSSを使って線（boader）を表現する

様々な線を表示する

borderプロパティを使うと、線・点線・破線などを表示することができます。

.border {
border:線の種類太さ色;
}

border:に続いて、「線の種類」「線の太さ」「色」を指定します。
例えば、「3pxの赤い1本線」にしたい場合は、以下のように記述します。

[CSSの記述例]

.border {
border:solid 3px #F00;
}

[表示サンプル]

テキストテキスト

「solid」は1本線のことで、「3px」は線の太さ、「#F00」は赤色を指定しています。
直線以外にも、様々な線を表示することが可能です。

様々な線の種類

線の種類	効果
solid	1本線を表示します。
double	2本線を表示します。
dashed	破線を表示します。
dotted	点線を表示します。
groove	立体的な、凹んだ線を表示します。
ridge	立体的な、隆起した線を表示します。
outset	上と左が明るく、右と下が暗く表示されます。少し立体的に見えます。一部に指定しても立体感は出ません
inset	上と左が暗く、右と下が明るく表示されます。少し立体的に見えます。一部に指定しても立体感は出ません。
none	何も表示しません。太さの値も0です。

なお、borderもmarginやpaddingと同じように、四方をそれぞれ個別に指定することができます。

それぞれ個別に指定する

例えば、上はsolid、右はdouble、下はdashed、左はdottedといったことも可能です。
その場合は、以下のように記述します。

[CSSの記述例]

.border {
border-top:solid 3px #F00;
border-right:double 3px #F00;
border-bottom:dashed 3px #F00;
border-left:dotted 3px #F00;
}

[表示サンプル]

テキストテキスト

特定の位置にだけ線を引きたい場合などは、border-場所:線の種類太さ色;を指定するとOKです。

覚えておきたいポイント

アイディア次第で色々使える

borderは使い方次第で様々な表現が可能です。
例えばBOXに枠線を付けたり、border-bottomを使い区切り線を表現したり。
コンテンツとコンテンツの間の視覚的な仕切り線としても使えます。

borderを使ったテクニック

borderは他のプロパティと組合せの相性がよく、一緒に利用される場合が多くあります。

[使用例.1] コンテンツの枠線

サイドナビやメインコンテンツ、ヘッダーやフッターなどの枠線・境界線を表す場合に利用されます。

例えば、下の画像の各コンテンツの枠線は、borderを使って表示しています。
borderがなければ、どこからどこまでが境界線なのか明確でなく、わかりづらいですね。

[使用例.2] 強調したい文字や見出し

強調したい文字や、ちょっとした飾り気のある見出しを表示する際にも、borderが使われます。

実はこのサイトで使っている見出し文字も、borderを使って表現しています。

border-leftで左側に太めの線を表示し、背景色を変更しています。
さらに、文字色の変更とpaddingでレイアウトを整えています。

[CSSの記述例]

.midashi {
color:#666;　←　文字の色を#666
border-left:solid 5px #9FD6D2;　←　左線を5px、#9FD6D2の1本線
padding:5px 0px 5px 20px;　←　領域内余白を指定
margin-bottom:20px;　←　領域間余白を20px
background-color:#FCFBFA;　←　背景色を#FCFBFA
}

このCSSを記述した上で、<div class="midashi">テキスト</div>と入力すると、このサイトで使っている見出しと同じものが表示されます。