outline 【アウトライン】

[IE5] [Fx2] [Op7]

outlineプロパティは、アウトラインの表示方法をまとめて指定する際に使用します。スタイル・太さ・色のうち、指定したい値を好きな順序で、スペースで区切って記述します。輪郭線を表示させる場合には、必ずoutline-styleの値を変えましょう。

borderプロパティと違って、上下左右に独立した指定をする事は出来ません。

アウトラインの色の指定
アウトラインの種類の指定
アウトラインの太さの指定

outlineの使用例

CSSファイル

.sample001 {
 outline: 1px solid #000000;
 margin: 20px 10px;
}
.sample002 {
 outline: 3px dashed #ff9999;
 margin: 20px 10px;
}
.sample003 {
 outline: 5px outset #9999ff;
 margin: 20px 10px;
}

HTMLソース

<p class="sample001">アウトラインサンプル</p>
<p class="sample002">アウトラインサンプル</p>
<p class="sample003">アウトラインサンプル</p>

表示すると

アウトラインサンプル

アウトラインサンプル

アウトラインサンプル

アウトライン関連項目

outline アウトラインのスタイル・太さ・色を指定する 
outline-color アウトラインの色を指定する 
outline-style アウトラインのスタイルを指定する 
outline-width アウトラインの太さを指定する 

戻る

TOP