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

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

outline-colorプロパティとは

outline-colorプロパティは、要素のボーダーの外側に指定した色の線(アウトライン)を描くためのCSSプロパティです。borderプロパティで設定する境界線とよく似ていますが、アウトラインは要素の幅・高さなどの寸法計算には含まれないという点が大きく異なります。そのため、レイアウトに影響を与えることなく要素の外側へ視覚的な強調を加えたい場合に非常に便利です。

基本の構文

CSS outline-colorプロパティの構文は以下の通りです。

Selector {
    outline-color: /* 値 */;
}

注意： outline-colorを宣言する前に、必ずoutline-styleプロパティを定義しておく必要があります。outline-styleの初期値は「none」のため、スタイルが指定されていないとアウトライン自体が表示されません。

指定できる主な値

  • <color> … red、#00ff00、rgb(0, 128, 0)など、任意の色を指定できます。
  • invert … 背景色を反転させた色で表示します(対応していないブラウザもあります)。
  • transparent … 透明なアウトラインを指定します。
  • initial / inherit … 初期値を適用するか、親要素から継承します。

使用例1：円形要素へのアウトライン適用

まずは、span要素とdiv要素に対してoutline-colorプロパティを適用する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
span {
    margin: 15px;
    padding: 20px;
    border-style: solid;
    border-color: #f28500 #dc3545;
    position: absolute;
    outline-width: 5px;
    outline-style: double;
    outline-color: green;
    border-radius: 50%;
}
#showDiv {
    margin:auto;
    border-style: solid;
    border-color: darkmagenta dodgerblue;
    outline-style: groove;
    outline-color: black;
    height: 80px;
    width: 80px;
}
#container {
    width:50%;
    margin:50px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="showDiv"><span></span></div>
</div></body></html>

上記コードの出力結果は次の通りです。

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

使用例2：段落テキストへのアウトライン適用

続いて、p要素に対してoutline-styleと組み合わせてoutline-colorを使用する例です。破線(dashed)スタイルのアウトラインにバイオレット色を指定しています。

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
#container {
    width:50%;
    margin:50px auto;
}
p {
    margin:auto;
    border-style: ridge;
    border-width: 10px;
    border-color: lightblue;
    outline-style: dashed;
    outline-width: 5px;
    outline-color: violet;
}
</style>
</head>
<body>
<div id="container">
<p>Reach millions of professionals with video tutorials.</p>
</div>
</body>
</html>

上記コードの出力結果は次の通りです。

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

まとめ

outline-colorプロパティを使えば、要素のレイアウトサイズに影響を与えることなく、外側に好きな色のアウトラインを追加できます。フォームのフォーカス時のハイライト表示など、実務でも活用場面の多いプロパティです。使用する際は、outline-styleとのセット指定を忘れないようにしましょう。

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

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

  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