border/枠全般

borderプロパティを使うと上下左右の枠の種類、太さ、色を一括で指定出来ます。border-topは上の枠、border-rightは右、border-bottomは下、border-leftは左の枠の種類、太さ、色の設定になります。

説明

 枠の設定は個別に以下の設定が可能ですが、borderはこれらの設定を一括で行えます。

・border-style
枠の種類
・border-width
枠の太さ
・background-color
枠の色

 border-topは上、border-rightは右、border-bottomは下、border-leftは左の枠に対して上記を一括で設定出来ます。

構文

 borderプロパティの構文は以下の通りです。

border: 種類 太さ 色;

 枠線の種類は以下の10個から指定出来ます。

【枠線の種類】
種類 表示
solid 実線
dotted 点線
dashed 破線
double 二重線
groove 谷型
ridge 山型
inset 左と上が濃い
outset 右と下が濃い
hidden 非表示
none なし(デフォルト)

 枠線の太さの例は以下の通りです。

【枠線の太さ】
種類 表示
thin 細線
medium 普通
thick 太線
px ピクセル指定
em 文字に対する割合

 色は以下の4種類から指定出来ます。

・英語
 redやblue等です。
・rgb(,,)
 数字は左から赤、緑、青をそれぞれ0〜255で指定します。数字が大きい程その色が濃くなり、表示はそれぞれの色を混ぜた色となります。
・rgba(,,,透明度)
 rgbの3色に加えて透明度を指定出来ます。透明度はIE8以下ではサポートされていないため透明度は無視され、色も指定した色と異なって表示されます。
・#16進数
 16進数は上記のrgbをそれぞれ16進数に直した値を繋げて記述します。例えばrgb(2,10,16)と同じ色は#020A10です。2は16進数でも2、10は16進数ではA、16は16進数で10でこれを2桁に直して繋げると020A10になるためです。

 尚、16進数は3桁でも記述出来ます。例えば#22AA33は#2A3と記述出来ます。6桁の場合は16×16×16×16×16×16=16,777,216通りの色が表現出来ますが、3桁の場合は16×16×16=4,096通りの色が表現出来ます。

利用例

 borderの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
border: solid thin red;
}

<div>ホームページ</div>

 上記は枠線を細い実線で赤色に指定しています。

 上記を表示すると以下になります。

ホームページ

 もう1つ例を示します。

div {
border: dotted 5px rgba(255,0,0,0.5);
}

<div>ホームページ</div>

 上記は枠を5pxの点線で色は赤で半透明にしています。

 上記を表示すると以下になります。

ホームページ

 尚、IE8以下ではrgbaに対応していません。

設定の詳細

 設定の詳細と利用例は以下をご参照下さい。

関連ページ

・ホームページ作成「ボックスのまとめ

 borderだけでなく、背景、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)