outline-style：アウトラインのスタイルを指定する
| 適用対象 | 全ての要素 |
| 継承 | しない |
outline-styleプロパティは、アウトラインの種類を指定する際に使用します。
borderプロパティと違い、スペースを取らないためレイアウトに影響を与えません。また、上下左右に独立した指定をする事は出来ません。
outline-styleに与えられる値
- outline-style: none;
- アウトラインを表示しません。これが初期値です。
- outline-style: solid;
- 1本の線で表示されます。
- outline-style: double;
- 2本の線で表示されます。
- outline-style: groove;
- 立体的に窪んだ線で表示されます。
- outline-style: ridge;
- 立体的に隆起した線で表示されます。
- outline-style: inset;
- アウトラインで囲まれた領域が立体的に窪んだように表示されます。上下左右の色加減は自動で設定されます。
- outline-style: outset;
- アウトラインで囲まれた領域が立体的に隆起したように表示されます。上下左右の色加減は自動で設定されます。
- outline-style: dashed;
- 破線で表示されます。
- outline-style: dotted;
- 点線で表示されます。
outline-styleの使用サンプル
CSS
.box_sample {
outline-width: 1px;
outline-style: solid;
outline-color: #FF9900;
padding: 5px;
margin-bottom: 10px;
}
.input_sample01 {
outline-width: 3px;
outline-style: solid;
outline-color: #0000FF;
}
.input_sample02 {
outline-width: thin;
outline-style: dotted;
outline-color: red;
}
.input_sample03 {
outline-width: thick;
outline-style: dashed;
outline-color: invert;
}
XHTML
<div class="box_sample">
<input type="text" value="outline-style:solid;" size="60" class="input_sample01" />
</div>
<div class="box_sample">
<input type="text" value="outline-style:dotted;" size="60" class="input_sample02" />
</div>
<div class="box_sample">
<input type="text" value="outline-style:dashed;" size="60" class="input_sample03" />
</div>
表示確認
outline-styleに関連するCSSプロパティ
| ボーダー・アウトライン | |
|---|---|
| border | 要素の周囲に境界線を付ける |
| border-bottom | 要素の底辺に境界線を付ける |
| border-bottom-color | 要素の底辺に表示する境界線の色を指定する |
| border-bottom-left-radius | 要素の左下の角丸を指定する |
| border-bottom-right-radius | 要素の右下の角丸を指定する |
| border-bottom-style | 要素の底辺に表示する境界線の形状を指定する |
| border-bottom-width | 要素の底辺に表示する境界線の幅を指定する |
| border-collapse | 表のセル同士が隣接する境界線を共有するか分離するかを指定する |
| border-color | 要素の境界線の色を指定する |
| border-image | 要素の境界線に画像を指定する |
| border-image-outset | 境界線の画像が要素の縁からはみ出す距離を指定する |
| border-image-repeat | 境界線に表示させる画像の繰り返し方を指定する |
| border-image-slice | 境界線に指定した画像の使用範囲を指定する |
| border-image-source | 境界線に使用する画像ファイルを指定する |
| border-image-width | 境界線に指定した画像の幅を指定する |
| border-left | 要素の左辺に境界線を付ける |
| border-left-color | 要素の左辺に表示する境界線の色を指定する |
| border-left-style | 要素の左辺に表示する境界線の形状を指定する |
| border-left-width | 要素の左辺に表示する境界線の幅を指定する |
| border-radius | 要素の角丸についてまとめて指定する |
| border-right | 要素の右辺に境界線を付ける |
| border-right-color | 要素の右辺に表示する境界線の色を指定する |
| border-right-style | 要素の右辺に表示する境界線の形状を指定する |
| border-right-width | 要素の右辺に表示する境界線の幅を指定する |
| border-spacing | 表に含まれるセル同士の間隔を指定する |
| border-style | 境界線の形状を指定する |
| border-top | 要素の上辺に境界線を付ける |
| border-top-color | 要素の上辺に表示境界線の色を指定する |
| border-top-left-radius | 要素の左上の角丸を指定する |
| border-top-right-radius | 要素の右上の角丸を指定する |
| border-top-style | 要素の上辺に表示する境界線の形状を指定する |
| border-top-width | 要素の上辺に表示する境界線の幅を指定する |
| border-width | 境界線の幅を指定する |
| outline | アウトラインの表示方法をまとめて指定する |
| outline-color | アウトラインの色を指定する |
| outline-offset | アウトラインのオフセット値を指定する |
| outline-style | アウトラインのスタイルを指定する |
| outline-width | アウトラインの太さを指定する |