CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説
CSS outlineショートハンドプロパティとは？
outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。
構文
CSS outlineショートハンドプロパティの構文は次のとおりです。
Selector {
outline: /*値*/
}
指定できる値
- outline-width：線の太さ（thin / medium / thick または px などの長さの値）
- outline-style：線のスタイル（solid / dashed / dotted / double / groove / ridge / inset / outset など）※必須
- outline-color：線の色（色名 / カラーコードなど）
各値は順不同で指定でき、省略した場合は初期値が適用されます。ただし、outline-styleを省略すると線が一切表示されなくなるため、必ず指定するようにしましょう。
使用例1：円形要素へのoutline適用
まず、outlineショートハンドプロパティの基本的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: #f28500 #dc3545;
position: absolute;
outline: 5px double green;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline: groove 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>
出力結果
上記コードの出力結果は以下の通りです。
使用例2：テキスト段落へのoutline適用
続いて、段落テキストに対してoutlineショートハンドプロパティを適用する例です。
<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 10px;
border-color: orange;
outline: 5px dashed yellow;
}
</style>
</head>
<body>
<div id="container">
<p>Coding Ground is loved by millions of programmers around the globe.</p>
</div>
</body>
</html>
出力結果
上記コードの出力結果は以下の通りです。
まとめ
outlineショートハンドプロパティを使えば、「太さ・スタイル・色」を1行で簡潔に指定でき、コードの可読性も向上します。borderと違いレイアウトに影響しないため、フォーカス表示や強調などにも活用できる便利なプロパティです。
-
CSSのoutline-widthプロパティとは？使い方を実例付きで解説
outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ { outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty
-
CSSのborder-colorプロパティの使い方を徹底解説
CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &