領域の境界線を描画するコードを紹介します。

概要

境界線を描画する場合は スタイルシートの border プロパティを用います。

書式

下記の書式となります。

記述例

 border:solid 1px #C0CC0;

上下左右の枠線を個別に指定する場合

borderプロパティで指定した場合、上下左右すべての境界線が設定されます。上下左右の境界線の設定をそれぞれ変更したい場合は、

• border-top
• border-bottom
• border-left
• border-right

プロパティを用います。

要素を個別に設定する場合

borderプロパティでは、スタイル、線幅、カラーを同時に設定しますが、それぞれの要素を個別に設定する場合は

• border-style
• border-width
• border-color

プロパティを用います。

上下左右の枠線を個別の要素で設定する場合

先に紹介した、boder-top,border-bottomなどの上下左右の枠線を設定するプロパティと、border-color,border-styleなどのスタイルを設定するプロパティを組み合わせて設定したい場合があります。CSSでは、以下のプロパティが用意されています。

プロパティ名	書式	意味
border	border:(スタイル) (線幅) (カラー)	上下左右の枠線を指定したスタイル、線幅、カラーに設定します。
border-style	border-style:(スタイル)	上下左右の枠線を指定したスタイルに設定します。
border-width	border-width:(線幅)	上下左右の枠線を指定した線幅に設定します。
border-color	border-color: (カラー)	上下左右の枠線を指定したカラーに設定します。
border-top	border-top:(スタイル) (線幅) (カラー)	上の枠線を指定したスタイル、線幅、カラーに設定します。
border-top-style	border-top-style:(スタイル)	上の枠線を指定したスタイルに設定します。
border-top-width	border-top-width:(線幅)	上の枠線を指定した線幅に設定します。
border-top-color	border-top-color: (カラー)	上の枠線を指定したカラーに設定します。
border-bottom	border-bottom:(スタイル) (線幅) (カラー)	下の枠線を指定したスタイル、線幅、カラーに設定します。
border-bottom-style	border-bottom-style:(スタイル)	下の枠線を指定したスタイルに設定します。
border-bottom-width	border-bottom-width:(線幅)	下の枠線を指定した線幅に設定します。
border-bottom-color	border-bottom-color: (カラー)	下の枠線を指定したカラーに設定します。
border-left	border-bottom:(スタイル) (線幅) (カラー)	左の枠線を指定したスタイル、線幅、カラーに設定します。
border-left-style	border-bottom-style:(スタイル)	左の枠線を指定したスタイルに設定します。
border-left-width	border-bottom-width:(線幅)	左の枠線を指定した線幅に設定します。
border-left-color	border-bottom-color: (カラー)	左の枠線を指定したカラーに設定します。
border-right	border-bottom:(スタイル) (線幅) (カラー)	右の枠線を指定したスタイル、線幅、カラーに設定します。
border-right-style	border-bottom-style:(スタイル)	右の枠線を指定したスタイルに設定します。
border-right-width	border-bottom-width:(線幅)	右の枠線を指定した線幅に設定します。
border-right-color	border-bottom-color: (カラー)	右の枠線を指定したカラーに設定します。

複数の値を与えた場合の動作

下記のプロパティには、複数の値を設定できます。値の個数と設定内容は以下の表のとおりです。

• border-style, border-width, border-color
• border-top-style, border-top-width, border-top-color
• border-bottom-style, border-bottom-width, border-bottom-color
• border-left-style, border-left-width, border-left-color
• border-right-style, border-right-width, border-right-color

複数値の動作

(プロパティ名):(スタイル1)	上下左右の枠線を指定したスタイルに設定します。
(プロパティ名):(スタイル1) (スタイル2)	上下を(スタイル1)、左右を(スタイル2)のスタイルに設定します。
(プロパティ名):(スタイル1) (スタイル2) (スタイル3)	上を(スタイル1)、左右を(スタイル2)、下を(スタイル3)のスタイルに設定します。
(プロパティ名):(スタイル1) (スタイル2) (スタイル3) (スタイル4)	上を(スタイル1)、右を(スタイル2)、下を(スタイル3)、左を(スタイル4)のスタイルに設定します。

スタイルの一覧

boder, border-styleなどのプロパティで設定できるスタイルには以下が用意されています。

スタイル	意味
solid	実線
double	二重線
dotted	点線
dashed	破線
groove	枠線が奥に沈み込むような効果を描画します
ridge	枠線が手前に浮き出すよような効果を描画します
inset	枠の領域が奥に沈み込むような効果を描画します
outset	枠の領域が手前に浮き出すよような効果を描画します

線幅

線幅は数値を指定する方法と、キーワードで指定する方法が利用できます。

使える単位の一覧

値	説明	例
px	ピクセル	font-size:20px
em	"M"の高さを基準とした大きさ	font-size:2em
ex	"x"の高さを基準とした大きさ	font-size:3ex
mm	ミリメートル	font-size:10mm
cm	センチメートル	font-size:2cm
in	インチ	font-size:4in

使えるキーワードの一覧

キーワード	太さ
thin	細い線
medium	中太線
thick	太線

カラー指定

カラーの指定についてはこちらの記事を参照してください。

実装例

コード

下記のコードを記述します。

.SimpleFrame-solid-1 {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 1px solid #ff6a00;
}

.SimpleFrame-solid-3 {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 3px solid #ff6a00;
}

.SimpleFrame-solid-10 {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 10px solid #ff6a00;
}

.SimpleFrame-double {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 5px double #ff6a00;
}

.SimpleFrame-dot {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 3px dotted #ff6a00;
}

.SimpleFrame-dash {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 3px dashed #ff6a00;
}



.SimpleFrame-groove {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 10px groove #ff6a00;
}

.SimpleFrame-ridge {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 10px ridge #ff6a00;
}

.SimpleFrame-inset {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 10px inset #ff6a00;
}


.SimpleFrame-outset {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 16px;
  border: 10px outset #ff6a00;
}


.SimpleFrame-none {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 32px;
  border: 3px none #ff6a00;
}

.SimpleFrame-hidden {
  background-color: #E0E0E0;
  width: 280px;
  height: 64px;
  margin-left: 96px;
  margin-top: 32px;
  border: 3px hidden #ff6a00;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="border-simple.css" />
</head>
<body>
    
    <div style="margin-top:16px;">実線が表示されるスタイル</div>

    <div class="SimpleFrame-solid-1">枠です (border:solid 1px)</div>
    <div class="SimpleFrame-solid-3">枠です (border:solid 3px)</div>
    <div class="SimpleFrame-solid-10">枠です (border:solid 10px)</div>

    <div class="SimpleFrame-double">枠です (border:double)</div>

    <div style="margin-top:32px;">点線、破線が表示されるスタイル</div>
    <div class="SimpleFrame-dot">枠です (border:dotted)</div>
    <div class="SimpleFrame-dash">枠です (border:dashed)</div>

    <div style="margin-top:32px;">立体枠が表示されるスタイル</div>
    <div class="SimpleFrame-groove">枠です (border:groove)</div>
    <div class="SimpleFrame-ridge">枠です (border:ridge)</div>
    <div class="SimpleFrame-inset">枠です (border:inset)</div>
    <div class="SimpleFrame-outset">枠です (border:outset)</div>

    <div style="margin-top:32px;">枠線が表示されないスタイル</div>
    <div class="SimpleFrame-none">枠です (border:none)</div>
    <div class="SimpleFrame-hidden">枠です (border:hidden)</div>

</body>
</html>

解説

CSSでクラスに応じた枠のスタイルを定義して、枠ごとに異なるスタイルの境界線を描画します。

実行結果

FrameSimple.htmlを表示します。下図の画面が表示されます。

boderのスタイルをsolidにすると実線、doubleにすると二重線で表示されます。また、スタイルをdottedに設定すると点線、dashedにすると破線で表示されます。 borderのスタイルをgroove, ridge,inset,outsetに設定すると立体的な枠として描画されます。またnone,hiddenを指定すると枠線を非表示にできます。