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

CSSのborder-colorとoutline-color：境界線と輪郭の色設定をマスターする

CSSでは、要素の境界線（ボーダー）の色と輪郭（アウトライン）の色を個別に定義できます。ボーダーと異なり、アウトラインはレイアウト上のスペースを一切占有しないという特徴があります。border-colorプロパティは要素のボーダーの色を設定するために使用し、outline-colorプロパティはアウトラインの色を設定するために使用します。

構文

CSSのborder-colorプロパティおよびoutline-colorプロパティの構文は以下のとおりです。

/*border-colorの設定*/
セレクタ {
    border-color: /*値*/
}
/*outline-colorの設定*/
セレクタ {
    outline-color: /*値*/
}

border-colorには1〜4つの色の値を指定でき、上・右・下・左のボーダーそれぞれに異なる色を適用できます。一方、outline-colorは輪郭全体に単一の色を適用します。なお、outline-colorを有効にするには、outline-styleが「none」以外の値に設定されている必要がある点に注意してください。

例1：border-radiusと組み合わせた使用例

以下の例は、CSSのborder-colorおよびoutline-colorプロパティの動作を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    margin: 15px;
    padding: 20px;
    border-style: solid;
    border-color: limegreen crimson;
    position: absolute;
    outline-width: 5px;
    outline-style: ridge;
    outline-color: orange;
    top: 15px;
    border-radius: 50%;
}
div {
    margin: auto;
    border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline-style: dotted;
    outline-color: black;
    height: 80px;
    width: 80px;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>

出力結果

上記のコードは次のような出力を生成します。

CSSのborder-colorとoutline-color：境界線と輪郭の色設定をマスターする

例2：テキスト要素への適用例

次の例では、段落要素に対してボーダーとアウトラインの色を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-width: 5px;
    border-style: ridge;
    border-color: lightblue;
    outline-style: solid;
    outline-color: darkviolet;
}
</style>
</head>
<body>
<h2>試験時間</h2>
<p>入試の実施時間は午後3時〜午後5時です。受験者の皆様は、午後2時45分までに会場へお越しください。</p>
</body>
</html>

出力結果

上記のコードは次のような出力を生成します。

CSSのborder-colorとoutline-color：境界線と輪郭の色設定をマスターする

まとめ

border-colorとoutline-colorを使い分けることで、要素の視覚的な表現の幅が大きく広がります。ボーダーはレイアウトに影響を与えるのに対し、アウトラインはレイアウトを崩すことなく要素の外側に描画されるため、フォーカス表示やハイライトなどに特に適しています。両者の特性を理解して、効果的に活用しましょう。

  1. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp

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

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &