outline-width：アウトラインの太さを指定する
| 適用対象 | 全ての要素 |
| 継承 | しない |
outline-widthプロパティは、アウトラインの太さを指定する際に使用します。輪郭線を表示させる場合には、必ずoutline-styleプロパティの値を変えましょう。
borderプロパティと違い、スペースを取らないためレイアウトに影響を与えません。また、上下左右に独立した指定をする事は出来ません。
outline-widthに与えられる値
- outline-width: 数値で指定する;
- [px]や[em]など、任意の単位に数値を指定して太さを決めます。
- outline-width: キーワードで指定する;
- [thin（細い）]、[medium（普通）]、[thick（太い）]のキーワードで大まかな指定が出来ます。太さはブラウザ依存なので、あまり使う機会は無さそうですね。
outline-widthの使用サンプル
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-width:3px;" size="60" class="input_sample01" />
</div>
<div class="box_sample">
<input type="text" value="outline-width:thin;" size="60" class="input_sample02" />
</div>
<div class="box_sample">
<input type="text" value="outline-width:thick;" size="60" class="input_sample03" />
</div>
表示確認
outline-widthに関連する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 | アウトラインの太さを指定する |