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

CSSのoutline-styleプロパティの使い方を徹底解説！構文・値・実例付き

outline-styleプロパティとは

CSSのoutline-styleプロパティは、要素の境界線（ボーダー）の外側に線を描画するために使用します。borderプロパティとの最大の違いは、outlineが要素の寸法（width・height）に含まれないという点です。そのため、レイアウトに影響を与えることなく要素の周囲に線を表示できます。

なお、outline-styleだけでは線は表示されません。実際に線を見えるようにするには、outline-width（太さ）とoutline-color（色）も併せて指定するのが一般的です。

構文（シンタックス）

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

Selector {
    outline-style: /*値*/
}

指定できる主な値

  • none / hidden … アウトラインを非表示にする（初期値はnone）
  • dotted … 点線で表示
  • dashed … 破線で表示
  • solid … 1本の実線で表示
  • double … 2本の実線で表示
  • groove … 凹んだように見える立体的な線
  • ridge … 隆起したように見える立体的な線
  • inset … 要素全体が凹んで見える線
  • outset … 要素全体が浮き上がって見える線
  • auto … ブラウザが自動的にスタイルを選択

サンプルコード1：span要素とdiv要素への適用

それでは、outline-styleプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
span {
    margin: 15px;
    padding: 20px;
    border-style: solid;
    border-color: #dc3545;
    position: absolute;
    outline-width: 5px;
    outline-style: double;
    outline-color: orange;
    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-styleプロパティの使い方を徹底解説！構文・値・実例付き

この例では、span要素にオレンジ色のdouble（二重線）のアウトラインを、div要素には黒のgroove（溝線）のアウトラインを適用しています。

サンプルコード2：p要素への適用

続いて、別のoutline-styleプロパティの使用例です。

<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style</title>
<style>
#container {
    width:50%;
    margin:50px auto;
}
p {
    margin:auto;
    border-style: ridge;
    border-width: 10px;
    border-color: lightblue;
    outline-style: dashed;
    outline-color: violet;
}
</style>
</head>
<body>
<div id="container">
<p>Video Tutorials helps in understanding the technology with live running examples and practical implementation.</p>
</div>
</body></html>

出力結果

上記コードの表示結果は以下のようになります。

CSSのoutline-styleプロパティの使い方を徹底解説！構文・値・実例付き

この例では、水色のridge（隆起線）ボーダーの外側に、バイオレット色のdashed（破線）アウトラインが描画されます。

まとめ

outline-styleプロパティを使うことで、要素のレイアウトサイズに影響を与えずに装飾的な枠線を追加できます。フォーカス時のハイライト表示などにも活用される便利なプロパティなので、borderとの違いを理解して使い分けましょう。

  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