outlineプロパティは、要素の外枠にアウトラインを設定するためのプロパティです。borderと異なり、アウトラインは要素のサイズに影響を与えず、要素の外側に描画されます。また、outlineには角丸などのスタイルは設定できません。
outlineプロパティの値とその効果の一覧
outline-color– アウトラインの色を指定します。outline-style– アウトラインのスタイルを指定します（例: solid, dashed, dotted）。outline-width– アウトラインの幅を指定します（例: thin, medium, thick, またはpx単位で指定）。
注意点や関連情報
outlineプロパティはborderと異なり、ボックスモデルのサイズには影響しません。そのため、アウトラインを設定しても要素のレイアウトは変わらず、要素の外側に描画されます。また、outlineは角を丸めることができませんが、フォーカスが当たった要素の視認性を高めるために使用されることが一般的です。
outlineが効かない時の原因と対策
要素にフォーカスが当たっていない
outlineは、通常フォーカスされた要素に対して適用されることが多いです。要素にフォーカスが当たっていない場合、outlineが表示されません。
対策: フォーカスを得たときにoutlineを表示したい場合は、:focusや:hoverなどの疑似クラスを使って、フォーカス時にoutlineを設定します。例えば、button:focus { outline: 2px solid blue; }のように設定します。
outlineがインライン要素に適用されている
インライン要素（<span>や<a>など）にoutlineが適用される場合、視覚的に確認しにくいことがあります。インライン要素はblock要素に比べて、outlineの効果がわかりにくいことが多いです。
対策: インライン要素に対してoutlineを適用する場合、display: inline-blockやdisplay: blockを使用して、視覚的な効果を確認しやすくします。
outline-offsetが原因で見えなくなっている
outline-offsetプロパティを使ってoutlineの位置を変更している場合、設定が不適切だと、outlineが要素から離れすぎて視覚的に見えなくなることがあります。
対策: outline-offsetの値を確認し、適切な距離に設定します。例えば、outline-offset: 2px;など、要素に対して自然な位置に調整します。
共通するCSSコード
.css-sample-container {
width: 100%;
margin: 20px 0;
padding: 10px;
border: 2px solid #000;
overflow: hidden;
}
.css-sample-box {
width: 200px;
height: 150px;
margin: 0 auto;
text-align: center;
line-height: 150px;
font-size: 16px;
background-color: #f0f0f0;
}
outline-color: red;
アウトラインの色を赤に設定します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-outline-color">
outline-color: red
</div>
</div>
CSSコード
.css-sample-outline-color {
outline-color: red;
outline-style: solid;
outline-width: 2px;
}
表示結果
outline-style: dashed;
アウトラインのスタイルを点線（dashed）に設定します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-outline-style">
outline-style: dashed
</div>
</div>
CSSコード
.css-sample-outline-style {
outline-color: blue;
outline-style: dashed;
outline-width: 2px;
}
表示結果
outline-width: 5px;
アウトラインの幅を5pxに設定します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-outline-width">
outline-width: 5px
</div>
</div>
CSSコード
.css-sample-outline-width {
outline-color: green;
outline-style: solid;
outline-width: 5px;
}
表示結果
まとめ
outlineプロパティは、要素の外枠にアウトラインを設定します。outline-colorでアウトラインの色を設定できます。outline-styleでアウトラインのスタイル（solid, dashedなど）を指定します。outline-widthでアウトラインの幅を調整できます。- アウトラインは要素のサイズに影響を与えず、要素の外側に描画されます。