仕様
outline-width | <line-width> |
---|---|
一括/個別 | 個別指定 |
初期値 | medium |
適用対象 | すべての要素(疑似要素を含む) |
継承 | なし |
百分率 | なし |
計算値 | 絶対的な長さ。outline-style が none の場合は 0 。 |
補足 | <line-width> = <length> | thin | medium | thick |
outline-width プロパティは、要素の上下左右の輪郭線の幅を設定する個別指定プロパティです。
非継承プロパティで、初期値は medium なので、省略時は medium が指定値となります。
ボーダー領域の外側ではあるが領域を占有しないのでマージンの範囲内もしくは包括要素のパティング内に収める事が望ましいです。
上,右,下,左に異なる値を指定する事はできません。
<length> 値
- cdvSample310
> div { margin: 1.5em; outline-style: solid; }
- <div class=
"cdvSample310"> - <div style=
"font-size: 2em;">例</div></div>
例示の雛型です。style属性を書き換えて例示しています。
マージンは、輪郭線の表示領域として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の線種の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。フォントサイズは、幅の記述する単位にフォントサイズがあるのでその確認の為の記述です。
- outline-width: 1em;
- font-size: 2em;
単位 em の値を指定しました。em は、font-size の計算値を用います。
- outline-width: 1.6rem;
- font-size: 2em;
単位 rem の値を指定しました。rem は、ルート要素の font-size の計算値を用います。
(html { font-size: 62.5%; } body { font-size: 1.6em; } で、body からそのまま継承している状態で提示しています。)
- outline-width: 16px;
- font-size: 2em;
単位 px の値を指定しました。px は、1 ピクセルです。
- outline-width: 1vw;
- font-size: 2em;
単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。
キーワード
- cdvSample010
> div { outline-style: solid; }
- <div class=
"cdvSample010"> - <div style=
"">例</div></div>
例示の雛型です。style属性を書き換えて例示しています。
文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の線種の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。
- outline-width: thin;
キーワード thin を指定しました。thin は、細い線です。
- outline-width: medium;
キーワード medium を指定しました。medium は、中くらいの線です。medium は、outline-width の初期値です。
- outline-width: thick;
キーワード thick を指定しました。thick は、太い線です。
CSS全体のキーワード
- cdvSample320
> div { margin: 2em; padding: 2em; outline: solid 1em#0000ff ;} - cdvSample320
> div { outline-style: solid; }> div
- <div class=
"cdvSample320"> - <div>親<div style=
"">子</div></div></div>
例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の線種の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。親要素の輪郭線の記述は、継承の確認の為に記述しています。
- outline-width: inherit;
キーワード inherit を指定しました。inherit は、明示的な継承です。
- outline-width: initial;
キーワード initial を指定しました。initial は、プロパティの初期値を設定します。outline-width プロパティの初期値は medium です。
- outline-width: unset;
キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承,非継承プロパティなら初期値を設定します。outline-width プロパティは非継承プロパティなので初期値の medium を設定します。
付記
次は、「outline-color プロパティ」です。
要素の輪郭線の色を記述する個別指定プロパティ outline-color について記述する事を目的としたページです。
前のページの「outline-style プロパティ」はこちらです。
outline-widthを含む一括指定プロパティの「outline プロパティ」はこちらです。
上位のページの「要素の輪郭線」はこちらです。