HTML&CSSコーディング
枠線の種類、太さ、色を指定する

枠線をつけるには、CSSのborderプロパティを使います。

borderプロパティを使うと、枠線のスタイル（種類）、太さ、色を一括して指定することができます。

ここでは、borderプロパティの具体的な使い方をわかりやすく解説します。

borderプロパティの値の書き方

borderプロパティには要素を囲う枠線のスタイル（種類）、太さ、色を指定します。

主なスタイルの値

スタイルは次のようなキーワードで記述します。

• 一本線：solid
• 二本線：double
• 点線：dotted
• 破線：dashed

太さの値

太さは数値で記述します。ここではpxを使ってみます。

二本線（double）の場合、外側の線、内側の線、線と線の間の余白を表示するため、3px以上ではないとうまく表示されません。

• 1px
• 2px
• 4px
• 8px

色の値

色はカラーネームまはたカラーコードで記述します。

• 赤のカラーネーム：red
• 赤のカラーコード:#FF0000
• 青のカラーネーム：blue
• 青のカラーコード：#0000FF

カラーネームは大文字でも小文字でも大丈夫です。

書き方の例

borderプロパティの3つの値は、カンマを入れずに半角スペースをあけて列記します。また、値に決まった順番はありません。

以下、例として、divタグに対してborderを設定してみます。divタグは、四角いブロック（ボックス）をつくるためのタグで、borderでレイアウトして使うことが多いです。

<div>今日は晴れでした。</div>

div {
  border: solid 1px black;
}

div {
  border: double 3px #00FA9A;
}

div {
  font-size: 24px;
  text-align: center;
  border: dotted 2px #6495ED;
}

一辺のみ指定する

borderプロパティは四辺の枠線を一括して指定します。特定の一辺のみ指定したい場合は、ロングハンドで記述する必要があります。詳しくはCSSプロパティ ショートハンドとロングハンドをご覧ください。