CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-colorプロパティの使い方を徹底解説

CSSのborder-colorプロパティとは

CSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。

また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。

基本構文

border-colorプロパティの基本的な書式は以下のとおりです。

セレクター {
    border-color: /* 値 */;
}

値には、キーワード（red、blueなど）、16進数カラーコード（#ff0000など）、RGBやHSLなどのカラー指定方法が使用できます。

使用例1：複数の色を同時に指定する

次の例では、span要素に3つの色、div要素に2つの色を指定しています。値が2つの場合は「上下」「左右」、3つの場合は「上」「左右」「下」に適用されます。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    margin: 10px;
    padding: 20px;
    border-style: solid;
    border-color: limegreen lightblue crimson;
}
div {
    text-align: center;
    border-style: solid;
    border-color: palevioletred steelblue;
    height: 16px;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<div>デモ</div>
<p><span>サンプル</span>CSSスタイルの動作を確認するためのテキストです。</p>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。

CSSのborder-colorプロパティの使い方を徹底解説

使用例2：個別の辺に色を指定する

次の例では、リスト項目の下辺にのみ点線状のシアン色のボーダーを設定し、段落要素には太いボーダーと左辺のみridge（隆起線）スタイルを組み合わせています。

<!DOCTYPE html>
<html>
<head>
<style>
li {
    border-bottom-color: cyan;
    border-bottom-style: dotted;
    width: 300px;
}
p {
    text-align: center;
    border-width: 8px;
    border-style: solid;
    border-color: #d11c74;
    border-left-style: ridge;
}
</style>
</head>
<body>
<h2>アクセサリー一覧</h2>
<p>自動車用アクセサリーの表示</p>
<ul>
<li>マッドフラップ</li>
<li>車用芳香剤</li>
<li>スマートフォンホルダー</li>
<li>Bluetooth機器</li>
<li>ホイールロック</li>
</ul>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。

CSSのborder-colorプロパティの使い方を徹底解説

まとめ

border-colorプロパティを使いこなすことで、要素の境界線に柔軟な配色を適用できます。すべての辺にまとめて指定するか、個別のプロパティで一辺ずつ制御するかは、デザインの目的に応じて使い分けるとよいでしょう。なお、border-colorを有効にするには、あらかじめborder-styleプロパティで線種を指定しておく必要がある点に注意してください。

  1. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty

  2. CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード

    CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da