CSSのoutline-widthプロパティとは？使い方を実例付きで解説
outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。
構文（シンタックス）
CSSのoutline-widthプロパティの基本構文は以下の通りです。
セレクタ {
outline-width: /*値*/
}
ポイント： outline-widthを使用する前に、必ずoutline-styleプロパティを先に定義しておく必要があります。outline-styleが設定されていないと、デフォルト値「none」により輪郭線自体が表示されません。
それでは、outline-widthプロパティの具体的な使用例を見ていきましょう。
サンプルコード1
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
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>
表示結果
上記のコードを実行すると、次のように表示されます。
この例では、span要素に対して5pxの太さのridge（隆起）スタイルのオレンジ色の輪郭線が適用されています。border-radius: 50%によって円形の要素の周りにも、アウトラインが正しく描画されていることが確認できます。
サンプルコード2
続いて、別の例も見てみましょう。こちらは段落テキストに対してoutline-widthを適用したケースです。
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-width</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 15px;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
</style>
</head>
<body>
<div id="container">
<p>Learning is fun with examples and live running code.</p>
</div></body></html>
表示結果
上記のコードを実行すると、次のように表示されます。
まとめ
outline-widthプロパティを使うことで、要素の周囲に任意の太さの輪郭線を簡単に追加できます。borderと異なりレイアウト計算に影響しないため、フォーカス表示やハイライトなど、視覚的な強調を行いたい場面で活用すると効果的です。なお、outline-width単体では線が表示されないため、必ずoutline-styleと組み合わせて使用することを忘れないようにしましょう。
-
CSSのborder-colorプロパティの使い方を徹底解説
CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &
-
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