概要
CSSプロパティ「outline」は、アウトライン（輪郭線）のスタイルをまとめて指定することができるショートハンドです。以下のCSSプロパティが設定可能です。
- outline-color ･･･アウトラインの色を指定します
- outline-style ･･･アウトラインのスタイルを指定します
- outline-width ･･･アウトラインの太さを指定します
値と解説
アウトラインの種類は以下の通りです。詳しい表示は outline-style ページに記載されています。
| 値 | 説明 |
|---|---|
| none | アウトラインは表示されません |
| solid | 一本線のアウトラインが表示されます |
| dotted | １列にならんだドット模様のアウトラインが表示されます |
| dashed | 破線のアウトラインが表示されます |
| double | 二本線のアウトラインが表示されます |
| groove | 立体的で窪んだ線が表示されます |
| ridge | 立体的で隆起した線が表示されます |
| inset | grooveと似てますが立体的で窪んだ線が表示されます |
| outset | ridgeと似てますが、立体的で隆起した線が表示されます |
またアウトラインを表示するには border プロパティを利用する方法もあります。しかしこの２つには次のような異なる特徴があります。
アウトラインは上下左右の概念がなく、文字通りアウトライン（縁取り）をつけます。一方 border は上下左右それぞれを指定することができます。
<div class="outline">この要素にはoutlineプロパティが指定されています。要素の縁取りをします</div><div class="border">この要素にはborderプロパティが指定されてます。上下左右それぞれ別の指定が可能です</div>
<style>
div {
width: 250px;
height: 100px;
background-color: #def;
margin-bottom: 10px;
}
.outline {
outline: 3px solid orange;
}
.border {
border-top: 1px solid red;
border-right: 3px solid blue;
border-bottom: 5px dotted orange;
border-left: 7px double green;
}
</style>またoutlineの幅に関しては、outlineはいくら値を大きくしても要素の幅として計算されません。一方border プロパティは要素の幅として計算されます。この違いを見てみましょう。
<div class="outline5px">この要素には5pxのoutlineプロパティが指定されています。幅を太くしても要素の位置は変わりません。</div>
<div class="outline20px">この要素には20pxのoutlineプロパティが指定されています。幅を太くしても要素の位置は変わりません。</div>
<div class="border-left">この要素には、幅50pxのborder-leftプロパティが指定されてます。幅の分だけ右側にずれてることがわかります。</div>
<style>
div {
width: 250px;
height: 100px;
background-color: #def;
margin: 20px;
}
.outline5px {
outline: 5px solid orange;
}
.outline20px {
outline: 20px solid orange;
}
.border-left {
border-left: 50px solid green;
}
</style>実用における注意点
このプロパティで表示させたアウトラインには border-radius プロパティなどで角を丸くすることはできないので注意が必要です。
それぞれのdiv要素に20pxの角丸を指定していますが、outlineプロパティには変化がないことが確認できます。
<div class="outline">角を丸くすることはできません</div>
<div class="border">角丸をつけるにはborderプロパティが適しています</div>
<style>
div {
width: 250px;
height: 100px;
background-color: #def;
margin-bottom: 10px;
border-radius: 20px;
}
.outline {
outline: 5px solid orange;
}
.border {
border: 5px solid green;
}
</style>使用例
ボタンを押すとテキスト要素にアウトラインが表示される実装例です。
またボタンを押したときにボタン自身にもアウトラインが表示されたかと思います。これはbutton要素に初期値として設定されている為、active状態になると（クリックされると）outlineが表示されるわけです。
<div>
<button>ボタンを押してみてください</button>
<p>ボタンを押すとアウトラインが表示されます</p>
<div>
<style>
div {
text-align: center;
width: 300px;
}
p {
font-size: 12px;
}
button {
background: #eef;
border: 1px solid #ddd;
padding: 8px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
margin-bottom: 10px;
}
button:active + p {
outline: 3px solid orange;
}
</style>