border-color/枠線の色

border-colorプロパティを使うと枠線の色を指定出来ます。

説明

 border-colorプロパティは枠線の色を上下左右一括で設定出来ます。border-top-colorは上の枠線の色、border-right-colorは右、border-bottom-colorは下、border-left-colorは左の枠線の色の設定になります。

border-color説明

構文

 border-colorプロパティは以下の34つの指定方法があります。

border-color: 英語;
border-color: rgb(,,);
border-color: rgba(,,,透明度);
border-color: #16進数;

 border-top-colorプロパティも同様で以下の3つの指定方法があります。

border-top-color: 英語;
border-top-color: rgb(,,);
border-top-color: rgba(,,,透明度);
border-top-color: #16進数;

 border-right-color、border-bottom-color、border-left-colorも同様です。

 英語はredやblue等です。

 rgbは左から赤、緑、青をそれぞれ0〜255で指定します。数字が大きい程その色が濃くなり、表示はそれぞれの色を混ぜた色となります。

 rgbaではrgbの3色に加えて透明度を指定出来ます。透明度はIE8以下ではサポートされていないため透明度は無視され、色も指定した色と異なって表示されます。

 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-colorの英語指定の利用例

 border-colorの英語を指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
border-style: solid;
border-color: blue;
}

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

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

ホームページ

 英語指定が一番簡単に色を指定出来ますが、細かく調整したい場合は不向きです。

border-colorのRGB指定の利用例

 rgbを指定した利用例は以下の通りです。

div {
border-style: solid;
border-color: rgb(200,100,20);
}

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

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

ホームページ

 RGBは指定したい色に対する数字の組み合わせが難しいですが、細かく調整が出来ます。

 又、Excel等を利用すると簡単に確認が出来ます。

 まず、セルを右クリックして「セルの書式設定」を選択すると以下の画面になります。

Excelでの色の確認1

 上記で背景色を設定し、赤枠の「その他の色」をクリックすると以下の「色の設定」画面になります。そこで「ユーザー設定」タブをクリックするとRGBが表示されます。

Excelでの色の確認2

 又、「標準」タブをクリックすると多くの色から選択出来ます。選択した色は「ユーザー設定」のタブでRGBが確認出来ます。

Excelでの色の確認3

透明度の利用例

 rgbaで透明度を利用する例は以下の通りです。

div {
border-style: solid;
border-color: rgba(200,100,20,0.5);
}

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

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

ホームページ

 透明度を指定せずに同じ色を表示すると以下になります。

ホームページ

 かなり薄く表示されていると思います。

 透明度は0は透明、1以上は指定しないのと同じになります。

border-colorの16進数の利用例

 16進数を利用する例は以下の通りです。

div {
border-style: solid;
border-color: #C86414;
}

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

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

ホームページ

 上記はrgb(200,100,20)と指定したのと同じ色になります。

border-top-color利用例

 border-top-colorの利用例は以下の通りです。

div {
border-style: solid;
border-top-color: red;
}

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

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

ホームページ

 上だけ色が赤になっています。

 上の線だけ変えたい、上下左右個別に指定した時等に使います。

 RGB、RGBaや16進数での指定もborder-colorと同様に使えます。

 又、border-right-color、border-bottom-color、border-left-colorについても同様の利用が出来ます。

関連ページ

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

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

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

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

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

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

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

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

Access:カウンター(total)

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